本篇文章給大家帶來的內容是關於如何使用css選取器有哪些類型?css常用選取器的簡單介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。
css標籤選取器
作用:選中頁面中的所有指定元素
文法:標籤名:{}
id選取器
作用:通過元素的id屬性值鑽中唯一一個元素
文法:#id{}
css類別選取器
作用:通過元素的class屬性值選中一組元素
文法:.class屬性值{}
可以同時為一個元素設定多個class屬性值,多個值之間用空格隔開
選取器分組(並集選取器)
作用: 通過選取器分組可以同時選中多個選取器對應的元素
文法:選取器1,選取器2,選取器N{}
例:選中id為p3、class屬性值包含p2、h1標籤
#p3,.p2,h1{ background-color: yellow; }
css通配選取器
作用:選中頁面中所有的元素
文法:*{}
css交集選取器(複合選取器)
作用:可以選擇同時滿足多個選取器的元素
文法:選取器1選取器2選取器N{}
注意:因為id可以唯一確定一個元素,因此不要對id使用交集選取器
例:選中class屬性值包含p4的span
span.p4{ background-color:#4169E1; }
元素之間的關係:
父元素:直接包含子項目的元素。
子項目:直接被父元素包含的元素。
祖先元素:直接或簡介包含後代元素的元素,父元素也是祖先元素。
後代元素:直接或間接被祖先元素包含的元素,子項目也是後代元素。
兄弟元素:擁有相同父元素的元素。
css後代元素選取器
作用:選中指定元素的後代元素
文法:祖先元素 後代元素{}
例:選中div中的span
div span { color: chartreuse; }
css子項目選取器(IE6及以下的瀏覽器不支援)
作用:選中指定父元素的指定子項目
文法:父元素>子項目
例:選中div中的span
div>span{ background-color: yellow; }
偽類別選取器用來表示元素的一種特殊的狀態。
如:瀏覽過的超連結,普通超連結,擷取焦點的文字框
當我們需要為處在這些特殊狀態的元素設定樣式時,就可以使用偽類給串連定義的樣式
正常連結:a:link
訪問過的連結:a:visited(只能定義顏色)
滑鼠滑過的串連:a:hover
正在點擊的連結:a:active
a:link和a:visited之間的順序沒規定,但他們必須在a:hover和a:active前面,a:hover又必須在a:active前面
hover和active也可以為其他元素設定 如 p:hover p:active 不過ie6及以下不支援
其他偽類:
:focus 擷取焦點
:before 指定元素前
:after 指定元素後
::selection 選中的元素(Firefox中應該這樣用::-moz-selection)
使用虛擬元素來表示元素中的一些特殊位置
:first-letter : 第一個字元
:fist-line : 第一行字元
:before : 表示元素最前邊的部分
一般before都需要結合content這個樣式一起使用,
通過content可以向before或after的位置添加一些內容
:after : 表示元素的最後邊
將p標籤中的第一個字元設定為黃色25px
p:first-letter{ color:yellow; font-size: 25px; } p:first-line{ background: #FF0000; } 將content的內容添加到p元素的最前面 p:before{ content: "ABC"; } 將content的內容添加到p元素的最後面 p:after{ content: "DEF"; }
css屬性選取器
作用:可以根據元素中的屬性或屬性值來選取指定的元素
文法:[屬性名稱]選取具有指定屬性的元素
[屬性名稱=屬性值 ]選取含有指定屬性值的元素
[屬性名稱^=屬性值]選取屬性值以指定內容開頭的元素
[屬性名稱$=屬性值]選取屬性值以指定內容結尾的元素
[屬性值*=屬性值]選取屬性值包含指定內容的元素
/*為具有title屬性的p元素設定背景顏色*/ p[title]{ color: darkorchid; } /*為title屬性值為hello的元素設定一個背景顏色*/ p[title=hello]{ background-color: cornflowerblue; } /*為title屬性是ab開頭的元素設定一個背景顏色*/ p[title^="ab"]{ background-color: chartreuse; } p[title$="d"]{ font-size: 28px; }
偽類子項目選取器
:first-child : 可以選中第一個子項目
:last-child : 可以選中最後一個元素
:nth-child : 可以選中任意位置的子項目
該選取器後邊可以指定一個參數,指定要選擇第幾個元素
even:偶數
odd: 奇數
first-of-type
last-of-type
nth-of-type
和xxx-chlid類似,不過xxx-child是在所有元素中選擇,xxx-of-type是在指定類型中選擇
例:選中第一個p標籤
p:first-child{ color:coral; } 選中第3個p標籤 p:nth-child(3){ color:chartreuse; } 設定表格奇偶行背景顏色不同 tr:nth(even){ background-color:pink; } tr:nth(odd){ background-color:skyblue; }
後一個兄弟元素選取器
作用:可以選中一個元素後緊挨著的指定兄弟元素
文法:前一個+後一個
例:選中p標籤後的相鄰的兄弟span(p和span不一定相鄰)
p+span{ color:red; }
選中後邊的所有兄弟元素
文法:前一個~後邊所有
否定偽類:
作用:從選種的元素中剔除某些元素
文法: :not(選取器)
例:為所有的p元素設定一個背景顏色,出了class為hello或hello2的元素
p:not(.hello):not(.hello2){ background-color: antiquewhite; }