CSS选择器

1.基础选择器

（1）通⽤选择器

* 号，选择html⽂件内所有的元素 * {样式声明}

最常⽤的⽤法是 *{margin:0;padding:0} 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使⽤。

（2）元素选择器（标签选择器）

通过标签的名字来选择html元素，权重值为1，⽐如： div {样式声明}

弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况

（3）id选择器

给标签的前半部分增加⼀个属性 id 这个属性可以指定⼀个唯⼀的不重复的值，权重值100

#abc {样式声明}

id名不能以数字开头，不建议使⽤中⽂命名，尽量⻅名知意 多个单词连接可以⽤- 、_、驼峰 每个都有和其他重复的样式，使⽤id有⼏个弊端，过于订制化导致每⼀个元素都要有⾃⼰的id有⼀套⾃⼰的样式，代码量过⼤重复性过⼤。明明有重复的内容，但通过id选择器只能是⼀个⼀个的书写其样式，⼜不是很智能

（4）类选择器【重要】

类选择器先要使⽤标签的 class 属性赋值，类选择器的权重值10

.xxx {样式声明}

类名不能以数字开头，不建议使⽤中⽂命名，尽量⻅名知意，多个单词连接可以⽤- 、_、驼峰 ⼀个元素可以创建多个类名，每个类名之间⽤空格分开

易错点： 忘记给元素增加id或者class属性就直接开始写css样式

先写类名还是先定义class属性

（5）群组选择器

多个选择器名⽤逗号连接，可以⼀起完成共同样式的指定

div,p,span {color: red;} 群组选择器并不是只能使⽤相同类型的选择器，可以是各种选择器⼀起参与

#mydiv.b,h4 {color: blue;}

2.关系选择器

（1）后代选择器

先代元素（祖先）选择器写在前⾯，之后写⼀个空格，空格后写后代元素选择器。

祖先元素 后代元素 {样式声明}

需要注意的是空格不要忘记，祖先元素不⼀定是⽗级和祖⽗级还可以再往上的级别都是可以的 但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续⽤空格加⼊更深层的后代。

（2）⼦代选择器

可以选中某个元素的直接⼦元素，与后代不同的是⼦代选择器的范围更⼩。

⽗级元素 > ⼦级元素 {样式声明}

层级可以向后代选择器⼀样延申,区别就是⼦代是>连接,后代是空格连接

.baba > div > div {字体颜⾊;}

（3）兄弟选择器

同⼀层的关系选择器，可以选中该元素后⾯的兄弟元素。

某元素选择器 ~ 该元素后⾯的所有兄弟 {样式声明}

需要注意的是兄弟选择器可以选到该元素后⾯的兄弟，⽽选不到之前的。

（4）相邻选择器

同⼀层的关系选择器，可以选中参照的元素后⾯紧挨着被参照元素的选择器。

某元素选择器 + 该元素后⾯的唯⼀相邻的兄弟 {样式声明}

需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的⼀个兄弟

3.伪类选择器

伪类选择器的作⽤是匹配同⼀个元素，不同状态下的样式

选择器:伪类 {样式声明}

a:link {样式声明} 没有被打开之前，或者没被打开过（ a:link 特有）

a:visited {样式声明} 访问过后（ a:visited 特有）

div:hover {样式声明} ⿏标悬停

p:active {样式声明} 点击激活

input:focus {} 属性代表input标签获取焦点的样式( 标签的属性)

input:cheaked {} 属性代表input单选、复选等type类型被选中后的样式( 标签的属性)

4.伪元素选择器

CSS 伪元素⽤于设置元素的“指定部分”的样式

:before表示元素最前边的部分，紧随着标签的部分

:after表示元素的最后边的部分，紧随着标签的部分

:before{content:""}

:after{content:""} content必须写

两个冒号 ( :: ) ⽽不是⼀个冒号 ( : )，这是 CSS3 规范中的⼀部分要求，⽬的是为了区分伪类和伪元素。⼤多数浏览器都⽀持这两种表示⽅式。