目录
.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>元素
:link
例如: 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