這篇文章帶給大家的內容是關於如何使用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交集選擇器（複合選擇器）##作用：可以選擇同時滿足多個選擇器的元素
語法：選擇器1選擇器2選擇器N{ }注意：因為id可以唯一確定一個元素，因此不要對id使用交集選擇器#例：選取class屬性值包含p4的spanspan.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 選取的元素(火狐中應該這樣用::-moz-selection)使用偽元素來表示元素中的一些特殊位置
:first-letter : 第一個字符:fist-line : 第一行字元
:before : 表示元素最前邊的部分一般before都需要結合這個樣式一起使用，透過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"類似，不過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;
}相关文章推荐：
以上是css選擇器有哪些類型？ css常用選擇器的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
