美文网首页饥人谷技术博客
CSS选择器常见的有哪几种?

CSS选择器常见的有哪几种?

作者: 晓风残月1994 | 来源:发表于2017-07-30 21:59 被阅读505次

    CSS选择器常见的有哪几种?

    一、简单选择器 Simple Selectors

    选择器 含义
    * 通用元素选择器,匹配任何元素
    E 标签选择器,匹配所有使用E标签的元素
    .info class选择器,匹配所有class属性中包含info的元素
    #footer id选择器,匹配所有id属性等于footer的元素

    二、属性选择器 Attribute Selectors

    选择器 含义
    [atrr] 选择包含 attr 属性的所有元素,不论 attr 的值为何
    [attr=val] [attr=val] 仅选择 attr 属性被赋值为 val 的所有元素

    三、组合选择器 Combinators

    选择器 含义
    A, B 选中匹配 A 或/和 B 的元素
    A B 选中匹配 B 且为匹配 A 的元素的后代元素(A B之间空格分开)
    A > B 选中匹配 B 且为匹配 A 的元素的直接子元素
    A + B 选中匹配 B 且为匹配 A 的元素的下一相邻元素
    A ~ B 选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素

    四、伪类 Pseudo-classes

    选择器 含义
    a:link 匹配所有未被点击的链接
    a:visited 匹配所有已被点击的链接
    a:hover 匹配鼠标悬停其上的a元素
    a:active 匹配鼠标已经其上按下、还没有释放的a元素
    li:first-child 匹配父元素的第一个子元素li
    li:last-child 匹配父元素的最后一个子元素li
    li:nth-child(n) 匹配父元素的第n个子元素li(odd奇数,even偶数)

    五、伪元素 Pseudo-elements

    选择器 含义
    E::before 在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最前面
    E::after 在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最后面
    E::selection 应用于文档中被用户高亮的部分(比如使用鼠标选中的部分)
    E::first-letter 匹配E元素的第一个字母第一行的第一个字母
    E::first-line 匹配E元素的第一行

    六、多重选择器 Multiple Selectors

    在HTML中,我们有时会对同一个标签赋予多个class名称,如:

    <div class="one two"></div>
    

    而在CSS里面则可能同时选择多个class,像是:

    .one .two{}    /*两个 class 中有空格*/
    .one.two{}     /*两个 class 中沒有空格*/
    .one, .two{}   /*两个 class 中出现逗号*/
    

    这三者 one.two{ }.one .two{ },或者是.one, .two{ }有何区别?

    • 第一个的 one 和 two 中间包含空格,意思是指,我必须要是在 one 裡面的 two,才会被选择到。
    • 第二个的 one 和 two 中间没有包含空格,表示某个区块必须同时具有 one 和 two 的 class 时,才能被 CSS 所选择到到。
    • 第三个的 one 和 two 中间包含逗号,意思是指 class 中有 one 或 two,都会被编辑器所选择到。

    简单来说,没空格表示必须同时包含才会被选取;有空格表示后面的 class 被镶嵌在前面的 class 中才会被选取;逗号则表示只要有其中一个 class 就会被选取到 。


    文中参考了如下内容:

    CSS选择器笔记——阮一峰的网络日志
    CSS中的多重选择器——PJCHENder

    相关文章

      网友评论

        本文标题:CSS选择器常见的有哪几种?

        本文链接:https://www.haomeiwen.com/subject/hdgklxtx.html