刘龙韬的博客-文章：CSS选择器

CSS选择器

日期: 2019/08/25
作者: longtao
分类: HTML
阅读: 467

## 基本的选择器
### 后代选择器
后代选择器用于选取某元素的后代元素。以空格作为分隔
选择`<div>`后的`<P>`元素
```
div p
{
  background-color:yellow;
}
```

### 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

以`>`作为连接符号,
选择div下的直接子元素p元素为例：
```
div>p
{
  background-color:yellow;
}
```

### 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以符号`+`为连接点，选择div后面相邻的p元素
```
div+p
{
  background-color:yellow;
}
```

### 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以符号`~`为连接点，选择div后的所有相邻兄弟p元素
```
div~p
{
  background-color:yellow;
}
```

## CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果。

### anchor伪类
```
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
```
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。

选择器 | 示例|示例说明
---|--- |---
`:checked` | 	input:checked | 选择所有选中的表单元素
:disabled | 	input:disabled | 	选择所有禁用的表单元素
:empty | 	p:empty	 | 选择所有没有子元素的p元素
:enabled | 	input:enabled | 	选择所有启用的表单元素
:first-of-type | 	p:first-of-type | 	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range | 	input:in-range | 	选择元素指定范围内的值
:invalid | 	input:invalid | 	选择所有无效的元素
:last-child	 | p:last-child | 	选择所有p元素的最后一个子元素
:last-of-type | 	p:last-of-type | 	选择每个p元素是其母元素的最后一个p元素
:not(selector) | 	:not(p)	 | 选择所有p以外的元素
:nth-child(n) | 	p:nth-child(2) | 	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	 | p:nth-last-child(2) | 	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) | 	p:nth-last-of-type(2) | 	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	 | p:nth-of-type(2) | 	选择所有p元素第二个为p的子元素
:only-of-type	 | p:only-of-type | 	选择所有仅有一个子元素为p的元素
:only-child	 | p:only-child | 	选择所有仅有一个子元素的p元素
:optional | 	input:optional | 	选择没有"required"的元素属性
:out-of-range | 	input:out-of-range | 	选择指定范围以外的值的元素属性
:read-only	 | input:read-only | 	选择只读属性的元素属性
:read-write | 	input:read-write | 	选择没有只读属性的元素属性
:required | 	input:required | 	选择有"required"属性指定的元素属性
:root | 	root | 	选择文档的根元素
:target	 | #news:target | 	选择当前活动#news元素(点击URL包含锚的名字)
:valid | 	input:valid	 | 选择所有有效值的属性
:link | 	a:link | 	选择所有未访问链接
:visited | 	a:visited | 	选择所有访问过的链接
:active | 	a:active | 	选择正在活动链接
:hover | 	a:hover	 | 把鼠标放在链接上的状态
:focus | 	input:focus | 	选择元素输入后具有焦点
:first-letter | 	p:first-letter	 | 选择每个`<p>` 元素的第一个字母
:first-line	 | p:first-line | 	选择每个`<p>` 元素的第一行
:first-child | 	p:first-child | 	选择器匹配属于任意元素的第一个子元素的 `<p>` 元素
:before | 	p:before | 	在每个`<p>`元素之前插入内容
:after | 	p:after	 | 在每个`<p>`元素之后插入内容
:lang(language) | 	p:lang(it) | 	为`<p>`元素的lang属性选择一个开始值

网站名称: 刘龙韬的博客
本文链接: www.liulongtao.com/aritcle/13
版权声明: 未经允许，禁止转载！

相关文章：

上一篇： Python列表的常用操作
下一篇： ajax 的基本知识

提交评论

评论列表

共有0评论

目录

最新文章

分类

标签

本站内容

1. 本站运行时间：

2. 本站使用Django搭建

3. 本站使用阿里云服务器

文章介绍

1. Python学习

2. java学习

3. 前端开发

友链

©copyright 刘龙韬的博客 | 备案：鲁ICP备17024355号-1