##通配符(*)
* {
margin:0;
padding:0;
}
## 类选项器(class)
<div id="box"></div>
#box{ }
## id选择器
<div class="box"></div>
.box{ }
## 条件选择器(后代/子代/兄弟 选择器)
div ul li{} 后代选择器
div>ul>li{} 子代选择器
.box+li{} 当前元素后面的的第一个兄弟 兄弟选择器
.box~li{} 当前元素的后面所有的亲兄弟 兄弟选择器
## 结构选择器(结构伪类选择器)
1. li:first-child
2. li:first-of-type
3. li:last-child
4. li:last-of-type
5. li:nth-child(2) (2n)/(even)寻找偶数 (2n+1)/(odd)奇数
6. li:nth-of-type(2)
(3n+1)/(3n+2) 数字的含义 n 和 +1的意义
ul>li:first-child 不会标签名分类
ul>li:first-of-type{} 先分类:标签名分类
ul>li:last-child
ul>li:last-of-type{}
ul>li:nth-child(2) (2n)/(even)寻找偶数 (2n+1)/(odd)奇数
(3n+1)/(3n+2) 数字的含义 n 和 +1的意义
例 +3是开始 n值为(0,1,2,3...)
ul>li:nth-of-type(2){}
## 否定选择器
语法:
ul>li:not(:first-child){ } //满足条件以外的元素
## 伪类选择器
div:hover div:hover a{}
注:如果hover后面有其他选择器,设置样式的对象是后面的选择器中的元素
a:link 初始状态颜色
a:visited 访问之后
a:hover 鼠标移上
a:active 点击激活 (必须按顺序定义)因为:权重一样
input:focus{
获取焦点设置样式
}
## 伪元素选择器
div::before/::after 在元素(div)设置第一个子元素,必须与content属性连用,默认是行元素
元素前插入内容
div::after 元素后插入内容
div::first-line 选择第一行 元素(div)必须是块元素
div::firdt-after 选择第一个字 元素(div)必须是块元素
## 属性选择器
元素1[属性1]
div[class]
div[class=box1] 要完全匹配(box1)
div[class~=box] 包含(box)就匹配
模糊查询是 class^=b 开头是b
class$=b 结尾是b
class*=b 包含是b
## 复合选择器(群组选择器)优先级
并集:p:hover,h2:haver,span {}
div>ul>li 优先级高于 ul>li
div>ul>li 优先级低于 .item>li
.item>li 优先级相同 second li 权重一样