css3 结构性伪类选择器
伪类
| 选择器 | 类型 | 说明 | 备注 |
|---|---|---|---|
| E:first-line | 伪元素选择器 | 选择匹配E元素内的第一行文本 | |
| E:first-letter | 伪元素选择器 | 选择匹配E元素内的第一个字符 | |
| E:before | 伪元素选择器 | 在某个元素之前插入一些内容 | |
| E:after | 伪元素选择器 | 在某个元素之后插入一些内容 | 清除浮动经常用 |
结构选择器
| 选择器 | 说明 | 备注 |
|---|---|---|
| E:root | 选择匹配E所在文档的根元素。在(X)HTML文档中,根元素就是html元素,此时该选择器与html类型选择器匹配的内容相同。 | |
| E:nth-child(n) | 选择所有在其父元素中第n个位置的匹配E的子元素。 | 注意,参数n可以是数字(1、2、3)、关键字(odd、even)、公式(2n、2n+3)参数的索引从1开始。tr:nth-child(3)匹配所有表格中第3排的tr;tr:nth-child(2n+1)匹配所有表格的奇数行;tr:nth-child(2n)匹配所有表格的偶数行;tr:nth-child(odd)匹配所有表格的奇数行;tr:nth-child(even)匹配所有表格的偶数行; |
| E:nth-last-child(n) | 选择所有在其父元素中倒数第n个位置的匹配E的子元素 | |
| E:nth-of-type(n) | 选择父元素中第n个位置,且匹配E的子元素。 | 注意,所有匹配E的子元素被分离出来单独排序。非E的子元素不参与排序。参数n可以是数字,关键字、公式。例:p:nth-of-type(1) |
| E:nth-last-of-type(n) | 选择父元素中倒数第n个位置,且匹配E的子元素。 | |
| E:last-child | 选择位于其父元素中最后一个位置,且匹配E的子元素。 | |
| E:first-of-type | 选择位于其父元素中且匹配E的第一个同类型的子元素。 | 该选择器的功能类似于 E:nth-of-type(1) |
| E:last-of-type | 选择位于其父元素中且匹配E的最后第一个同类型的子元素。 | 该选择器的功能类似于 E:nth-last-of-type(1) |
| E: only-child | 选择其父元素只包含一个子元素,且该子元素匹配E。 | |
| E: only-of-type | 选择其父元素只包含一个同类型的子元素,且该子元素匹配E。 | |
| E:empty | 选择匹配E的元素,且该元素不包含子节点。 |
E:nth-child(n)选择器说明
其他类型选择器
| 选择器 | 说明 | 备注 |
|---|---|---|
| E:enabled | 选择匹配E的所有可用UI元素。 | |
| E:disabled | 选择匹配E的所有不可用UI元素。 | |
| E:checked | 选择匹配E的所有可用UI元素。 | |
| E~F | 通用兄弟元素选择器类型。 | 选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。在DOM结构树中,E和F所匹配的元素应该在同一级结构上。 |
| E:not(s) | 否定伪类选择器类型。 | 选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。s是一个简单结构的选择器,不能使用符合选择器, |
| E:target | 目标伪类选择器类型。 | 选择匹配E的所有元素,且匹配元素被相关URL指向。注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。 |
例:demo.html#id
例:input:checked匹配input type为radio及checkbox元素
css3 结构性伪类选择器的更多相关文章
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3 结构性伪类选择器(2)
CSS3 结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. ...
- CSS3 结构性伪类选择器(1)
1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元 ...
- css3结构性伪类选择器
- h5与c3权威指南笔记--css3结构性伪类选择器root,not,empty,target
root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ ba ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- 【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 【CSS3】---结构性伪类选择器-root+not+empty+target
结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通 ...
随机推荐
- MYSQL无法使用索引的场景
设计优化–无法使用索引的场景 •通过索引扫描的记录数超过30%,变成全表扫描 •联合索引中,第一个索引列使用范围查询--只能用到部分索引 •联合索引中,第一个查询条件不是最左索引列 •模糊查询条件列最 ...
- Jenkins与网站代码上线解决方案
1.1 前言 Jenkins是一个用Java编写的开源的持续集成工具.在与Oracle发生争执后,项目从Hudson项目独立. Jenkins提供了软件开发的持续集成服务.它运行在Servlet容器中 ...
- NYOJ 417 死神来了 鸽巢原理
死神来了 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 有一天,王小子在遨游世界时,遇到了一场自然灾害.一个人孤独的在一个岛上,没有吃的没有喝的.在他饥寒交迫将要死亡时 ...
- Shell中处理方法返回值问题
同步发表:http://blog.hacktons.cn/2017/12/13/shell-func-return/ 背景 通过shell编程,写一些工具批处理的时候,经常需要自定义函数.更复杂点的情 ...
- 小白的Python之路 day1 Python3的bytes/str之别
原文:The bytes/str dichotomy in Python 3 Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示,二 ...
- 从零开始构建docker基础镜像
段子 今年基本已经结束了,我问了很多朋友今年挣钱了没?大多朋友都有挣,而且挣得五花八门:有挣个屁的,有挣个锤子的,有挣个毛的,更有甚者挣个妹的,奢侈之极!最恐怖的是挣个鬼的!有的还可以,挣个球,下午我 ...
- EGOCache缓存框架具体解说
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- 最全Pycharm教程(32)——依据FHS在Linux上安装Pycharm
1.主题 怎样在Linux上安装Pycharm,依据FHS. 2.平台要求 Intel Pentium III/800 MHz或更高. 内存最小512M.建议1G以上 屏幕最小分辨率1024x768 ...
- 趋势科技PC-cillin2015,你来公測我发奖!
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
- Android之——ListView优化
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47209253 作为client.其最基本的任务就是最直观的和用户交互.从serve ...