CSS选择器

ispring 发布于2019-08-30 15:53 / 812人阅读

摘要：伪类选择器匹配在文档树中前面有个兄弟元素的元素，此时大于或等于，并且该元素具有父元素。简而言之，该选择器匹配多个位置满足的子元素。

伪类选择器 ：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

    p1
    div1
    p2
    div2


//result:只有 div2 是红色

:empty

:empty 伪类代表没有子元素的元素。这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。

:target

:target 代表一个特殊的元素，它的id是URI的片段标识符

//html
a
b
a
b

//css
:target { color:red; }

//result:点击链接，应用样式于锚对应id的元素

:enabled

: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

GPU云服务器云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116570.html

WEB前端 CSS

摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器标签选择...

darry 2019-04-23 13:34 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

forrest23 2019-08-02 16:16 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

hyuan 2019-08-30 10:50 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

XGBCCC 2019-08-01 18:42 评论0 收藏0