CSS笔记——选择器

一. 常用的选择器

1. 通配选择器

• 作用：可以用来选中页面中的所有的元素
• 语法：*{ }

*{
	background-color:skyblue;
}

2. 元素选择器

• 作用：通过元素选择器可以选择页面中的所有指定元素
• 语法：标签名{ }

p{
	background-color:skyblue;
}

3. id选择器

• 作用：通过元素的id属性值选择唯一的一个元素
• 语法：#id属性值{ }

#p1{
	background-color:skyblue;
}

4. 类选择器

• 作用：通过元素的class属性值选中一组元素
• 语法：.class属性值{ }

.p1{
	background-color:skyblue;
}

5. 复合选择器（交集选择器）

• 作用：可以选中同时满足多个选择器的元素
• 语法：选择器1选择器2选择器N{ }

span.p2{
	background-color:skyblue;
}

6. 选择器分组(并集选择器）

• 作用：通过选择器分组可以同时选中多个选择器对应的元素
• 语法：选择器1，选择器2，选择器N{ }

#p1,.p2,h1{
	background-color:skyblue;
}

二. 关系选择器

1. 子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素>子元素{ }

div > span{
	background-color:skyblue;
}

2. 后代元素选择器

• 作用：选中指定元素的指定后代元素
• 语法：祖先元素 后代元素{ }

#p1 span{
	background-color:skyblue;
}

3. 兄弟元素选择器

• 语法：前一个+后一个
• 作用：可以选中一个元素后紧挨着的指定的兄弟元素

span + p{
	background-color:skyblue;
}

• 语法：前一个~后边所有
• 作用：可以选中后边的所有兄弟元素

span ~ p{
	background-color:skyblue;
}

三. 属性选择器

1. 作用：可以根据元素中的属性或属性值来选取指定元素
2. 语法：

• [属性名]：选取含有指定属性的元素

p[title]{
	background-color:skyblue;
}

• [属性名=“属性值”]：选取含有指定属性值的元素

p[title="a"]{
	background-color:skyblue;
}

• [属性名~=“属性值”]：选取属性是用空格分隔的单词列表，其中至少有一个值是value

p[title~="a"]{
	background-color:skyblue;
}

• [属性名|=“属性值”]选取属性值是value或以value-开头的元素

p[title|="a"]{
	background-color:skyblue;
}

• [属性名^=“属性值”]选取属性值以指定内容开头的元素

p[title^="ab"]{
	background-color:skyblue;
}

• [属性名$=“属性值”]选取属性值以指定内容结尾的元素

p[title$="c"]{
	background-color:skyblue;
}

• [属性名*=“属性值”]选取属性值以包含指定内容的元素

p[title*="b"]{
	background-color:skyblue;
}

四. 伪类选择器

1. 链接伪类

• :link表示普通的链接（没访问过的链接）

a:link{
	color:skyblue;
}

• :visited表示访问过的链接

a:visited{
	color:pink;
}

• :target表示一个特殊的元素，它的id是URI的片段标识符

2. 动态伪类

• :hover表示鼠标移入的状态

a:hover{
	color:orange;
}

• :active表示的是被点击的状态

a:hover{
	color:yellow;
}

3. 表单伪类

• :enabled表示可编辑的表单

input:enabled{
	background-color:skyblue;
}

• :disabled表示被禁用的表单

input:disabled{
	background-color:skyblue;
}

• :checked表示被选中的表单

input:checked{
	width:200px;
	height:200px;
	background-color:skyblue;
}

• :focus表示的是获取焦点

input:focus{
	background-color:skyblue;
}

4. 结构性伪类
   (1). nth-child(index)系列

• :first-child表示可以选中第一个子元素

p:first-child{
	background-color:skyblue;
}

• :last-child表示可以选中最后一个子元素

p:last-child{
	background-color:skyblue;
}

• :nth-child表示可以选中任意位置的子元素
  ①该选择器后边可以指定一个参数，指定要选中第几个子元素
  ②n表示第n个位置的子元素，n的范围是0到正无穷
  ③2n或even表示偶数位置的子元素
  ④2n+1或odd表示奇数位置的子元素

p:nth-child(1){
	background-color:skyblue;
}

• :nth-last-child表示可以选中任意位置的子元素（倒序）
• :only-child选中唯一的子元素（相当于:first-child:last-child或:nth-child(1):nth-last-child(1)）
  (2). nth-of-type(index)系列
• :first-of-type
• :last-of-type
• :nth-of-type
• :nth-last-of-type
• :only-of-type
  [注]和:first-child非常的类似，只不过child是在所有的子元素中排列，而type是在当前类型的子元素中排列。

p:first-of-type{
	background-color:skyblue;
}

(3). 否定伪类

• 作用：将符合条件的元素从选择器中去除
• 语法：
  :not(选择器)

p:not(:nth-child(3)){
	background-color:skyblue;
}

五. 伪元素选择器

• ::first-letter表示的是为第一个字符设置一个特殊的样式

p::first-letter{
	background-color:skyblue;
}

• ::first-line表示的是为第一行设置一个特殊的样式

p::first-line{
	background-color:skyblue;
}

• ::selection表示的是选中的内容

p::selection{
	background-color:skyblue;
}

• ::before表示元素最前边的部分

p::before{
	content: "我会出现在整个段落的最前边";
	color:skyblue;
}

• ::after表示元素最后边的部分

p::after{
	content: "我会出现在整个段落的最前边";
	color:skyblue;
}

六. 优先级的规则

选择器	优先级
内联样式	1，0，0，0
id选择器	0，1，0，0
类和伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配选择器	0，0，0，0