首页 > 技术文章 > css选择器

finghi 2020-01-30 13:11 原文



※   ;选择所有元素

div,p  ; 选择所有div元素和p元素

div p ;选择div内部所有p元素

div>p;选择父元素为div的所有p元素

div+p;选择紧接在div元素之后的所有p元素

[target];选择带有target属性的所有元素

[target=_blank];选择target=_blank的所有元素

[title~=flower];选择title属性包含单词"flower"的所有元素

[lang|=en];选择lang属性以"en开头的所有元素"

a:link  ;选择所有未被访问的链接

a:visited  ;选择所有已被访问的链接

a:active  ;选择活动链接

a:hover  ;选择鼠标指针位于其上的链接

input:focus   ;选择获取焦点的input元素

li:first-child  ;选择列表中第一个li元素

p:before;  在每个p元素内容之前插入内容

p:after;  在每个p元素内容之后插入内容

p~ul;  选择前面有p元素的每个ul元素

a[src^="https"];选择其src属性以https开头的每个a元素

a[src$=".pdf"];以pdf结尾的

a[src*="adc"];包含adc字符串

p:first-of-type;指定父元素首个p元素

p:last-of-type;指定父元素的最后一个p元素

p:only-of-type;选择属于其父元素唯一的p元素的每个p元素

p:nth-child(2); 选择属于其父元素第二个子元素的p元素(如果第二个元素不是p就不显示)

p:nth-last-child(2); 同上从最后一个元素开始

p:nth-of-type;选择其父元素中第二个p元素的每个p元素    nth-last-of-type 从最后一个数

p:last-child;选择属于其父元素最后一个元素的p元素

:root;选择文档根元素

p:empty;  选择没有子元素的p元素(包括文本节点)

#news:target;选择当前活动的#news元素

input:enablt;选择每个启动的input元素

input:disabled  禁用的input

:not(p)选择非p元素的每个元素

::selection选择被用户选取的元素部分


 

推荐阅读