CSS选择器类型总结

1.通用选择器

一般用于给所有元素做一些通用性的样式设置，比如清除内边距、外边距等。但是效率比较低，尽量不要使用。

* {margin: 0;padding: 0;}

2.元素选择器

也叫做“标签选择器”，用于选中一类标签进行样式设置。

div { color: #ff0000; }span { font-size: 18px; }

3.类选择器

给元素添加class属性，通过

.class属性值

来选中元素。

一个元素可以有多个class值，每个class值之间用空格隔开；
class值如果由多个单词组成，单词之间可以用
```
中划线-
```
、
```
下划线_
```
，也可以使用驼峰标识；
最好不要用标签名作为class值；

.box {width: 100px;height: 100px;background-color: #ff0000;}

<div class="box"></div>

4.id选择器

给元素添加id属性，通过

#id属性值

来选中元素。

一个HTML文档里面的id值是唯一的，不能重复；
id值如果由多个单词组成，单词之间可以用
```
中划线-
```
、
```
下划线_
```
，也可以使用驼峰标识；
最好不要用标签名作为id的值；

#container { color: #ff0000; }

<div id="container"></div>

5.属性选择器

[attr]

：选中拥有attr属性的元素；

/* 选中拥有title属性的元素 */[title]: { color: #ff0000; }

<div title="one">内容</div>

[attr=val]

：选中attr属性值恰好等于val的元素；

/* 选中title值恰好等于one的元素 */[title="one"] { color: #ff0000; }

<div title="one">内容</div>

[attr*=val]

：选中attr属性值包含单词val的元素；

/* title属性值包含单词one的元素 */[title*="one"] { color: #ff0000; }

<div title="one">内容1</div><p title="aaaone">内容2</p><span title="one-two">内容3</span>

[attr^=val]

：选中attr属性值以val开头的元素；

/* title属性值以单词one开头的元素 */[title^="one"] { color: #ff0000; }

<div title="one">内容1</div><span title="one-two">内容2</span><p title="one two">内容3/p>

[attr|=val]

：选中attr属性值恰好等于val或以单词val开头后面紧跟

连字符-

的元素；

/* title属性值恰好等于one或者以单词one开头且后面跟着连字符-的元素 */[title|="one"] { color: #ff0000; }

<div title="one">内容1</div><span title="one-two">内容2</span>

[attr~=val]

：选中attr属性值包含单词val的元素（单词之间必须用空格隔开）；

/* title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开） *//* 效果类似于类选择器 */[title~="one"] { color: #ff0000; }

<div title="one">内容1</div><p title="one two">内容2</p>

[attr$=val]

：选中attr属性值以单词val结尾的元素；

/* title属性值以单词one结尾的元素 */[title$="one"] { color: #ff0000; }

<div title="two-one">内容1</div><p title="two one">内容2</p>

6.后代选择器

选择指定元素下的子元素，包括直接和间接子元素，使用空格进行隔开。

/* 选择div下所有span元素 */div span { color: #ff0000; }

<div><span>文字内容1</span><p><span>文字内容2</span></p></div>

7.子代选择器

选择指定元素下的直接子元素，不包括间接子元素，使用

。

/* 选择div元素下的直接span元素 */div > span { color: #ff0000; }

<div><span>文字内容1</span></div>

8.兄弟选择器

相邻兄弟选择器

：选择某元素后面紧挨的兄弟元素；

/* div元素后面紧挨的p元素 */div + p { color: #ff0000; }

<div></div><p>内容</p>

全兄弟选择器

：选择某元素后面的兄弟元素，不需要紧挨；

/* div元素后面的p元素 */div ~ p { color: #ff0000; }

<div></div><p>内容1</p><p>内容2</p>

9.交集选择器

选择同时符合多个条件的元素。

/* 选择div元素且class为one的 */div.one { color: #ff0000; }/* 选择div元素且class为one且title属性值等于one的 */div.one[title="one"] { color: #ff0000; }

<div class="one" >内容1</div><div class="one" title="one">内容2</div>

10.并集选择器

不同选择条件，中间用

连接，进行全部选中。

/* 所有的div元素 + 所有class值有one的元素 + 所有title属性值等于one的元素 */div, .one, [title="one"] { color: #ff0000; }

<div>内容1</div><span title="one">内容2</span><p class="one">内容3</p>

11.伪类选择器

11.1.动态伪类

```
:link
```
：a:link未访问的链接；
```
:visited
```
：a:visited已访问的链接；
```
:hover
```
：a:hover鼠标移动到链接上；
```
:active
```
：a:active激活的链接（鼠标在链接上长按未松开）；
```
:focus
```
：当前拥有输入焦点的元素（能接收键盘的输入，一般为input）；

注意点：

```
:hover
```
必须放在
```
:link
```
和
```
:visited
```
后面才能完全生效；
```
:active
```
必须放在
```
:hover
```
后面才能完全生效；
建议编写顺序：link、visited、focus、hover、active；
处理a元素，
```
:hover
```
和
```
:active
```
也能用于其他元素；

11.2.目标伪类和语言伪类

目标伪类：
```
:target
```
；
语言伪类：
```
:lang
```
；

11.4.元素状态伪类

```
:enabled
```
：可用的；
```
:disable
```
：禁用的；
```
:checked
```
：选中的；

11.5.结构伪类

```
:nth-child(n)
```
：父元素中的第n个子元素（n代表任意正整数和0，也可用even（偶数）和odd（奇数））；
```
/* 选中所有父元素下的第一个为p的元素 */p:nth-child(1) { color: #ff0000; }
```

:nth-last-child(n)

：与

:nth-child相反

，父元素中倒数第n个子元素；

/* 选中父元素下倒数第一个为p的元素 */p:nth-last-child(1) { color: #ff0000; }/* 选中最后两个为p的元素 */p:nth-last-child(-n + 2)  { color: #ff0000; }

nth-of-type(n)

：计数时只计算同种类型的元素；

/* 选中父元素下所有p元素中的第二个p元素 */p:nth-of-type(2) { color: #ff0000; }

:nth-last-of-type(n)

：从后往前计算同种类型的元素；

/* 选中父元素下所有p元素中倒数第二个p元素 */p:nth-last-of-type(2) { color: #ff0000; }

```
:first-child
```
：等同于
```
:nth-child(1)
```
；
```
:last-child
```
：等同于
```
:nth-last-child(1)
```
；
```
:first-of-type
```
：等同于
```
:nth-of-type(1)
```
；
```
:last-of-type
```
：等同于
```
:nth-last-of-type(1)
```
；
```
:only-child
```
：是父元素中唯一的子元素；
```
:only-of-type
```
：是父元素中唯一的指定类型的元素；
```
:empty
```
：里面完全空白的元素，不包含子元素和内容；
```
:root
```
：根元素，就是html元素；

11.6.否定伪类

:not()

的格式是：

not(x)

表示除x以外的元素（x表示简单的选择器，可以是元素、通用、属性、类、id、伪类（除否定伪类）选择器等）。

/* 选中父元素下所有p元素不是第一个和最后一个的p元素 */p:not(:first-of-type):not(:last-of-type) { color: #ff0000; }

注意：

:not()

只支持简单选择器，不支持组合选择器，比如交集和并集选择器等。

CSS选择器类型总结