css选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

基本选择器

• id选择器
• 类选择器
• 标签选择器

结构选择器

名称	示例	说明
后代选择器	div p	选择 <div> 中所有的 p 元素
子元素选择器	div>p	选择所有以 <div> 为父元素的 p 元素
兄弟元素选择器	div+p	选择所有<div> 后面紧挨着的 p 元素
后面的一串兄弟元素	div~p	选择相同父元素中的<div>后面的所有 p 元素

属性选择器

分类	示例	说明
[attribute]	[target]	选择带有target属性的所有元素
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute**=*value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 元素。
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 元素。
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 元素。

tips：attribute也可以是class、name之类的

约束多个属性

h1[class][id] {
    color: red;
}
...

<h1 class="container" id >houdunren.com</h1>

伪类选择器

• 超链接伪类选择器

分类	示例	说明
:link	a:link	选择没有用访问过的超链接，为其设置样式
:visited	a:visited	选择访问过的超链接，为其设置样式
:hover	a:hover	选择鼠标悬浮处的链接，为其设置样式
:active	a:active	选择鼠标点击时的链接，为其设置样式

不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
...

<input type="text">

• :target

突出显示活动的 HTML 锚：

p:target
{ 
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

• :root

选择根元素伪类即html文档

如：设置 HTML 文档的背景色：

:root
{ 
background:#ff0000;
}

• :empty

选择空的没有内容的元素

p:empty {
    border: solid 2px red;
}
...

<p></p>
<p> </p>
<p>一段文本</p>

结构伪类

• :first-child 和 :last-child

选择同一个父元素的第一个元素/最后一个的xx元素

注意：这里的同一父元素并不指定是哪一个父元素，比如下面的例子中的两个被选中的 span

article span:first-child {
    color: red;
}
...

<article>
	<span>第一个span元素  被选中</span> 
	<span>第二个</span>
	<span>第三个</span>
	<div>
		<span>div下面的第一个span 被选中</span>
	</div>
</article>

div:first-of-type
{
background:#ff0000;
}
</style>
</head>

...

<h1>这是标题</h1>

<p>这是第一个段落。被选中</p>
<div><p>这是第二个段落。選中的那个p</p></div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

---

• :nth-last-child(n)、:nth-child(n)
  • 选择奇数个:nth-child(odd)
  • 选择偶数个:nth-child(even)
• :nth-of-type(n) 、:nth-last-of-type(n)
• xx:only-child 选择是唯一的子元素xx标签
  • 被选中要有两个条件
    1. 父元素下面只有一个子元素
    2. 子元素是xx标签
• xxx:only-of-type 选择同级中类型是xxx 的唯一子元素
  • 被选中的条件：同级别中只有同一个xxx标签
• :not(selector)
  排除第一个li元素

ul li:not(:nth-child(1)) {
    background: red;
}
...

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含required属性的元素
:optional	input:optional	不包含required属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

字符伪元素选择器

分类	示例	说明
:first-letter	p:first-letter	p标签里面文本的第一个字母
:first-line	P:first-line	p标签里面文本的第一行
:before	p:before	在元素之前添加内容
:after	p:after	在元素之后添加内容