Loading... * **以#开头代表选择id** * **以.开头代表选择class** * **css选择器支持嵌套选择,利用空格把每个选择器分隔开** **如: #container .wrapper p ** **代表选择id为container的节点,然后选择内部class为wrapper的节点,再进一步选择该节点内部的p节点** * **选择器之间不加空格,则代表并列关系** **如: div#container .wrapper p.text ** **代表选择id为container的div节点,然后选择内部的class为wrapper的节点,在进一步选择节点内部的class为text的p节点** | **选择器** | **例子** | **描述** | | -------------------------- | ------------------------ | --------------------------------------------------- | | **.class** | **.intro** | **选择class="intro"的所有节点** | | **#id** | **#firstname** | **选择id="firstname"的所有节点** | | ***** | ***** | **选择所有节点** | | **element** | **p** | **选择所有P节点** | | **element,element** | **div,p** | **选择所有div节点和所有p节点** | | **element element** | **div p** | **选择所有div节点内部的所有p节点** | | **element>element** | **div>p** | **选择父节点为div节点的所有p节点** | | **element+element** | **div+p** | **选择紧接在div节点之后的所有p节点** | | **[attribute]** | **[target]** | **选择带有target属性的所有节点** | | **[attribute=value]** | **[target=blank]** | **选择target="blank"的所有节点** | | **[attribute~=value]** | **[title~=flower]** | **选择title属性包含单词flower的所有节点** | | **:link** | **a:link** | **选择所有未被访问的链接** | | **:visited** | **a:visited** | **选择所有已被访问的链接** | | **:active** | **a:active** | **选择活动链接** | | **:hover** | **a:hover** | **选择鼠标指针位于其上的链接** | | **:focus** | **input:focus** | **选择获得焦点的input节点** | | **:first-letter** | **p:first-letter** | **选择每个p节点的首字母** | | **:first-line** | **p:first-line** | **选择每个p节点的首行** | | **:first-child** | **p:first-child** | **选择属于父节点的第一个子节点的所有p节点** | | **:before** | **p:before** | **在每个p节点的内容之前插入内容** | | **:after** | **p:after** | **在每个p节点的内容之后插入内容** | | **:lang(language)** | **p:lang** | **选择带有以it为开头的lang属性值的所有p节点** | | **element1~element2** | **p~ul** | **选择前面有p节点的所有ul节点** | | **[attribute^=value]** | **a[src^="https"]** | **选择src属性值以https开头的所有a节点** | | **[attribute$=value]** | **a[src$=".pdf"]** | **选择src属性值以.pdf结尾的所有a节点** | | **[attribute*=value]** | **a[src*="abc"]** | **选择src属性值中包含abc字符串的所有a节点** | | **:first-of-type** | **p:first-of-type** | **选择属于对应父节点的首个p节点的所有p节点** | | **:last-of-type** | **p:last-of-type** | **选择属于对应父节点的最后一个p节点的所有p节点** | | **:only-of-type** | **p:only-of-type** | **选择属于对应父节点的唯一p节点的所有p节点** | | **:only-child** | **p:only-child** | **选择属于对应父节点的唯一子节点的所有p节点** | | **:nth-child(n)** | **p:nth-child** | **选择属于对应父节点的第二个子节点的所有p节点** | | **:nth-last-child(n)** | **p:net-last-child** | **同上,不过是从最后一个子节点开始计数** | | **:nth-of-type(n)** | **p:nth-of-type** | **选择属于对应父节点的第二个p节点的所有p节点** | | **:nth-last-of-type(n)** | **p:nth-last-of-type** | **同上,不过是从最后一个子节点开始计数** | | **:last-child** | **p:last-child** | **选择属于对应父节点的最后一个子节点的所有p节点** | | **:root** | **:root** | **选择文档的根节点** | | **:empty** | **p:empty** | **选择没有子节点的所有p节点(包括文本节点)** | | **:target** | **#news:target** | **选择当前活动的#news节点** | | **:enabled** | **input:enabled** | **选择每个启用的input节点** | | **:disabled** | **input:disabled** | **选择每个禁用的input节点** | | **:checked** | **input:checked** | **选择每个被选中的input节点** | | **:not(selector)** | **:not** | **选择非p节点的所有节点** | | **::selection** | **::selection** | **选择被用户选取的节点部分** | 最后修改:2022 年 04 月 18 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用,请随意赞赏