版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/86307287
高级选择器：
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;
}
效果：
结构伪类选择器
页面：
扫描二维码关注公众号，回复：
4910942 查看本文章
<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;
}效果：
