Selector | Example | 描述 | https://www.w3schools.com/cssref/css_selectors.asp | CSSv | wiki | w3s | jquery |
::after | p::after | 在每个<p>元素的内容之后插入一些内容 | Insert something after the content of each <p> element | 2 | w20 | s21 | |
::before | p::before | 在每个<p>元素的内容之前插入内容 | Insert something before the content of each <p> element | 2 | w19 | s22 | |
::first-letter | p::first-letter | 选择每个<p>元素的首字母 | Selects the first letter of every <p> element | 1 | w05 | s29 | |
::first-line | p::first-line | 选择每个<p>元素的第一行 | Selects the first line of every <p> element | 1 | w04 | s30 | |
::placeholder | input::placeholder | 选择指定了"占位符"属性的输入元素 | Selects input elements with the "placeholder" attribute specified | | | s50 | |
::selection | ::selection | 选择用户选择的元素部分 | Selects the portion of an element that is selected by a user | | | s55 | |
:active | a:active | 选择活动链接 | Selects the active link | 1 | w03 | s20 | |
:animated | | 选择器运行时,选择动画进行中的所有元素。 | Select all elements that are in the progress of an animation at the time the selector is run. | | | | j27 |
:button | | 选择所有按钮元素和按钮类型的元素。 | Selects all button elements and elements of type button. | | | | j46 |
:checkbox | | 选择所有类型的元素复选框。 | Selects all elements of type checkbox. | | | | j35 |
:checked | input:checked | 选择每个选中的<input>元素 | Selects every checked <input> element | 3 | w40 | s23 | j09 |
:default | input:default | 选择默认的<input>元素 | Selects the default <input> element | | | s24 | |
:contains() | | 选择所有包含指定文本的元素。 | Select all elements that contain the specified text. | | | | j13 |
:disabled | input:disabled | 选择每个禁用的<input>元素 | Selects every disabled <input> element | 3 | w39 | s25 | j47 |
:empty | p:empty | 选择每个没有子元素的<p>元素(包括文本节点) | Selects every <p> element that has no children (including text nodes) | 3 | w36 | s26 | j21 |
:enabled | input:enabled | 选择每个启用的<input>元素 | Selects every enabled <input> element | 3 | w38 | s27 | j03 |
:eq() | | 选择匹配集中索引n处的元素。 | Select the element at index n within the matched set. | | | | j41 |
:even | | 选择零索引的偶数元素。另请参阅。 | Selects even elements, zero-indexed. See also odd. | | | | j55 |
:file | | 选择文件类型的所有元素。 | Selects all elements of type file. | | | | j02 |
:first | | 选择第一个匹配的DOM元素。 | Selects the first matched DOM element. | | | | j48 |
:first-child | p:first-child | 选择作为其父级的第一个子级的每个<p>元素 | Selects every <p> element that is the first child of its parent | 2 | w17 | s28 | j58 |
:first-of-type | p:first-of-type | 选择作为其父级的第一个<p>元素的每个<p>元素 | Selects every <p> element that is the first <p> element of its parent | 3 | w32 | s31 | j43 |
:focus | input:focus | 选择具有焦点的输入元素 | Selects the input element which has focus | | | s32 | j42 |
:hover | a:hover | 在鼠标悬停时选择链接 | Selects links on mouse over | | | s33 | |
:in-range | input:in-range | 选择值在指定范围内的输入元素 | Selects input elements with a value within a specified range | | | s34 | |
:indeterminate | input:indeterminate | 选择处于不确定状态的输入元素 | Selects input elements that are in an indeterminate state | | | s35 | |
:invalid | input:invalid | 选择具有无效值的所有输入元素 | Selects all input elements with an invalid value | | | s36 | |
:gt() | | 选择索引大于匹配集中索引的所有元素。 | Select all elements at an index greater than index within the matched set. | | | | j17 |
:has() | | 选择包含至少一个与指定选择器匹配的元素的元素。 | Selects elements which contain at least one element that matches the specified selector. | | | | j14 |
:header | | 选择所有作为标头的元素,例如h1,h2,h3等。 | Selects all elements that are headers, like h1, h2, h3 and so on. | | | | j40 |
:hidden | | 选择所有隐藏的元素。 | Selects all elements that are hidden. | | | | j07 |
:image | | 选择图像类型的所有元素。 | Selects all elements of type image. | | | | j25 |
:input | | 选择所有输入,文本区域,选择和按钮元素。 | Selects all input, textarea, select and button elements. | | | | j28 |
:lang(language) | p:lang(it) | 选择每个<p>元素的lang属性等于" it"(意大利语) | Selects every <p> element with a lang attribute equal to "it" (Italian) | 2 | w18 | s37 | j32 |
:last | | 选择最后一个匹配的元素。 | Selects the last matched element. | | | | j16 |
:last-child | p:last-child | 选择作为其父级的最后一个子级的每个<p>元素 | Selects every <p> element that is the last child of its parent | 3 | w31 | s38 | j50 |
:last-of-type | p:last-of-type | 选择作为其父级的最后一个<p>元素的每个<p>元素 | Selects every <p> element that is the last <p> element of its parent | 3 | w33 | s39 | j34 |
:link | a:link | 选择所有未访问的链接 | Selects all unvisited links | 1 | w02 | s40 | |
:visited | a:visited | 选择所有访问的链接 | Selects all visited links | | | s58 | |
:visible | | 选择所有可见的元素。 | Selects all elements that are visible. | | | | j15 |
:lt() | | 选择索引小于匹配集中索引的所有元素。 | Select all elements at an index less than index within the matched set. | | | | j61 |
:not(selector) | :not(p) | 选择不是<p>元素的每个元素 | Selects every element that is not a <p> element | 3 | w41 | s41 | j30 |
:nth-child(n) | p:nth-child(2) | 选择作为其父级的第二个子级的每个<p>元素 | Selects every <p> element that is the second child of its parent | 3 | w27 | s42 | j44 |
:nth-last-child(n) | p:nth-last-child(2) | 选择每个<p>元素作为其父级的第二个子级,从最后一个子级开始计数 | Selects every <p> element that is the second child of its parent, counting from the last child | 3 | w28 | s43 | j54 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 从最后一个子元素开始,选择作为其父元素的第二个<p>元素的每个<p>元素 | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 3 | w30 | s44 | j39 |
:nth-of-type(n) | p:nth-of-type(2) | 选择作为其父级的第二个<p>元素的每个<p>元素 | Selects every <p> element that is the second <p> element of its parent | 3 | w29 | s45 | j37 |
:odd | | 选择零索引的奇数元素。另请参见。 | Selects odd elements, zero-indexed. See also even. | | | | j06 |
:only-child | p:only-child | 选择作为其父级唯一子级的每个<p>元素 | Selects every <p> element that is the only child of its parent | 3 | w34 | s47 | j01 |
:only-of-type | p:only-of-type | 选择作为其父级的唯一<p>元素的每个<p>元素 | Selects every <p> element that is the only <p> element of its parent | 3 | w35 | s46 | j59 |
:optional | input:optional | 选择没有"必需"属性的输入元素 | Selects input elements with no "required" attribute | | | s48 | |
:out-of-range | input:out-of-range | 选择值超出指定范围的输入元素 | Selects input elements with a value outside a specified range | | | s49 | |
:read-only | input:read-only | 选择指定了"只读"属性的输入元素 | Selects input elements with the "readonly" attribute specified | | | s51 | |
:read-write | input:read-write | 选择未指定"只读"属性的输入元素 | Selects input elements with the "readonly" attribute NOT specified | | | s52 | |
:required | input:required | 选择指定了"必需"属性的输入元素 | Selects input elements with the "required" attribute specified | | | s53 | |
:root | :root | 选择文档的根元素 | Selects the document's root element | 3 | w26 | s54 | |
:parent | | 选择具有至少一个子节点的所有元素(元素或文本)。 | Select all elements that have at least one child node (either an element or text). | | | | j08 |
:password | | 选择类型为password的所有元素。 | Selects all elements of type password. | | | | j57 |
:radio | | 选择单选类型的所有元素。 | Selects all elements of type radio. | | | | j60 |
:reset | | 选择所有类型为reset的元素。 | Selects all elements of type reset. | | | | j11 |
:root | | 选择作为文档根的元素。 | Selects the element that is the root of the document. | | | | j29 |
:selected | | 选择所有选定的元素。 | Selects all elements that are selected. | | | | j36 |
:submit | | 选择类型为Submit的所有元素。 | Selects all elements of type submit. | | | | j33 |
:target | #news:target | 选择当前活动的#news元素(单击包含该锚名称的URL) | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 | w37 | s56 | j04 |
:text | | 选择文本类型的所有输入元素。 | Selects all input elements of type text. | | | | j23 |
:valid | input:valid | 选择具有有效值的所有输入元素 | Selects all input elements with a valid value | | | s57 | |
.class | .intro | 选择所有带有class =" intro"的元素 | Selects all elements with class="intro" | 1 | w06 | s01 | j53 |
.class1 .class2 | .name1 .name2 | 选择名称为name1的元素的后代的所有名称为name2的元素 | Selects all elements with name2 that is a descendant of an element with name1 | | | s03 | |
.class1.class2 | .name1.name2 | 选择其class属性中同时设置了name1和name2的所有元素 | Selects all elements with both name1 and name2 set within its class attribute | | | s02 | |
[attribute] | [target] | 选择具有目标属性的所有元素 | Selects all elements with a target attribute | 2 | w13 | s13 | j62 |
[attribute*=value] | a[href*="w3schools"] | 选择其href属性值包含子字符串" w3schools"的每个<a>元素 | Selects every <a> element whose href attribute value contains the substring "w3schools" | 3 | w25 | s19 | j45 |
[attribute^=value] | a[href^="https"] | 选择其href属性值以" https"开头的每个<a>元素 | Selects every <a> element whose href attribute value begins with "https" | 3 | w23 | s17 | j22 |
[attribute=value] | [target=_blank] | 选择所有具有target =" _ blank"的元素 | Selects all elements with target="_blank" | 2 | w14 | s14 | j49 |
[name!="value"] | | 选择不具有指定属性或具有指定属性但不具有特定值的元素。 | Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value. | | | | j24 |
[attribute|=value] | [lang|=en] | 选择所有以" en"开头的lang属性值的元素 | Selects all elements with a lang attribute value starting with "en" | 2 | w16 | s16 | j05 |
[attribute~=value] | [title~=flower] | 选择标题属性包含单词" flower"的所有元素 | Selects all elements with a title attribute containing the word "flower" | 2 | w15 | s15 | j10 |
[attribute$=value] | a[href$=".pdf"] | 选择每个href属性值以" .pdf"结尾的<a>元素 | Selects every <a> element whose href attribute value ends with ".pdf" | 3 | w24 | s18 | j51 |
[name="value"][name2="value2″] | | 匹配与所有指定的属性过滤器匹配的元素。并且 | Matches elements that match all of the specified attribute filters. | | | | j26 |
* | * | 选择所有元素 | Selects all elements | 2 | w12 | s05 | j52 |
#id | #firstname | 选择id =" firstname"的元素 | Selects the element with id="firstname" | 1 | w07 | s04 | j31 |
element | p | 选择所有<p>元素 | Selects all <p> elements | 1 | w01 | s06 | j38 |
element element | div p | 选择<div>元素内的所有<p>元素. 后代("祖先 后代") | Selects all <p> elements inside <div> elements | 1 | w11 | s09 | j56 |
element,element | div, p | 选择所有<div>元素和所有<p>元素. 多选 | Selects all <div> elements and all <p> elements | | | s08 | j20 |
element.class | p.intro | 选择所有带有class =" intro"的<p>元素 | Selects all <p> elements with class="intro" | 1 | w08 | s07 | |
element+element | div + p | 选择紧接在<div>元素之后的所有<p>元素. 下一个相邻("上一个+下一个") | Selects all <p> elements that are placed immediately after <div> elements | 2 | w22 | s11 | j19 |
element>element | div > p | 选择所有<p>元素,其中父元素是<div>元素. 子选择("父>子") | Selects all <p> elements where the parent is a <div> element | 2 | w21 | s10 | j18 |
element1~element2 | p ~ ul | 选择每个以<p>元素开头的<ul>元素. 下一个兄弟姐妹("上一个〜兄弟姐妹") | Selects every <ul> element that are preceded by a <p> element | 3 | w42 | s12 | j12 |
.c#myid | | class =" c"和ID等于" myid"的元素 | the element with class="c" and ID equal to "myid" | 1 | w10 | | |
E#myid | | ID等于" myid"的E元素 | an E element with ID equal to "myid" | 1 | w09 | | |