CSS选择器

CSS格式

selector{

property:value;

}

---

一，元素选择器，直接用元素名称做选择

前面用*是选泽所有元素

*{

backround: pink; 背景颜色

color:blue; 字体颜色

}

则是只给div加样式

div{

backround: pink; 背景颜色

color:blue; 字体颜色

}

---

属性选择器 E[attr]{} */

div[id] div内有对应id的被选中，也可以直接只用id [id]

[id^=xx]以xx开头

[id$=xx]以xx结尾

[id*=xx]包含xx的

---

class选择器

div.xx{

中间不饿能加空格不然会变成包含选择器

---

包含选择器，强调包含

selector1 selector2{

---

子选择器，必须父子关系

selector1>selector2{

---

兄弟选择器

selector1~selector2{

找所有弟弟用*

---

选择器组合，符合a或者符合b，只要符合一个就被选中

selector1，selector2{

---

二，伪元素选择器

div::first-letter{

backround: pink

color blue

font-size: 30px

两个冒号，对首字母生效，只能用于块级元素

first-line首行

before 加载前面

after 加在后面

word-break:break-all 单词裂开，可换行

---

三，伪类选择器

结构型伪类选择器

ul li:nth-child{

:nth-child(n) n可以是数字，也可以表达式(2n+1)，(3n+2） 奇数odd，偶数even

第一个 first-child 最后一个 last-child

倒着数最后一个 nth-last-child

:nth-of-type(n) 既认数字也认类型

first-of-type == :nth-of-type(1)

last-of-type == nth-last-of-type(1)

---

UI状态伪类选择器

鼠标悬停 :hover 鼠标放上去时

焦点状态 :focus 鼠标要输入东西的时候

选中状态 :check 鼠标选中的时候

---

其他伪类选择器

:not() 过滤掉某些元素

---

选择器优先级规则

1.选择器写的越长（越准确），优先级越高

2.优先级高低 id选择器>class选择器>元素选择器

3.同级别长度，css代码按照顺序执行，后边的代码会把前面的覆盖掉

4.以上适用于大部分场景，特殊场景自行测试