CSS选择器大全

目录

.class

.class1.class2

.class1 .class2

#id

*

element

element.class

element,element 

element element 

element>element

element+element 

element1~element2

[attribute] 

 [attribute=value]

 [attribute~=value]

​编辑 

[attribute|=value]

[attribute^=value]

 [attribute$=value]

[attribute*=value]

:active

::after

::before

:checkde

:default 

:disabled

:empty

​编辑 

:enabled 

:first-child

::first-letter

 ::first-line

 :first-of-type

:focus 

 :fulscreen

:hover

:in-range

:indeterminate

:invalid

:last-child

:last-of-type

:not(selector)

 :nth-child(n)

:nth-last-child(n)

:nth-of-type(n)

:only-child

 :optional 

:out-of-range

:read-only 

:read-write

:required

 :root

 ::selection

:valid

:visited


.class

选择class=“class”的所以属性


.class1.class2

例如: .name1.name2        选择class属性中同时有name1和name2的所以元素


.class1 .class2

例如: .name1 .name2        选择做为类名name1元素后代的所以类名name2元素


#id

选择id元素


*

选择所有元素


element

属性标签,选择该属性的所有元素

例如: p         选择所有<p>元素


element.class

例如: p.intro        选择class=“intro”的所有<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>元素


element1~element2

例如:p~ul        选择前面有<p>元素的每个<ui>元素


[attribute] 

例如:[target]        选择带有target属性的所有元素


 [attribute=value]

例如:[target=_blank]        选择带有target=_blank属性的所有元素


 [attribute~=value]

例如:[title~=hello]        选择title属性包含单词hello的所有元素

 


[attribute|=value]

例如:[lang|=en]        选择lang属性以en开头的所有元素

 


[attribute^=value]

例如:div[class^="test"]        选择class属性以test开头的所有<div>元素


 [attribute$=value]

例如:div[class$="test"]        选择class属性以test结尾的div元素


[attribute*=value]

例如:div[class*="test"]        选择class属性包含test子串的div元素


:active

例如:a:active        选择活动的链接


::after

例如:p::after        在每一个<p>标签后插入内容

 


::before

例如:p::before        在每一个<p>的内容前插入内容


:checkde

 例如:input:checked        选择每个被选中的<input>元素


:default 

 例如:input:default        选择默认的<input>元素


:disabled

 例如:

input[type="text"]:disabled

      为所有 type="text" 的被禁用的 input 元素设置背景色


:empty

例如:p:empty        指定空的p元素的背景

 


:enabled 

例如:input:enabled        启用每一个<input>元素


:first-child

例如:p:first-child        选择属于父元素的第一个子元素的每个<p>元素


::first-letter

例如:p::frist-letter        选择每个<p>元素的首字母

 


 ::first-line

例如:p::first-line        选择每个<p>元素的首行


 :first-of-type

例如:p:first-of-type        选择属于父元素的首个<p>元素


:focus 

例如:input:focus        选择获得焦点的input的元素


 :fulscreen

如果页面位于全屏模式,把背景色设置为黄色:

:fullscreen {
  background-color: yellow;
}

:hover

例如:a:hover         选择鼠标位于其上的链接


:in-range

例如:input:in-range


:indeterminate

 例如:input:indeterminate


:invalid

例如:input:invalid        选择具有无效值的所有input元素


:last-child

例如: p:last-child        选择属于其父元素最后一个子元素的每个<p>元素


:last-of-type

 例如:p:last-of-type        选择属于其父元素的最后<p>元素的每个<p>元素


例如: a:link        选择所有未访问过的链接


:not(selector)

例如::not(p)        选择非<p>元素的每个元素


 :nth-child(n)

例如:p:nth-child(2)        选择父元素的第二个子元素的每个<p>元素


:nth-last-child(n)

例如:p:nth-last-child(2)         选择父元素的倒数第二个子元素的每个<p>元素


:nth-of-type(n)

 例如:p:nth-of-type(2)        选择属于其父元素第二个<p>元素的每个<p>元素


:only-child

 例如:p:only-child        选择属于其父元素唯一子元素的<p>元素


 :optional 

 例如: input:optional        选择不带"required"属性的input元素


:out-of-range

 例如:  input:out-of-range        选择值超过指定范围的input元素


::placeholder

例如: input::placeholder        选择已规定“placeholder”属性的input元素

 


:read-only 

 例如: input:read-only        选择已经规定readonly属性的input元素


:read-write

 例如:  input:read-write        选择未规定readonly属性的input元素


:required

例如: input:required        选择已经规定required属性的input元素

 


 :root

选择文档的根目录


 ::selection

选择用户已经选取的元素部分


:valid

例如: input:valid         选择带有有效值的所有input元素


:visited

例如: a:vistied 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前段被迫创业

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值