CSS各種選擇器

2022-07-09 18:27:12 字數 914 閱讀 4576

1、元素選擇器

li{}最常用、最基本

2、派生選擇器

li strong標籤間用空格分隔、定義了li標籤中的strong標籤的樣式,css1中上下文選擇器、css2中派生選擇器

3、id選擇器 

#id{} 在現代布局中,id 選擇器常常用於建立派生選擇器。#id div{}

4、class選擇器

.classname{} 可以結合元素選擇器

多類選擇器

class=「classname1 classname2  classname3...」空格來分隔在 ie7 之前的版本中,不同平台的 internet explorer 都不能正確地處理多類選擇器

5、後代選擇器

ul em{}無論em元素巢狀多深,都可以選擇到

6、子元素選擇器

如果不希望選擇任意的後代元素,h1>strong{}選擇h1中的所有子元素strong

7、相鄰兄弟選擇器

選擇緊接在另乙個元素後的元素,而且二者有相同的父元素  h1 + p

8、偽類

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 當有滑鼠懸停在鏈結上 */

a:active/* 被選擇的鏈結 */

input:focus{}//ie 瀏覽器不支援此屬性。若宣告了doctype則ie8及以上可以支援

//為了產生預期的效果,在 css 定義中,a:hover 必須位於 a:link 和 a:visited 之後!!

//為了產生預期的效果,在 css 定義中,a:active 必須位於 a:hover 之後!!

//所有主流瀏覽器都支援 :active 偽類。啟用的意思

9、偽元素

css 各種 選擇器

css 各種 選擇器 通配選擇器。全文匹配,所有使用,預設配置 標籤選擇器。應用於標籤為以下的html標籤 td 多標籤選擇器,也叫群組選擇器。應用於所有html標籤為以下的元素 td,p,div,a 類選擇器。應用於html頁面所有class屬性為ibmclass的標籤元素 ibmclass 精確...

各種選擇器

交集選擇器 p.red 選擇並集選擇器 div,p,span,choose,idname 後代選擇器 div p 選中div下的p標籤 choose p 選中.choose類下的p標籤 子代選擇器 僅限於第一代 choose h3 屬性選擇器 選擇具有某種屬性的標籤 a title 選擇帶title...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...