LT
编程
Echarts
Python
Django
HTML
MySQL
Java
读书
电影
日常闲聊
计划表
搜索
登录
CSS选择器
日期: 2019/08/25
作者:
longtao
分类:
HTML
阅读: 512
## 基本的选择器 ### 后代选择器 后代选择器用于选取某元素的后代元素。以空格作为分隔 选择`<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评论
×
回复留言
回复评论:
评论内容:
昵称:
邮箱:
评论内容:
目录
最新文章
原码、反码与补码的基础内容
剑指offer之找到第一个公共节点
剑指offer之平衡二叉树
Docker 虚拟化技术
剑指offer之打印二叉搜索树中第k小的结点
分类
编程 (11)
读书 (0)
电影 (0)
日常闲聊 (2)
Echarts (2)
Python (5)
杂七杂八 (2)
Django (5)
HTML (2)
MySQL (1)
计划表 (1)
Java (2)
标签
Git (1)
vscode (1)
Echarts (2)
Python (10)
Django (6)
网站测试 (1)
MySQL (2)
HTML (2)
日常计划 (2)
java (2)
Spring Boot (2)
各种派 (1)
研究生的日常 (2)
算法 (5)
Java (5)
计算机基础 (2)
碎碎念 (0)
共有0评论