一、关系选择器
1、E+F （E元素下一个满足条件的兄弟元素节点）
<style>
div + p{
background-color:red;// 第一个p元素变色
}
</style>
<body>
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
<style>
div + .demo{
background-color:red;// 第一个p元素变色
}
</style>
<body>
<div>div</div>
<p class="demo">1</p>
<p>2</p>
<p>3</p>
2、E~F （E下所有满足条件的兄弟元素节点）
二、属性选择器
1、E[att~=“val”]
2、E[att | =“val”] （以val为开头 或 以val- 为开头的元素）
<style>
div[class|='a']{
background-color:red; //1、2变色
}
</style>
<body>
<div class="a">1</div>
<div class="a-test">2</div>
<div class="b-test">3</div>
3、E[att^=“val”]
4、E[att$=“val”]
5、E[att*=“val”]
三、伪元素选择器
1、E::placeholder （注意兼容性）
<style>
input{
border:1px solid black;
}
input::placeholder{
color:orangered; //改变一下“请输入用户名”字体颜色
}
</style>
<body>
<input type="text" placeholder="请输入用户名">
</body>
2、E::selection
四、伪类选择器 （被选择元素的一种状态）
1、E:not (s) :root （跟标签选择器，包含html） E:target
<style>
div:not(.test){
background-color:red;
}
</style>
<body>
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
</body>
//或写成
div:not([class="demo"]){
background-color:red;
}
not应用实例：
<style>
*{
margin:0;
padding:0;
}
ul{
width:300px;
border:1px solid #999;
}
li{
height:50px;
margin:0 5px;
}
li:not(:last-of-type){
border-bottom:1px solid black;
}
</style>
<body>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</body>
//效果如下
<style>
div:target{
border:1px solid black;
}
/* location.hash = xxx （被标记成锚点之后） */
</style>
<body>
<a href="#box1">div1</a>
<a href="#box2">div2</a>
<div id="box1">1</div>
<div id="box2">2</div>
</body> 小练习：
2、E:first-child E:last-child E:only-child E:nth-child (n) E:nth-last-child (n) （这些元素都考虑其他子元素的影响）
<style>
P:first-child{
background-color:red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
<style>
P:first-child{
background-color:red;//第一个p元素不会变红，因为第一个子元素是span
}
</style>
<body>
<div>
<span>5</span>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<style>
p:nth-child(2n+1){
background-color:red;//1、3、5变色 （css从1开始查）
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
3、E:first-of-type E:last-of-type E:only-of-type （不受其他类型元素干扰）
4、E:nth-of-type(n) E:nth-of-last-type(n) （不受其他类型元素干扰） （常见）
5、E:empty（元素为空，无节点，注释也算做空） E:checked E:enabled E:disabled
<style>
input:checked + span{
background:greenyellow;
}
input:checked + span::after{
content:"恭喜中奖";
}
</style>
<body>
<label>
一个小惊喜
<input type="checkbox">
<span></span>
</label>
</body>
6、E:read-only E:read-write