测试CSS中所有选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--属性选择器-->
h1{
color: black;
}
<!--class选择器-->
.wwwwwww{
color: blue;
}
<!--id选择器-->
#rrrrrr{
color: green;
}
<!-- 后代选择器，所有子类选择器-->
body p{
background: red;
}
<!--子类选择器，后一代选择器-->
li>p{
background: green;
}
<!--兄弟选择器，向下选择一个-->
.active + p{
background: green;
}
<!--兄弟选择器，向下选择所有的兄弟-->
.active~p{
background: blue;
}
<!--伪类选择器-->
ul li:first-child{
background: yellow;
}
a{
background: blue;
}
<!--属性选择器-->
<!--选择所有有id的a标签-->
a[id]{
background: yellow;
}
<!--选择id为tttt的a标签-->
a[id=tttt]{
background: green;
}
<!--选择class内有itemes的a标签-->
a[class*=itemes]{
background: red;
}
<!--选择class以ttt开头的a标签-->
a[class^=ttt]{
background: #64ffff;
}
<!--选择class以rrr结尾的a标签-->
a[class$=rrr]{
background: #23f133;
}
</style>
</head>
<body>
<a class="items classes mytest" id="tttt">asdfafasd</a>
<a class=" classes mytest" id="tttt55">asdfafasd666</a>
<a class="items classes mytest" id="tttt5555">asdfafasd8888</a>
<a class="itemes classes mytest">asdfafasd7676767</a>
<a class="tttttitems classes mytestes">asdfafasd76767678787</a>
<a class="itemes classes mytest">aaaaaaaaaass</a>
<a class="tttttitems classes mytestrrr">asdfafasd76767678787</a>
<a>ddddddddddddd</a>
<h1 class="wwwwwww">asdfffffffff</h1>
<h1 id="rrrrrr">222222</h1>
<h1>333333</h1>
<h1>444444</h1>
<h1>555555</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p >p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p>
<p>p9</p>
<p>p71</p>
<p>p811</p>
<p>p91</p>
</body>标签：blue,color,所有,class,green,background,选择器,CSS From： https://www.cnblogs.com/studymyself/p/17300258.html