zoukankan      html  css  js  c++  java
  • CSS系列:CSS3新增选择器

    1. CSS1定义的选择器

    选择器类型说明
    E 类型选择器 选择指定类型的元素
    E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略。
    E.class 类选择器 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略。
    E F 包含选择器 选择匹配F的元素,且该元素被包含在匹配E的元素内。
    E:link 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并未被访问。例:a:link
    E:visited 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并已被访问。例:a:visited
    E:active 用户操作伪类选择器 选择匹配E的元素,且匹配元素被激活
    E:hover 用户操作伪类选择器 选择匹配E的元素,且匹配元素正被鼠标经过
    E:focus 用户操作伪类选择器 选择匹配E的元素,且匹配元素获取了焦点
    E::first-line 伪元素选择器 选择匹配E元素内的第一行文本
    E::first-letter 伪元素选择器 选择匹配E元素内的第一个字符

    2. CSS2定义的选择器

    选择器类型说明
    * 通配选择器 选择文档中所有元素
    E[foo] 属性选择器 选择匹配E的元素,且该元素定义了foo属性。E选择符可以省略,表示选择定义了foo属性的任意类型的元素。
    E[foo="bar"] 属性选择器 选择匹配E的元素,且该元素foo属性值为“bar”
    E[foo~="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个以空格符分隔的列表,其中一个列表的值为“bar”,E选择符可以省略。
    E[foo!="en"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值是一个用连字符(-)分隔的列表,值以“en”开头。
    E:first-child 结构伪类选择器 选择匹配E的元素,且该元素为父元素的第一个子元素
    E::before 伪元素选择器 在匹配E的元素前面插入内容
    E::after 伪元素选择器 在匹配E的元素后面插入内容
    E > F 子包含选择器 选择匹配F的元素,且该元素为所匹配E元素的子元素。
    E + F 相邻兄弟选择器 选择匹配F的元素,且该元素为所匹配E元素后面相邻的位置。

    3. CSS3新增属性选择器

    选择器类型说明
    E[foo^="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”开始。E选择符可以省略,表示可匹配任意类型的元素。
    E[foo$="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值以“bar”结束。E选择符可以省略,表示可匹配任意类型的元素。
    E[foo*="bar"] 属性选择器 选择匹配E的元素,且该元素定义了foo属性,foo属性值包含“bar”。E选择符可以省略,表示可匹配任意类型的元素。

      示例

    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <style type="text/css">
            body {
                font-size: 12px;
            }
    
            ul, li {
                list-style: none;
            }
    
            li {
                height: 22px;
                line-height: 22px;
            }
    
            a {
                text-decoration: none;
                color: #E47911;
            }
    
                a[href$="docx"] {
                    background: url(/Content/icon/word.png) no-repeat;
                    padding-left: 20px;
                }
    
                a[href$="xlsx"] {
                    background: url(/Content/icon/excel.png) no-repeat;
                    padding-left: 20px;
                }
    
                a[href$="pptx"] {
                    background: url(/Content/icon/powerpoint.png) no-repeat;
                    padding-left: 20px;
                }
    
                a[href$="pst"] {
                    background: url(/Content/icon/outlook.png) no-repeat;
                    padding-left: 20px;
                }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="Word文件.docx">Word文件</a></li>
            <li><a href="Excel文件.xlsx">Excel文件</a></li>
            <li><a href="PPT文件.pptx">PPT文件</a></li>
            <li><a href="Outlook文件.pst">Outlook文件</a></li>
        </ul>
    </body>
    </html>

      效果

    4. 结构伪类选择器

      结构伪类利用DOM实现元素过滤,通过DOM的相互关系来匹配特定的元素,减少文档内对class属性和ID属性的定义,使得文档更加简洁。

    选择器说明
    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的元素,且该元素不包含子节点。

      示例

    <style type="text/css">
        table {
            table-layout: fixed;
            border-collapse: collapse;
            empty-cells: show;
        }
    
        tr:nth-child(even) {
            background-color: #f5f5f5;
        }
    </style>

      设置圆角

    .content {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    5. UI状态伪类选择器

    选择器说明
    E:enabled 选择匹配E的所有可用UI元素。
    E:disabled 选择匹配E的所有不可用UI元素。
    E:checked 选择匹配E的所有可用UI元素。
    例:input:checked匹配input type为radio及checkbox元素

    6. CSS3其他选择器

    选择器说明
    E~F 通用兄弟元素选择器类型。
    选择匹配F的所有元素,且匹配元素位于匹配E的元素后面。
    在DOM结构树中,E和F所匹配的元素应该在同一级结构上。
    E:not(s) 否定伪类选择器类型。
    选择匹配E的所有元素,且过滤掉匹配s选择符的任意元素。
    s是一个简单结构的选择器,不能使用符合选择器,
    E:target 目标伪类选择器类型。
    选择匹配E的所有元素,且匹配元素被相关URL指向。
    注意:该选择器是动态选择器,只有存在URL指向该匹配元素时,样式才起效果。
    例:demo.html#id
  • 相关阅读:
    nowcoderD Xieldy And His Password
    Codeforces681D Gifts by the List
    nowcoder80D applese的生日
    Codeforces961E Tufurama
    Codeforces957 Mahmoud and Ehab and yet another xor task
    nowcoder82E 无向图中的最短距离
    nowcoder82B 区间的连续段
    Codeforces903E Swapping Characters
    Codeforces614C Peter and Snow Blower
    Codeforces614D Skills
  • 原文地址:https://www.cnblogs.com/libingql/p/4375354.html
Copyright © 2011-2022 走看看