css选择器

1. 基础选择器

1.1 全局选择器

可以与任何元素匹配，优先级最低，不推荐使用。

*{
     margin: 0;
     padding: 0;
 }

1.2 元素选择器

选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

标签名{
	属性 : 属性值;
}

注意
1.所有的标签，都可以是选择器
2.无论这个标签藏的多深，一定能够被选择上
3.选择的是所有，而不是一个

1.3 类选择器

<标签名 class="one" > </标签名>
.one{
	属性 : 属性值;
}

特点

1. 类选择器可以被多种标签使用
2. 类名不能以数字开头
3. 同一个标签可以使用多个类选择器，用空格隔开

正确：
<标签名 class="one two" > </标签名>
错误：
<标签名 class="one"  class= "two" > </标签名>

1.4 ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义

<标签名 id="one" > </标签名>
#one{
	属性 : 属性值;
}

假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？

• css有着非常严格的计算公式，能够处理冲突.
  一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义

1.5 合并选择器

语法：选择器1,选择器2,…{ }
作用：提取共同的样式，减少重复代码

.header,.footer{
	属性 : 属性值;
}

2. 关系选择器

2.1 后代选择器

选择所有被E元素包含的F元素，中间用空格隔开

E F{
	属性 : 属性值;
}

2.2 子代选择器

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

E>F{
	属性 : 属性值;
}

2.3 相邻兄弟选择器

选择紧跟E元素后的F元素，用加好表示，选择相邻的第一个兄弟元素

E+F{
	属性 : 属性值;
}

若前后都有兄弟，选择后面第一个的兄弟

2.4 通用兄弟选择器

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

E~F{
	属性 : 属性值;
}

若前后都有兄弟，选择后面所有的兄弟

3. 伪类选择器

同一个标签，根据其不同种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

3.1 LVHA

名称	解释	说明
:link	链接	超链接点击之前(只适用于a)
:visited	访问过的	超链接被访问过后(只适用于a)
:hover	悬停	鼠标放在标签上时(适用于所有标签)
:active	激活	鼠标点击标签，但是不松手时(适用于所有标签)

/*让超链接点击之前是红色*/
a:link{
   color:red;
}
/*让超链接点击之后是橘色*/
a:visited{
   color:orange;
}
/*鼠标悬停，放到标签上的时候是绿色*/
a:hover{
   color:green;
}
/*鼠标点击链接，但是不松手的时候是黑色*/
a:active{
   color:black;
}

注意
在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
如果不按照顺序，那么将失效
“爱恨准则”：love hate。必须先爱，后恨

3.2 :first-child 选择器

匹配其父元素中的第一个子元素

3.3 :last-child 选择器

用来匹配父元素中最后一个子元素

3.4 :nth-child(n) 选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制
n 可以是一个数字，一个关键字，或者一个公式
奇数和偶数是可以作为关键字使用，用于相匹配的子元素，其索引是奇数[odd]或偶数[even]（该索引的第一个子节点是1）
3n 表示 是3的倍数

3.5 :only-child 选择器

匹配属于父元素中唯一子元素的元素。

/*匹配属于父元素中唯一子元素 : p 元素*/
p:only-child{
    background:#ff0000;
}

3.6 :empty选择器

选择每个没有任何子级的元素（包括文本节点）

/*指定空的p元素的背景色*/
p:empty{
	background:#ff0000;
}

3.7 :not(selector) 选择器

匹配非指定的元素/选择器

/*为每个并非<p>元素的元素设置背景颜色*/
:not(p){
	background:#ff0000;
}

3.8 :focus选择器

用于选择具有焦点的元素

/*一个输入字段获得焦点时选择的样式*/
input:focus{ 
	background-color:yellow;
}

3.9 :checked 选择器

匹配每个选中的输入元素（仅适用于单选按钮或复选框）

4. 伪对象选择器

• 伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号
• 实际上应该是：

伪类::伪元素 

• 而现在我们为了兼容旧的书写方式，用一个冒号引导伪类也是能被解析的
• 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的状态或属性
• 伪元素表示DOM外部的某种文档结构
• 伪类更多的是定义元素的状态
• 而伪元素则是改变文档结构，在结构外另加一个没有实际存在的元素（伪元素）
• 常用伪元素：
  1. E：before/E：：before
  2. E：after/E：：after

4.1 E：before/E：：before

before 选择器在被选元素的“内容”前面插入内容，用来和content属性一起使用。

4.2 E：after/E：：after

after选择器在被选择元素的“内容”后面插入内容，用来和content属性一起使用
content属性与：：before及：：after伪元素配合使用，来插入生成内容。伪元素还可以添加图片

li::after{
      content: url(images/img1.jpg);
}

5. 属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

选择器	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇元素
[attribute|=value]	用于选取带有指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

/* 为 target="_blank" 的 <a> 元素设置样式 */
a[target=_blank]{ 
	background-color:yellow;
}

6. 选择器优先级

选择器	行内样式	ID选择器	类选择器	元素选择器	全局选择器
权重	1000	100	10	1