css选择器用法较多,不经常使用的选择器容易遗忘,因而在这里整理出css选择器的基本用法,以备查用。css
*
: 通配符,匹配任何元素html
例:* { color: red }
app
#id
: id 选择器this
例:匹配全部 id 属性为 app 的元素spa
#app { color: red }
code
.class
: class 选择器htm
匹配全部 class 属性为 btn 的元素继承
例:.btn { color: red }
element
element
: 元素选择器文档
匹配全部 div 标签
例:div { color: red }
HTML:
<div title="myBtn Button" lang="en-us" />
复制代码
CSS 2.1
[attribute]
: 匹配全部带有 attribute 属性的元素
[title] { color: red; }
[attribute="x"]
: 匹配全部 attribute 属性为 x 的元素
[title=myBtn] { color: red; }
[attribute~="x"]
: 匹配全部 attribute 属性具备多个空格分隔的值,其中一个值等于 x 的元素
[title~="Button"] { color: red; }
[attribute|="x"]
: 匹配全部 attribute 属性具备连字符-
分隔的值,其中一个值以 x 开头的元素
[lang|="en"] { color: red; }
CSS 3
[attribute^="x"]
: 匹配属性 attribute 的值以 x 开头的元素
[title^=my] { color: red; }
[attribute$="x"]
: 匹配属性 attribute 的值以 x 结尾的元素
[title$=Button] { color: red; }
[attribute*="x"]
: 匹配属性 attribute 的值包含 x 的元素
[title*=Btn] { color: red; }
HTML:
<div>
<a lang="en" href="http://xinghunm.com" target="_blank">Xinghunm.com</a>
</div>
复制代码
CSS 2.1
如下的 E、F 指 selector 匹配到的元素,其自己就是 selector。
E:first-child
: 匹配元素 E 当它是其父元素的第一个子元素
a:first-child { color: red; }
E:link
: 匹配未被访问(未点击或跳转)的连接
a:link { color: black; }
E:visited
: 匹配已访问过的连接
a:visited { color: green; }
E:hover
: 匹配鼠标悬停其上的元素
:hover
必须在:link
和:visited
以后才能看到效果。
a:hover { color: blue; }
E:active
: 匹配鼠标按下还未抬起的元素
:active
必须在:hover
以后才能看到效果。
a:active { color: red; }
E:focus
: 匹配获取当前焦点的元素
a:focus { color: yellow; }
E:lang(x)
: 匹配 lang 属性等于 x 的元素
a:lang(en) { color: red; }
CSS 3
HTML:
<div>
<h1>this is h1</h1>
<h3>first-of-type h3</h3>
<h3>last-of-type h3</h3>
<ul>
<li><a href="#tab1">tab1</a></li>
<li><a href="#tab2">tab2</a></li>
</ul>
<div id="tab1">this is tab1</div>
<div id="tab2">this is tab2</div>
<p><span>only child</span></p>
<p></p>
<input id="input1" />
<input id="input2" disabled="disable" />
<input id="input3" type="checkbox" />
</div>
复制代码
E:target
: URL 后跟锚点#,指向文档内某个具体的元素,这个被连接的元素就是目标元素,E:target
选 择器用于选取当前活动的目标元素 当咱们点击列表 tab1 时,由于其锚点连接的元素就是 id 为 tab1 的元素,因此此时活动的目标元素就是 id 为 tab1 的 div,经过 div:target 就能够获取此目标元素。
div:target { background: red; }
:not(selector)
: 匹配与 selector 选择器描述不相符的元素
div :not(div) { color: red; }
E:enabled
: 匹配表单中激活的元素
#input1:enabled { background: red; }
E:disabled
: 匹配表单中禁用的元素
#input2:disabled { background: black; }
E:checked
: 匹配表单中被选中的 radio(单选框)或 checkbox(复选框)
#input3:checked { margin: 20px; }
CSS3 结构性伪类
:root
: 匹配根元素,对应 HTML 文档就是 html 元素
:root { color: red; }
E:nth-child(n)
: 匹配元素 E 当它是其父元素的第 n(从 1 开始)个子元素 列表 tab1 是其父元素 ul 的第一个元素,所以能够匹配到列表 tab1
li:nth-child(1) { color: red; }
E:nth-last-child(n)
: 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个子元素 列表 tab2 是其父元素 ul 的倒数第一个子元素,所以能够匹配到列表 tab2
li:nth-last-child(1) { color: red; }
E:last-child
: 匹配元素 E 当它是其父元素的倒数第 1 个子元素
li:last-child() { color: red; }
E:only-child
: 匹配元素 E 当它是其父元素的惟一一个子元素
span:only-child() { color: red; }
E:nth-of-type(n)
: 匹配元素 E 当它是其父元素的第 n(从 1 开始)个出现的与 E 类型相同的子元素
匹配<div id="tab2">this is tab2</div>
div:nth-of-type(2) { color: red; }
E:nth-last-of-type(n)
: 匹配元素 E 当它是其父元素的倒数第 n(从 1 开始)个出现的与 E 类型相同的子元素
匹配<div id="tab1">this is tab1</div>
div:nth-last-of-type(2) { color: red; }
E:first-of-type
: 匹配元素 E 当它是其父元素的第 1 个出现的与 E 类型相同的元素子元素(可能有多个)
h3:first-of-type { color: red; }
E:last-of-type
: 匹配元素 E 当它是其父元素的倒数第 1 个出现的与 E 类型相同的元素子元素(可能有多个)
h3:last-of-type { color: red; }
E:only-of-type
: 匹配元素 E 当它是其父元素下惟一一个 E 类型的元素
h1:only-of-type { color: red; }
E:empty
: 匹配元素 E 当没有子元素或内容时
p:empty{ color: red; }
HTML:
<div>
<p>12<br>34</p>
</div>
复制代码
CSS 2.1
::first-line
: 匹配元素的第一行
p::first-line { color: red; }
::first-letter
: 匹配元素的第一个字母
p::first-letter { color: red; }
::before
: 在元素前经过 content 属性插入内容
p::before { content: "*"; }
::after
: 在元素后经过 content 属性插入内容
p::after { content: "*"; }
CSS 3
::selection
: 匹配鼠标框选的元素
::selection { color: red; }
HTML:
<div id="div1">
<div id="div2">
<h1>this is dev2 > h1</h1>
<h2>this is dev2 > h2</h2>
</div>
<div id="div3">this is dev3</div>
<div id="div4">this is dev4</div>
<h1>this is div1 > h1</h1>
</div>
复制代码
E, F
: 多元素选择器,同时匹配 E 元素和 F 元素
h1, h2 { color: red; }
E > F
: 子元素选择器,匹配 E 元素的子元素 F
#div2 > h1 { color: red; }
E F
: 后代元素选择器,匹配 E 元素的后代元素 F
#div1 h2 { color: red; }
E + F
: 相邻元素选择器,匹配全部紧随 E 元素以后的 F 元素 匹配 div3
#div2 + div { color: red; }
E ~ F
: 同级元素选择器,匹配全部 E 元素以后的同级元素 F 匹配 div3,div4
#div2 ~ div { color: red; }
!important > 行内样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符