master

分支 (2)

管理

管理

master

2020-3-26

h5_css3
/
selector.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px auto;
        }
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
         table.gridtable th {
             border-width: 1px;
             padding: 8px;
             border-style: solid;
             border-color: #666666;
             background-color: #dedede;
         }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<table class="gridtable">
    <tbody><tr>
        <th width="22%" align="left">选择器</th>
        <th width="17%" align="left">示例</th>
        <th width="56%" align="left">示例说明</th>
        <th align="left">CSS</th>
    </tr>
    <tr>
        <td><a href="sel-class.html">.<i>class</i></a></td>
        <td class="notranslate">.intro</td>
        <td>选择所有class="intro"的元素</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-id.html">#<i>id</i></a></td>
        <td class="notranslate">#firstname</td>
        <td>选择所有id="firstname"的元素</td>
        <td>1</td>
    </tr>  <tr>
        <td><a href="sel-all.html">*</a></td>
        <td class="code notranslate">*</td>
        <td>选择所有元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><i><a href="sel-element.html">element</a></i></td>
        <td class="notranslate">p</td>
        <td>选择所有&lt;p&gt;元素</td>
        <td>1</td>
    </tr>
    <tr>
        <td><i><a href="sel-element-comma.html">element,element</a></i></td>
        <td class="notranslate">div,p</td>
        <td>选择所有&lt;div&gt;元素和&lt;p&gt;元素</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-element-element.html"><i>element</i> <i>element</i></a></td>
        <td class="notranslate">div p</td>
        <td>选择&lt;div&gt;元素内的所有&lt;p&gt;元素</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-element-gt.html"><i>element</i>&gt;<i>element</i></a></td>
        <td class="notranslate">div&gt;p</td>
        <td>选择所有父级是 &lt;div&gt; 元素的 &lt;p&gt; 元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-element-pluss.html"><i>element</i>+<i>element</i></a></td>
        <td class="notranslate">div+p</td>
        <td>选择所有紧接着&lt;div&gt;元素之后的&lt;p&gt;元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-attribute.html">[<i>attribute</i>]</a></td>
        <td class="notranslate">[target]</td>
        <td>选择所有带有target属性元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-attribute-value.html">[<i>attribute</i>=<i>value</i>]</a></td>
        <td class="notranslate">[target=-blank]</td>
        <td>选择所有使用target="-blank"的元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-attribute-value-contains.html">[<i>attribute</i>~=<i>value</i>]</a></td>
        <td class="notranslate">[title~=flower]</td>
        <td>选择标题属性包含单词"flower"的所有元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-attribute-value-lang.html">[<i>attribute</i>|=<i>language</i>]</a></td>
        <td>[lang|=en]</td>
        <td>选择 lang 属性以 en 为开头的所有元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-link-visited-active-hover.html">:link</a></td>
        <td class="notranslate">a:link</td>
        <td>选择所有未访问链接</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-link-visited-active-hover.html">:visited</a></td>
        <td class="notranslate">a:visited</td>
        <td>选择所有访问过的链接</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-link-visited-active-hover.html">:active</a></td>
        <td class="notranslate">a:active</td>
        <td>选择活动链接</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-link-visited-active-hover.html">:hover</a></td>
        <td class="notranslate">a:hover</td>
        <td>选择鼠标在链接上面时</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-focus.html">:focus</a></td>
        <td class="notranslate">input:focus</td>
        <td>选择具有焦点的输入元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-firstletter.html">:first-letter</a></td>
        <td class="notranslate">p:first-letter</td>
        <td>选择每一个&lt;p&gt;元素的第一个字母</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-firstline.html">:first-line</a></td>
        <td class="notranslate">p:first-line</td>
        <td>选择每一个&lt;p&gt;元素的第一行</td>
        <td>1</td>
    </tr>
    <tr>
        <td><a href="sel-firstchild.html">:first-child</a></td>
        <td class="notranslate">p:first-child</td>
        <td>指定只有当&lt;p&gt;元素是其父级的第一个子级的样式。</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-before.html">:before</a></td>
        <td class="notranslate">p:before</td>
        <td>在每个&lt;p&gt;元素之前插入内容</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-after.html">:after</a></td>
        <td class="notranslate">p:after</td>
        <td>在每个&lt;p&gt;元素之后插入内容</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-lang.html">:lang(<i>language</i>)</a></td>
        <td class="notranslate">p:lang(it)</td>
        <td>选择一个lang属性的起始值="it"的所有&lt;p&gt;元素</td>
        <td>2</td>
    </tr>
    <tr>
        <td><a href="sel-gen-sibling.html"><i>element1</i>~<i>element2</i></a></td>
        <td>p~ul</td>
        <td>选择p元素之后的每一个ul元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-attr-begin.html">[<i>attribute</i>^=<i>value</i>]</a></td>
        <td>a[src^="https"]</td>
        <td>选择每一个src属性的值以"https"开头的元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-attr-end.html">[<i>attribute</i>$=<i>value</i>]</a></td>
        <td>a[src$=".pdf"]</td>
        <td>选择每一个src属性的值以".pdf"结尾的元素 </td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-attr-contain.html">[<i>attribute</i>*=<i>value</i>]</a></td>
        <td>a[src*="runoob"]</td>
        <td>选择每一个src属性的值包含子字符串"runoob"的元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-first-of-type.html">:first-of-type</a></td>
        <td>p:first-of-type</td>
        <td>选择每个p元素是其父级的第一个p元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-last-of-type.html">:last-of-type</a></td>
        <td>p:last-of-type</td>
        <td>选择每个p元素是其父级的最后一个p元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-only-of-type.html">:only-of-type</a></td>
        <td>p:only-of-type</td>
        <td>选择每个p元素是其父级的唯一p元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-only-child.html">:only-child</a></td>
        <td>p:only-child</td>
        <td>选择每个p元素是其父级的唯一子元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-nth-child.html">:nth-child(<i>n</i>)</a></td>
        <td>p:nth-child(2)</td>
        <td>选择每个p元素是其父级的第二个子元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-nth-last-child.html">:nth-last-child(<i>n</i>)</a></td>
        <td>p:nth-last-child(2)</td>
        <td>选择每个p元素的是其父级的第二个子元素，从最后一个子项计数</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-nth-of-type.html">:nth-of-type(<i>n</i>)</a></td>
        <td>p:nth-of-type(2)</td>
        <td>选择每个p元素是其父级的第二个p元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-nth-last-of-type.html">:nth-last-of-type(<i>n</i>)</a></td>
        <td>p:nth-last-of-type(2)</td>
        <td>选择每个p元素的是其父级的第二个p元素，从最后一个子项计数</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-last-child.html">:last-child</a></td>
        <td>p:last-child</td>
        <td>选择每个p元素是其父级的最后一个子级。</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-root.html">:root</a></td>
        <td>:root</td>
        <td>选择文档的根元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-empty.html">:empty</a></td>
        <td>p:empty</td>
        <td>选择每个没有任何子级的p元素（包括文本节点）</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-target.html">:target</a></td>
        <td>#news:target </td>
        <td>选择当前活动的#news元素（包含该锚名称的点击的URL）</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-enabled.html">:enabled</a></td>
        <td>input:enabled</td>
        <td>选择每一个已启用的输入元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-disabled.html">:disabled</a></td>
        <td>input:disabled</td>
        <td>选择每一个禁用的输入元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-checked.html">:checked</a></td>
        <td>input:checked</td>
        <td>选择每个选中的输入元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-not.html">:not(<i>selector</i>)</a></td>
        <td>:not(p)</td>
        <td>选择每个并非p元素的元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-selection.html">::selection</a></td>
        <td>::selection</td>
        <td>匹配元素中被用户选中或处于高亮状态的部分</td>
        <td>3</td>
    </tr>


    <tr>
        <td><a href="sel-out-of-range.html">:out-of-range</a></td>
        <td>:out-of-range</td>
        <td>匹配值在指定区间之外的input元素</td>
        <td>3</td>
    </tr>

    <tr>
        <td><a href="sel-in-range.html">:in-range</a></td>
        <td>:in-range</td>
        <td>匹配值在指定区间之内的input元素</td>
        <td>3</td>
    </tr>

    <tr>
        <td><a href="sel-read-write.html">:read-write</a></td>
        <td>:read-write</td>
        <td>用于匹配可读及可写的元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-read-only.html">:read-only</a></td>
        <td>:read-only</td>
        <td>用于匹配设置 "readonly"（只读） 属性的元素</td>
        <td>3</td>
    </tr>

    <tr>
        <td><a href="sel-optional.html">:optional</a></td>
        <td>:optional</td>
        <td>用于匹配可选的输入元素</td>
        <td>3</td>
    </tr>

    <tr>
        <td><a href="sel-required.html">:required </a></td>
        <td>:required</td>
        <td>用于匹配设置了 "required" 属性的元素</td>
        <td>3</td>
    </tr>

    <tr>
        <td><a href="sel-valid.html">:valid </a></td>
        <td>:valid</td>
        <td>用于匹配输入值为合法的元素</td>
        <td>3</td>
    </tr>
    <tr>
        <td><a href="sel-invalid.html">:invalid </a></td>
        <td>:invalid</td>
        <td>用于匹配输入值为非法的元素</td>
        <td>3</td>
    </tr>
    </tbody></table>
</body>
</html>