高級選擇器分為：

• 后代選擇器

• 子代選擇器

• 并集選擇器

• 交集選擇器

后代選擇器

使用空格表示后代選擇器。顧名思義，父元素的后代（包括兒子，孫子，重孫子）

.container p{color: red; } .container .item p{color: yellow; } View Code

子代選擇器

使用>表示子代選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

.container>p{color: yellowgreen; } View Code

并集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標簽。一些共性的元素，可以使用并集選擇器

/*并集選擇器*/ h3,a{color: #008000;text-decoration: none;} View Code

比如像百度首頁使用并集選擇器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin: 0;padding: 0} /*使用此并集選擇器選中頁面中所有的標簽，頁面布局的時候會使用*/

交集選擇器

使用.表示交集選擇器。第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active

比如有一個<h4 class='active'></h4>這樣的標簽。

那么

h4{width: 100px;font-size: 14px; } .active{color: red;text-decoration: underline; } /* 交集選擇器 */ h4.active{background: #00BFFF; } View Code

它表示兩者選中之后元素共有的特性。

?

? ? 屬性選擇器

屬性選擇器，字面意思就是根據標簽中的屬性，選中當前的標簽。

語法：

/*根據屬性查找*//*[for]{color: red;}*//*找到for屬性的等于username的元素 字體顏色設為紅色*//*[for='username']{color: yellow;}*//*以....開頭 ^*/ /*[for^='user']{color: #008000;}*//*以....結尾 $*//*[for$='vvip']{color: red;}*//*包含某元素的標簽*//*[for*="vip"]{ color: #00BFFF;}*//**//*指定單詞的屬性*/label[for~='user1']{color: red;}input[type='text']{background: red;} View Code

?

　　偽類選擇器

偽類選擇器一般會用在超鏈接a標簽中，使用a標簽的偽類選擇器，我們一定要遵循"愛恨準則"? LoVe HAte

?

/*沒有被訪問的a標簽的樣式*/.box ul li.item1 a:link{color: #666;}/*訪問過后的a標簽的樣式*/.box ul li.item2 a:visited{color: yellow;}/*鼠標懸停時a標簽的樣式*/.box ul li.item3 a:hover{color: green;}/*鼠標摁住的時候a標簽的樣式*/.box ul li.item4 a:active{color: yellowgreen;}

再給大家介紹一種css3的選擇器nth-child()

/*選中第一個元素*/div ul li:first-child{font-size: 20px;color: red;}/*選中最后一個元素*/div ul li:last-child{font-size: 20px;color: yellow;}/*選中當前指定的元素 數值從1開始*/div ul li:nth-child(3){font-size: 30px;color: purple;}/*n表示選中所有,這里面必須是n, 從0開始的 0的時候表示沒有選中*/div ul li:nth-child(n){font-size: 40px;color: red;}/*偶數*/div ul li:nth-child(2n){font-size: 50px;color: gold;}/*奇數*/div ul li:nth-child(2n-1){font-size: 50px;color: yellow;}/*隔幾換色 隔行換色隔4換色 就是5n+1,隔3換色就是4n+1*/div ul li:nth-child(5n+1){font-size: 50px;color: red;}

?

/*設置第一個首字母的樣式*/p:first-letter{color: red;font-size: 30px;}/* 在....之前 添加內容 這個屬性使用不是很頻繁 了解 使用此偽元素選擇器一定要結合content屬性*/p:before{content:'alex';}/*在....之后 添加內容，使用非常頻繁 通常與咱們后面要講到布局 有很大的關聯（清除浮動）*/p:after{content:'&';color: red;font-size: 40px;} content

?

轉載于:https://www.cnblogs.com/xintiao-/p/9669384.html

總結

以上是生活随笔為你收集整理的03-高级选择器,属性选择器,伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。