Loading... ## CSS 选择器 在 CSS 中,选择器是选取需设置样式的元素的模式。 请使用我们的 CSS 选择器测试工具,它可为您演示不同的选择器。 <table class="dataintable"> <tr> <th style="width: 25%;">选择器</th> <th style="width: 25%;">例子</th> <th>例子描述</th> </tr> <tr> <td><a href="/archives/css_selector_class.html" title="CSS .class 选择器">.<i>class</i></a></td> <td>.intro</td> <td>选择 class="intro" 的所有元素。</td> </tr> <tr> <td>.<i>class1</i>.<i>class2</i></td> <td>.name1.name2</td> <td>选择 class 属性中同时有 name1 和 name2 的所有元素。</td> </tr> <tr> <td>.<i>class1</i> .<i>class2</i></td> <td>.name1 .name2</td> <td>选择作为类名 name1 元素后代的所有类名 name2 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_id.html" title="CSS #id 选择器">#<i>id</i></a></td> <td>#firstname</td> <td>选择 id="firstname" 的元素。</td> </tr> <tr> <td><a href="/archives/css_selector_all.html" title="CSS * 选择器">*</a></td> <td>*</td> <td>选择所有元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element.html" title="CSS element 选择器"><i>element</i></a></td> <td>p</td> <td>选择所有 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element_class.html" title="CSS element.class 选择器"><i>element</i>.<i>class</i></a></td> <td>p.intro</td> <td>选择 class="intro" 的所有 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element_comma.html" title="CSS element,element 选择器"><i>element</i>,<i>element</i></a></td> <td>div, p</td> <td>选择所有 <div> 元素和所有 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element_element.html" title="CSS element element 选择器"><i>element</i> <i>element</i></a></td> <td>div p</td> <td>选择 <div> 元素内的所有 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element_gt.html" title="CSS element>element 选择器"><i>element</i>><i>element</i></a></td> <td>div > p</td> <td>选择父元素是 <div> 的所有 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_element_plus.html" title="CSS element+element 选择器"><i>element</i>+<i>element</i></a></td> <td>div + p</td> <td>选择紧跟 <div> 元素的首个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_gen_sibling.html" title="CSS element1~element2 选择器"><i>element1</i>~<i>element2</i></a></td> <td>p ~ ul</td> <td>选择前面有 <p> 元素的每个 <ul> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attribute.html" title="CSS [attribute] 选择器">[<i>attribute</i>]</a></td> <td>[target]</td> <td>选择带有 target 属性的所有元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attribute_value.html" title="CSS [attribute=value] 选择器">[<i>attribute</i>=<i>value</i>]</a></td> <td>[target=_blank]</td> <td>选择带有 target="_blank" 属性的所有元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attribute_value_contain.html" title="CSS [attribute~=value] 选择器">[<i>attribute</i>~=<i>value</i>]</a></td> <td>[title~=flower]</td> <td>选择 title 属性包含单词 "flower" 的所有元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attribute_value_start.html" title="CSS [attribute|=value] 选择器">[<i>attribute</i>|=<i>value</i>]</a></td> <td>[lang|=en]</td> <td>选择 lang 属性值以 "en" 开头的所有元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attr_begin.html" title="CSS [attribute^=value] 选择器">[<i>attribute</i>^=<i>value</i>]</a></td> <td>a[href^="https"]</td> <td>选择其 src 属性值以 "https" 开头的每个 <a> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attr_end.html" title="CSS [attribute$=value] 选择器">[<i>attribute</i>$=<i>value</i>]</a></td> <td>a[href$=".pdf"]</td> <td>选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_attr_contain.html" title="CSS [attribute*=value] 选择器">[<i>attribute</i>*=<i>value</i>]</a></td> <td>a[href*="w3schools"]</td> <td>选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_active.html" title="CSS :active 选择器">:active</a></td> <td>a:active</td> <td>选择活动链接。</td> </tr> <tr> <td><a href="/archives/css_selector_after.html" title="CSS ::after 选择器">::after</a></td> <td>p::after</td> <td>在每个 <p> 的内容之后插入内容。</td> </tr> <tr> <td><a href="/archives/css_selector_before.html" title="CSS ::before 选择器">::before</a></td> <td>p::before</td> <td>在每个 <p> 的内容之前插入内容。</td> </tr> <tr> <td><a href="/archives/css_selector_checked.html" title="CSS :checked 选择器">:checked</a></td> <td>input:checked</td> <td>选择每个被选中的 <input> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_default.html" title="CSS :default 选择器">:default</a></td> <td>input:default</td> <td>选择默认的 <input> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_disabled.html" title="CSS :disabled 选择器">:disabled</a></td> <td>input:disabled</td> <td>选择每个被禁用的 <input> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_empty.html" title="CSS :empty 选择器">:empty</a></td> <td>p:empty</td> <td>选择没有子元素的每个 <p> 元素(包括文本节点)。</td> </tr> <tr> <td><a href="/archives/css_selector_enabled.html" title="CSS :enabled 选择器">:enabled</a></td> <td>input:enabled</td> <td>选择每个启用的 <input> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_first-child.html" title="CSS :first-child 选择器">:first-child</a></td> <td>p:first-child</td> <td>选择属于父元素的第一个子元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_first-letter.html" title="CSS ::first-letter 选择器">::first-letter</a></td> <td>p::first-letter</td> <td>选择每个 <p> 元素的首字母。</td> </tr> <tr> <td><a href="/archives/css_selector_first-line.html" title="CSS ::first-line 选择器">::first-line</a></td> <td>p::first-line</td> <td>选择每个 <p> 元素的首行。</td> </tr> <tr> <td><a href="/archives/css_selector_first-of-type.html" title="CSS :first-of-type 选择器">:first-of-type</a></td> <td>p:first-of-type</td> <td>选择属于其父元素的首个 <p> 元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_focus.html" title="CSS :focus 选择器">:focus</a></td> <td>input:focus</td> <td>选择获得焦点的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_fullscreen.html" title="CSS :fullscreen 选择器">:fullscreen</a></td> <td>:fullscreen</td> <td>选择处于全屏模式的元素。</td> </tr> <tr> <td><a href="/archives/css_selector_hover.html" title="CSS :hover 选择器">:hover</a></td> <td>a:hover</td> <td>选择鼠标指针位于其上的链接。</td> </tr> <tr> <td><a href="/archives/css_selector_in-range.html" title="CSS :in-range 选择器">:in-range</a></td> <td>input:in-range</td> <td>选择其值在指定范围内的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_indeterminate.html" title="CSS :indeterminate 选择器">:indeterminate</a></td> <td>input:indeterminate</td> <td>选择处于不确定状态的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_invalid.html" title="CSS :invalid 选择器">:invalid</a></td> <td>input:invalid</td> <td>选择具有无效值的所有 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_lang.html" title="CSS :lang(language) 选择器">:lang(<i>language</i>)</a></td> <td>p:lang(it)</td> <td>选择 lang 属性等于 "it"(意大利)的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_last-child.html" title="CSS :last-child 选择器">:last-child</a></td> <td>p:last-child</td> <td>选择属于其父元素最后一个子元素每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_last-of-type.html" title="CSS :last-of-type 选择器">:last-of-type</a></td> <td>p:last-of-type</td> <td>选择属于其父元素的最后 <p> 元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_link.html" title="CSS :link 选择器">:link</a></td> <td>a:link</td> <td>选择所有未访问过的链接。</td> </tr> <tr> <td><a href="/archives/css_selector_not.html" title="CSS :not(selector) 选择器">:not(<i>selector</i>)</a></td> <td>:not(p)</td> <td>选择非 <p> 元素的每个元素。</td> </tr> <tr> <td><a href="/archives/css_selector_nth-child.html" title="CSS :nth-child(n) 选择器">:nth-child(<i>n</i>)</a></td> <td>p:nth-child(2)</td> <td>选择属于其父元素的第二个子元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_nth-last-child.html" title="CSS :nth-last-child(n) 选择器">:nth-last-child(<i>n</i>)</a></td> <td>p:nth-last-child(2)</td> <td>同上,从最后一个子元素开始计数。</td> </tr> <tr> <td><a href="/archives/css_selector_nth-of-type.html" title="CSS :nth-of-type(n) 选择器">:nth-of-type(<i>n</i>)</a></td> <td>p:nth-of-type(2)</td> <td>选择属于其父元素第二个 <p> 元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_nth-last-of-type.html" title="CSS :nth-last-of-type(n) 选择器">:nth-last-of-type(<i>n</i>)</a></td> <td>p:nth-last-of-type(2)</td> <td>同上,但是从最后一个子元素开始计数。</td> </tr> <tr> <td><a href="/archives/css_selector_only-of-type.html" title="CSS :only-of-type 选择器">:only-of-type</a></td> <td>p:only-of-type</td> <td>选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_only-child.html" title="CSS :only-child 选择器">:only-child</a></td> <td>p:only-child</td> <td>选择属于其父元素的唯一子元素的每个 <p> 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_optional.html" title="CSS :optional 选择器">:optional</a></td> <td>input:optional</td> <td>选择不带 "required" 属性的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_out-of-range.html" title="CSS :out-of-range 选择器">:out-of-range</a></td> <td>input:out-of-range</td> <td>选择值超出指定范围的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_placeholder.html" title="CSS ::placeholder 选择器">::placeholder</a></td> <td>input::placeholder</td> <td>选择已规定 "placeholder" 属性的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_read-only.html" title="CSS :read-only 选择器">:read-only</a></td> <td>input:read-only</td> <td>选择已规定 "readonly" 属性的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_read-write.html" title="CSS :read-write 选择器">:read-write</a></td> <td>input:read-write</td> <td>选择未规定 "readonly" 属性的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_required.html" title="CSS :required 选择器">:required</a></td> <td>input:required</td> <td>选择已规定 "required" 属性的 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_root.html" title="CSS :root 选择器">:root</a></td> <td>:root</td> <td>选择文档的根元素。</td> </tr> <tr> <td><a href="/archives/css_selector_selection.html" title="CSS ::selection 选择器">::selection</a></td> <td>::selection</td> <td>选择用户已选取的元素部分。</td> </tr> <tr> <td><a href="/archives/css_selector_target.html" title="CSS :target 选择器">:target</a></td> <td>#news:target</td> <td>选择当前活动的 #news 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_valid.html" title="CSS :valid 选择器">:valid</a></td> <td>input:valid</td> <td>选择带有有效值的所有 input 元素。</td> </tr> <tr> <td><a href="/archives/css_selector_visited.html" title="CSS :visited 选择器">:visited</a></td> <td>a:visited</td> <td>选择所有已访问的链接。</td> </tr> </table> 最后修改:2021 年 06 月 11 日 © 允许规范转载 打赏 赞赏作者 微信 赞 0 如果觉得我的文章对你有用,请随意赞赏
此处评论已关闭