后代选择器
1 .本来以为所有的元素都只要加上唯一的class就能选择到了，但是实际场景还是有很多不能加class的情况，所以选择器还是需要多种配合使用
2 .div span{}
1 .后代选择器选择的可以是直接后代，也可以是间接后代。
2 .可以匹配到孙子，重孙子辈下面的span元素，
3 .所以这个的意思就是说所有div下面的span元素，都会被选中
子代选择器
1 .div>span
2 .只能匹配到当前标签往内一层的元素,只能匹配到儿子辈，不能匹配到孙子辈
3 .div span:div下的所有span都可以
同级元素
1 .div +span
2 .和这个div同一层级的下一个叫span的元素，紧挨着
3 .div ~span
4 .和这个div同一层级的所有叫span的元素
5 ..sender:hover ~ .hover :一旦hover.sender元素，后面所有的.hover都被选中发
6 ..sender:hover + .text_2 同上，第一个.text_2被选中
<div>
<div class="hover">div</div>
<div>div</div>
<div><p>p</p></div>
<div><p><span>div p span</span></p></div>
<span>div span</span>
<span>div span div+span不会取到这个，div~span会取到这个</span>
</div>
<hr>
<span>同级span</span>
<div><span>div span-2</span></div>
<div class="sender"></div>
<p class="text_1">文本内容01</p>
<p class="text_2">文本内容02</p>
<div class="hover">div</div>
<div class="hover">div</div>
属性选择器
div[type]{
color:red;
}
/* 匹配所有有type的 */
div[type='']{
color:green;
}
/* 匹配所有type是空的 */
div[class~="error"]{
color:hotpink
}
/* 匹配属性有很多，是以空格相隔，里面有一error属性 */
div[class|="class"]{
color:indigo
}
/* 属性是以横线连接的，开头是class,主要用来给lang属性，比如en,en-us,en-gb等等 */
div[type^="l"]{
color:red;
}
/* type以l开头的元素 */
div[type$="-"]{
color:yellowgreen;
}
/* type以-结尾的元素 */
div[type*="-"]{
background: #eee;
}
/* type里面包含-的元素 */
<div type="div">
div type
</div>
<div>
div null
</div>
<div type=''>
div type=''
</div>
<div class="class error">
~error
</div>
<div class="class-error-success">
-error
</div>
伪类元素
ul li:first-child{
color: red;
}
ul li:last-child{
color:yellow;
}
ul li:first-child::first-letter{
color: white;
/* 第一个元素的第一个字母是白色 */
}
ul li:last-child::first-line{
color:red;
/* 最后一个元素的第一行是红色 */
}
div span:before{
content: "前面";
/* 在span前面加一个内容 */
}
div span:after{
content: "后面";
}
ul li:nth-child(2){
color:teal;
}
ul li:nth-last-child(2){
color:tomato;
}
<ul>
<li>12</li>
<li>nth-child(2)</li>
<li>3</li>
<li>nth-last-child</li>
<li>5 <br>6</li>
</ul>
<div>
<span>span</span>
</div>
//------------
ul li:nth-of-type(1){
color:red;
}
ul li:nth-child(1){
/*匹配父元素的第几个子元素 */
color:red;
}
div:only-child{
background:yellowgreen;
}
div:empty{
background:rebeccapurple;
}
.no{
width: 200px;
height: 200px;
}
<ul>
<div>0</div>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div><span>only child</span>
</div>
<div><div class="no"></div></div>
<!-- 这样才算一个元素，里面是“123”文字都不算 -->
<div class="no"></div>
<!-- 什么都没有才算empty -->
ul li:nth-child(odd){
/* 选中偶数个 */
color:red;
/* 2n=odd */
}
ul li:nth-child(even){
color:saddlebrown
/* 选中奇数个 */
/* even=2n-1 */
}
/* 还有其他的形式：每隔三个：3n，2n+11,3n+0 */
ul li:not(:first-child){
color:red;
/* 反选：除了第一个都选中 */
/* 匹配不符合当前选择器的任何元素 */
}
input:enabled{
color:red
}
/* 表单被激活 */
input:disabled{
color: saddlebrown;
}
/* 表单被禁用 */
input:checked{
color:red;
}
/* 表单被选择 */
option::selection{
color:red;
}
/* 匹配当前选中元素，但是就是无效，为啥呢 */
option:hover{
color:red!important;
}
/* hover也是无效，但是在chrome里面选择:hover样式就是正确的 */
<input type="text">
<input type="text" disabled placeholder="警用">
<input type="checkbox">
<input type="radio">
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
