CSS选择器

 基本格式：

选择器 {
  属性1:值1;
  属性2:值2;
}

选择器

一、基本选择器

1、元素选择器   

用元素名称做选择器  E{}

特例：*{}  （*表示所有元素全部选中）

/*示例：*/    
div {
    color: red;
    background-color: yellow;
    font-size: 30px;
}

2、属性选择器

E[attr]{}

div[id]有id属性的div元素

div[id=xx]有id属性，且id属性值为xx的div元素

div[id*=xx]有id属性，且id属性值包含xx的div元素

div[id^=xx]有id属性，且id属性值以xx开头的div元素

div[id$=xx]有id属性，且id属性值以xx结尾的div元素

div[id$=xx] {
  color:red;
  background:yellow;
  font-size:30px;
}

3、id选择器

#加id名称

#xx {
  color:red;
  background:yellow;
  font-size:30px;
}

特例：结合选择器

p#aa {
  color:red;
  background:yellow;
  font-size:30px;
}

 4、class选择器

.加class名称

.aa {
  color:red;
  background:yellow;
  font-size:30px;
}

特例：结合选择器

p.aa {
  color:red;
  background:yellow;
  font-size:30px;
}

5、包含选择器

selector1 selector2{} 强调包含关系  （不一定是父子，也可能是祖孙） 弱的包含关系

div p {
  color:red;
  background:yellow;
  font-size:30px;
}

6、子选择器

selector1>selector2{}  强的包含关系，必须是父子

div>p {
  color:red;
  background:yellow;
  font-size:30px;
}

7、兄弟选择器

selector1~selector2{}  匹配selector1对应的元素后边能匹配selector2的兄弟节点

.php~* {
  color:red;
  background:yellow;
  font-size:30px;
}

8、选择器组合 

selector1,selector2,selector3,...{}

div a,span,p,h3 {
  color:red;
  background:yellow;
  font-size:30px;
}

二、伪类元素选择器

1、首字母 

只针对第一个元素，应用于块级元素

p::first-letter {
  color:red;
  background:yellow;
  font-size:30px;
}

2、首行

只针对第一行元素，应用于块级元素

p::first-line {
  color:red;
  background:yellow;
  font-size:30px;
}

word-break表示单词是否裂开

keep-all保持完整   break-all裂开

p {
  word-break: break-all;
}

3、往前加东西::before

div::before {
  /*添加的内容*/
  content: "aaa";
  background: pink;
  color: blue;
}

4、往后加东西::after

div::after {
  /*添加的内容*/
  content: "bbb";
  background: yellow;
  color: purple;
}

三、伪类选择器

1、结构性伪类选择器

:nth-child()  括号里可以加数字，数字从1开始

也可以放表达式，例如：2n+1、3n+2... n从0开始

也可以是odd(奇数) even(偶数)

找第一个  :nth-child(1)  相当于  :first-child

 倒着数：

:nth-last-child()  括号里可以加数字，数字从1开始

也可以放表达式，例如：2n+1、3n+2... n从0开始

也可以是odd(奇数) even(偶数)

括号中数值为1时  :nth-last-child(1)  相当于  :last-child

 同类型的第n个

:nth-of-type()  括号里可以加数字，数字从1开始

也可以放表达式，例如：2n+1、3n+2... n从0开始

也可以是odd(奇数) even(偶数)

:nth-of-type(1)  相当于  :first-of-type

 倒着数：

:nth-last-of-type()  括号里可以加数字，数字从1开始

也可以放表达式，例如：2n+1、3n+2... n从0开始

也可以是odd(奇数) even(偶数)

:nth-last-of-type(1)  相当于  :last-of-type

 2、UI状态伪类选择器

:hover 鼠标放上去（悬停状态）

:focus 焦点状态（输入框输入）

:checked 选中状态（单选框，复选框）

 3、其他伪类选择器

not() 排除，主要用于选取某个元素之外的所有元素

h3 div:not(.php) {
  background: yellow;
  color: purple;
}

CSS选择器优先级

规则一：选择器写的越准确（越长）优先级越高

规则二：优先级高低  （id选择器>class选择器>元素选择器）

规则三：同级别同长度下，css代码按顺序执行，后边的代码会把前边的代码覆盖掉（同一样式覆盖，不同样式效果叠加）

规则四：以上规则适用于绝大多数场景，若有特殊场景不适应，自行测试