CSS3高级选择器有哪些？下面本篇文章就来给大家介绍一下css3高级选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
层次选择器
页面
<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>
CSS
/*后代选择器:孩子的孩子...*/
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>
CSS
/*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>
CSS
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;
}
效果：
