css 选择器

一、通配选择器 *

选定所有对象。

通常用于清除浏览器的默认样式

语法

* {
  margin: 0;
  padding: 0;
}

二、元素选择器 element

以文档语言对象类型作为选择符。即html中的标签

语法

h1 {
  font-size: 20px;
}
p {
  font-size: 13px;
}

三、 id 选择器 #id

以唯一标识符 id 属性等于 myid 的 E 对象作为选择符。

语法

<style>
  #box {
    background: #cccccc;
  }
</style>

<div id="box">id选择器</div>

四、类选择器 .class

以 class 属性包含 myclass 的 E 对象作为选择符。

不同于id 选择符的唯一性，类选择符可以同时定义多个,并控制多个元素的样式

语法

<style>
  .box {
    background: #cccccc;
  }
</style>

<div class="box">class选择器1</div>
<div class="box">class选择器2</div>
<div class="box">class选择器3</div>

三、群组选择器 a,b

群组选择器(selector1,selectorN)是将具有相同样式的元素分组在一起，每个选择器之间用逗号(,)隔开。

语法

h1,
h2,
h3,
p {
  font-size: 14px;
}

四、关系选择器

选择器	类型	功能描述
E F	包含选择器	选择所有被 E 元素包含的元素 F
E > F	子选择器	选择所有作为 E 元素的子元素 F
E ~ F	兄弟选择器	选择 E 元素之后的所有兄弟元素 F
E + F	相邻选择器	选择紧贴在 E 元素之后兄弟元素 F

1. 后代选择器 E F{}

后代选择器(E F)是选择 E 元素的所有后代 F 元素，不管 F 元素是 E 元素的子元素、孙元素或者更深层的关系，都会被选中。

语法

.baba .son {
  border: 1px solid #000;
  background-color: green;
}

2. 子代选择器 E>F{}

子选择器(E>F)是选择 E 元素的所有子后代 F 元素，注意 F 元素仅仅是 E 元素的子元素而已。

语法

.baba > .son {
  background-color: yellow;
}

3. 兄弟选择器 E~F{}

兄弟选择器(E~F)是 CSS3 新增选择器，代表 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面，但是不用相邻。

例子

语法

.baba ~ .shushu {
  width: 400px;
  height: 200px;
  background-color: green;
  color: #fff;
}

4. 相邻选择器 E+F{}

相邻选择器(E+F)是 E 和 F 具有同一个父元素，并且 F 元素在 E 元素后面且相邻。

语法

.baba + .uncle {
  border: 2px solid #000;
  background-color: pink;
}

五、伪类选择器

1.常用伪类选择器

选择符	描述	版本
E:link	设置超链接 a 在未被访问前的样式。	CSS1
E:visited	设置超链接 a 在其链接地址已被访问过时的样式。	CSS1
E:hover	设置元素在其鼠标悬停时的样式。	CSS1/2
E:active	设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。	CSS1/2
E:focus	设置元素在成为输入焦点(该元素的 onfocus 事件发生)时的样式。	CSS1/2
E:lang(fr)	匹配使用特殊语言的 E 元素。很少用	CSS2
E:not(s)	匹配不含有 s 选择符的元素 E。	CSS3
E:root 匹配 E	元素在文档的根元素。常指 html 元素	CSS3
E:first-child	匹配父元素的第一个子元素 E。	CSS2
E:last-child	匹配父元素的最后一个子元素 E。	CSS3
E:only-child	匹配父元素仅有的一个子元素 E。	CSS3
E:nth-child(n)	匹配父元素的第 n 个子元素 E。	CSS3
E:nth-last-child(n)	匹配父元素的倒数第 n 个子元素 E。	CSS3
E:first-of-type	匹配同类型中的第一个同级兄弟元素 E。	CSS3
E:last-of-type	匹配同类型中的最后一个同级兄弟元素 E。	CSS3
E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素 E。	CSS3
E:nth-of-type(n)	匹配同类型中的第 n 个同级兄弟元素 E。	CSS3
E:nth-last-of-type(n)	匹配同类型中的倒数第 n 个同级兄弟元素 E。	CSS3
E:empty	匹配没有任何子元素（包括 text 节点）的元素 E。	CSS3
E:checked	匹配用户界面上处于选中状态的元素 E。(用于 input type 为 radio 与 checkbox 时)	CSS3
E:enabled	匹配用户界面上处于可用状态的元素 E。	CSS3
E:disabled	匹配用户界面上处于禁用状态的元素 E。	CSS3
E:target	匹配相关 URL 指向的 E 元素。	CSS3

2. 动态伪类选择器

选择器	类型	功能描述
E:link	链接伪类选择器	E 元素被定义超链接并未被访问过
E:visited	链接伪类选择器	E 元素被定义超链接并已被访问过
E:active	用户行为伪类选择器	E 元素被激活，常用于锚点和按钮
E:hover	用户行为伪类选择器	鼠标停留在 E 元素
E:focus	用户行为伪类选择器	E 元素获取焦点

3. 链接伪类选择器

简介

根据具有链接属性的 E 元素的被访问情况进行匹配。

例子

index.html

<a href="http://www.bluej.cn">广州蓝景</a>

index.css

a:link {
  color: #ff000;
}

a:link {
  color: #00ffff;
}

4. 用户行为伪类选择器

简介

根据用户对于 E 元素的操作来进行匹配。

例子

index.html

<a href="http://www.bluej.cn">广州蓝景</a> <input name="" />

index.css

*:hover {
  color: #ff0000;
}

*:active {
  color: #00ff00;
}

*:focus {
  color: #0000ff;
}

六、伪对象选择器

选择器	功能描述
E::first-letter	E 元素的第一个字
E::first-line	E 元素的第一行字
E::before	E 元素的第一个子伪元素
E::after	E 元素的最后一个子伪元素
E::selection	E 元素选中目标
E::placeholder	E 元素文字占位符

七、属性选择器

选择符	描述	出现版本
E[att]	选择具有 att 属性的所有元素	CSS2
E[att=val]	选择具有 att 属性且属性值等于 val 的所有元素	CSS2
E[att\|=val]	选择具有 att 属性且属性值为以 val 开头并用连接符"-"分隔的字符串的所有元素	CSS2
E[att~="val"]	选择具有 att 属性且属性值为包含 val 单词的所有元素	CSS2
E[att*="val"]	选择具有 att 属性且属性值为包含 val 字符串的所有元素	CSS3
E[att^="val"]	选择具有 att 属性且属性值为以 val 开头的字符串的所有元素	CSS3
E[att$="val"]	选择具有 att 属性且属性值为以 val 结尾的字符串的所有元素	CSS3

# css 选择器

# 一、 通配选择器 *

# 二、 元素选择器 element

# 三、 id 选择器 #id

# 四、 类选择器 .class

# 三、 群组选择器 a,b

# 四、 关系选择器

# 1. 后代选择器 E F{}

# 2. 子代选择器 E>F{}

# 3. 兄弟选择器 E~F{}

# 4. 相邻选择器 E+F{}

# 五、 伪类选择器

# 1.常用伪类选择器

# 2. 动态伪类选择器

# 3. 链接伪类选择器

# 4. 用户行为伪类选择器

# 六、 伪对象选择器

# 七、 属性选择器