摘要:伪类选择器匹配在文档树中前面有个兄弟元素的元素,此时大于或等于,并且该元素具有父元素。简而言之,该选择器匹配多个位置满足的子元素。
伪类选择器 :nth-child & :nth-of-type
nth-child(an+b)匹配在文档树中前面有an+b-1个 兄弟元素 的元素,此时n大于或等于0,并且该元素具有父元素。简而言之,该选择器匹配多个位置满足an+b的子元素。
:nth-of-type(an+b) 匹配在文档树中第an+b个元素,该元素前面有an+b-1个 相同标签名的兄弟元素 ,此时n大于或等于0,并且该元素具有父元素。
//css p:nth-child(2){ color:red; } div:nth-of-type(2){ color:red; } //html:empty//result:只有 div2 是红色p1
div1p2
div2
:empty 伪类 代表没有子元素的元素。 这里说的子元素,只计算元素结点及文本(包括空格),注释、运行指令不考虑在内。
:target:target 代表一个特殊的元素,它的id是URI的片段标识符
//html:enabledaba b //css :target { color:red; } //result:点击链接,应用样式于锚对应id的元素
:enabled 表示任何启用的(enabled)元素。如果一个元素 能够被激活 (如选择、点击或接受文本输入)或获取焦点,则该元素是启用的。元素还有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。
基于关系的选择器选择器 | 选择的元素 |
---|---|
A E | 元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推) |
A > E | 元素A的任一子元素E(也就是直系后代) |
E:first-child | 任一是其父母结点的第一个子节点的元素E |
B + E | 元素B的任一下一个兄弟元素E |
B ~ E | B元素后面的拥有共同父元素的兄弟元素E |
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/116570.html
摘要:最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方,哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候,关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识...
摘要:最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方,哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候,关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识...
摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...
摘要:不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换,减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话,他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CS...
阅读 2248·2021-09-27 13:35
阅读 519·2019-08-30 15:55
阅读 781·2019-08-30 15:53
阅读 524·2019-08-30 15:52
阅读 2110·2019-08-30 12:59
阅读 2201·2019-08-29 16:42
阅读 1328·2019-08-26 18:26
阅读 2439·2019-08-26 13:48