CSS常见选择器类型

发表于 更新于 分类于 阅读次数： Disqus：

CSS选择器是我们操作CSS元素的重要方式，它帮我们快速定位到我们想要修改样式的内容上。

选择器类型

通配选择器 Universal selector：*

通配选择器匹配所有的元素。它通常被用来重置浏览器的默认样式。

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

通配选择器可以单独使用，也可以用来匹配某一个元素下的所有子元素：

1
2
3
#container # {
  border: 1px solid black;
}

标签/元素选择器 Type selector

通过node节点名称匹配元素。

1
2
3
a {
  color: red;
}

类选择器 Class selector

选择class属性为给定值的元素

1
2
3
.div {
  color: red;
}

可以结合元素选择器一起使用：

1
2
3
div.left {
  float: left;
}

ID选择器

选择id属性为特定值的元素。通常文档中的ID是独一无二的，因此ID选择器应该只能选择到一个元素。

1
2
3
#test {
  color: red;
}

ID选择器同样可以结合元素选择器一起使用：

1
2
3
div#test {
  color: red;
}

image-20180910115423574

属性选择器

1. 简单属性选择器

包含有某个属性的元素，不限定属性的值

1
2
3
4
5
6
a[title] {
  color: red;
}
img[alt] {
  border: 1px solid black;
}

2. 具体属性选择器

包含某个属性，且属性值与指定值一致的元素。

1
2
3
4
5
6
a[href="https://www.google.com"] {
  color: red;
}
div[id="box"] {
  width: 300px;
}

3. 部分属性选择器

[attr~=value]

包含属性attr，且属性值包含数个用空格隔开的值，value是其中一个值的元素

1
2
3
4
/* lang属性包含en-us的div元素 */
div[lang~="en-us"] {  
  color: blue;
}
[attr|=value]

包含属性attr，且属性值是value或以value开头，紧接-的元素

1
2
3
4
/* 匹配中文语音，无论是简体中文zh-CN还是繁体中文zh-TW */
div[lang|="zh"] {
  color: red;
}
[attr^=value]

包含属性attr，且属性值以value为前缀的元素

1
2
3
4
/* 匹配内链元素 */
a[href^="#"] {
  background-color: gold;
}
[attr$=value]

包含属性attr，且属性值以value为后缀的元素

1
2
3
4
/* 匹配以'.org'结尾的链接 */
a[href$=".org"] {
  color: red;
}
[attr*=value]

包含属性attr，且属性值包含value的元素

1
2
3
4
/* 链接中有"insensitive",且不论大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

image-20180910115630790

组合选择器

群组选择器 A, B

用逗号隔开，同时选中A和B两个元素

1
2
3
.div1, .div2 {
  width: 200px;
}

后代选择器

A B

用空格隔开，B是A的后代元素

1
2
3
div p {
  color: blue;
}
A>B

B是A的子元素

1
2
3
ul>li {
  list-style-type: none;
}
A || B

B元素是A的子元素，且A元素是表格中的列。

1
2
3
col.selected || td {
  background: gray;
}

兄弟选择器

A + B 相邻兄弟选择器
1
2
3
h2 + p {
  color: red;
}

A ~ B 通用兄弟选择器

1
2
3
p ~ span {
  color: red;
}

伪类选择器

静态伪类（只用于超链接）

没有被访问的包含href属性的元素，如<a>,<area>,<link>.

1
2
3
a:link {
  color: red;
}
:visited

访问过的链接

1
2
3
a:visited {
  color: green;
}

动态伪类（可用于任何元素）

:focus

获得焦点的元素，通常由用户点击或”tab”跳转到该元素触发。

1
2
3
input:focus {
  color: red;
}
:hover

鼠标悬停的元素

1
2
3
a:hover {
  color: orange;
}
:active

被激活的元素，当鼠标正在点击

1
2
3
a:active {
  color: red;
}

UI元素伪类

:enabled

状态为可用的元素

1
2
3
input:enabled {
   color: blue;
}
:disabled

状态为不可用的元素

1
2
3
input:disabled {
  background: #ccc;
}
:checked

radio,checkbox,option被选中的元素

1
2
3
4
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

结构伪类

first-child / last-child

一组兄弟元素中的第一个或最后一个元素

1
2
3
p:first-child {
  color: lime
}

最初定义时，所选元素必须有一个父元素，从选择器Level 4开始，父元素不是必须了。

:root

根元素，即<html>元素

1
2
3
:root {
  background: yellow;
}
nth-child(n) / nth-last-child(n)

一组兄弟元素中的第n个或倒数第n个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 每组兄弟元素中每隔4个元素 */
:nth-child(4n) {
  color: lime;
}

/* 每组兄弟元素中第5个元素 */
:nth-child(5) {
  color: lime;
}

:nth-child(3n+4) {
  color: lime;
}
nth-of-type(n) / nth-last-of-type(n)

一组兄弟元素中的第n个或倒数第n个符合特定类型的元素

1
2
3
p:nth-of-type(4n) {
  color: lime;
}
first-of-type / last-of-type

符合类型的第一个或最后一个兄弟元素

1
2
3
4
/* 所有兄弟节点中排列第一个的p元素 */
p:first-of-type {
  color: red;
}
only-child

父元素只包含一个同类型的元素

1
2
3
4
/* 父元素只要一个子元素p的p元素 */
p:only-child {
  background-color: lime;
}
:empty

没有子元素的元素

1
2
3
div:empty {
  background: lime;
}

image-20180910143713490

伪元素选择器

::first-letter

第一个字母

1
2
3
p::first-letter {
  font-size: 130%;
}

#####::first-line

元素的第一行

1
2
3
4
p::first-line {
  color: blue;
  text-transform: uppercase;
}
:before / :after

在元素的开始/末尾插入内容（默认这个伪元素是行内元素，继承元素可继承的属性）

1
2
3
4
5
6
a::before {
  content: "Hello";
}
a::after {
  content: "=>";
}
::selection

被用户鼠标选中部分

1
2
3
::selection {
  background: cyan;
}

image-20180910143643608