CSS3 高階選擇器
阿新 • • 發佈：2019-01-14
高階選擇器：
1>層次選擇器
2>結構偽類選擇器
3>屬性選擇器
詳細介紹這幾個選擇器：
層次選擇器
頁面：
<body> <!--格式化程式碼：ctrl+shift+F--> <h2>兄弟</h2> <p>1</p> <!-- 為了說明相鄰兄弟選擇器，在此處新增一個類名active --> <p>2</p> <p>3</p> <ul> <li> <p>張三</p> </li> <li> <p>李四</p> </li> <li> <p>王五</p> </li> </ul> </body>
/*後代選擇器:孩子的孩子...*/
body p{
/*border: 1px solid red;*/
}
/*子選擇器:body的孩子*/
body>p{
/*border: 1px solid blue;*/
}
/*相鄰兄弟選擇器:比較近的兄弟*/
h2+p{
/*border: 2px solid yellowgreen;*/
}
/*通用兄弟選擇器:找到p遠近兄弟*/
h2~p{
border: 5px solid chocolate;
}
效果：
結構偽類選擇器
頁面：
<body> <p>1</p> <p>2</p> <p>3</p> <ul> <li> <p>張三0</p> </li> <li> <p>李四1</p> </li> <li> <p>王五2</p> </li> <li> <p>熊大3</p> </li> </ul> </body>
/*E:first-child :找父的第一個孩子 */ /*注意:不能用body作為父*/ li:first-child{ border: 2px solid darkcyan; } /*E:first-child :找父的最後一個孩子 */ li:last-child{ border: 2px solid brown; } /*E F:nth-child(n): 找到父的孩子第幾個 odd:奇數 ,even:偶數（從1開始數） */ /*ul li:nth-child(odd){*/ ul li:nth-child(3){ /*background-color: coral;*/ } /*E:first-of-type:父級的第一個元素*/ li:first-of-type{ background: cornflowerblue; } /*E:last-of-type:父級的最後一個元素*/ li:last-of-type{ background: chartreuse; } /*E F:nth-of-type(n):找到子孩子的第幾個*/ ul li:nth-of-type(2){ border: 10px double darkgrey; } /*E F:nth-last-of-type(n):子孩子中的倒數第1個同級兄弟*/ li:nth-last-of-type(1){ border: 5px double red; }
效果：
屬性選擇器
頁面：
<body>
<a href="http://www.baidu.com" id="first">1</a>
<a href="#" title="test website" target="_blank">2</a>
<a href="sites/file/test.html">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpg">5</a>
<a href="efc" title="website link">6</a>
<a href="/a.pdf">7</a>
<a href="/abc.pdf">8</a>
<a href="abcdef.doc">9</a>
<a href="abd.doc" id="last">10</a>
</body>a{
width: 60px;
height: 60px;
border: 0px solid red;
background: gainsboro;
display: block; /*行級轉換成塊級*/
float: left; /*浮動*/
margin: 5px 10px; /*外邊距*/
border-radius: 20%; /* 圓角 */
text-align: center; /*水平文字居中*/
line-height: 55px; /*垂直居中*/
font-weight: bolder; /*字型加粗*/
text-decoration: none; /*去掉下劃線*/
color:black; /*字型顏色*/
}
/*E[attr]: E標籤的屬性id*/
a[id]{
background: mediumaquamarine;
}
/*E[attr=val]:E標籤的屬性href=#*/
a[href='#']{
background: chocolate;
}
/*E[attr^=val]:E標籤的屬性href的值以s開頭*/
a[href^='s']{
background: yellowgreen;
}
/*E[attr$=val]:E標籤的屬性href的值以f結尾*/
a[href$='f']{
background: blueviolet;
}
/*E[attr*=val]:E標籤的屬性href的值包含f所有的*/
a[href*='f']{
background:coral;
}效果：
