选择器

选择器

向军大叔每晚八点在 抖音 和 bilibli 直播

样式是做用在元素标签上的，通过本章将可以随意查找元素来应用样式。

基本选择器

选择器	示例	描述
.class	.intro	选择 class="intro" 的所有元素
#id	#firstname	选择 id="firstname" 的所有元素
*	*	选择所有元素
element	p	选择所有 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 元素

标签选择

使用 * 可为所有元素设置样式。

* {
    text-decoration: none;
    color: #6c757d;
}

根据标签为元素设置样式

h1 {
	color: red;
}

同时设置多个元素组合

h1,h2 {
    color: red;
}

元素在多个组件中存在

h1,h2 {
    color: red;
}
h1,h3{
    background: #dcdcdc;
}

类选择器

类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。

<style>
.text-center {
    text-align: center;
}
</style>

<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>

将类选择器指定为具体标签

.help-block {
    background: red;
}

span.help-block {
    font-size: 12px;
    color: #aaa;
    background: none;
}
...

<span class="help-block">感谢访问后盾人</span>

ID 选择器

为有 id 属性的元素设置样式

#container {
    background: red;
}

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

文档中 ID 应该是唯一的，虽然为多个元素设置同一个 ID 也可以产生样式效果，但这是不符合规范的。

建议优先使用类选择器

结构选择器

选择器	示例	描述
element element	div p	选择 div 元素内部的所有 p 元素
element>element	div>p	选择父元素为 div 元素的所有 p 元素
element+element	div+p	选择紧接在 div 元素之后的 p 元素
element~element2	p~ul	选择 p 元素同级并在 p 元素后面的所有 ul 元素

后代选择器

HTML 中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素（不只是子元素，是后代元素）。

main article h2,main h1 {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

子元素选择

子元素选择器中选择子元素，不包括孙级及以下元素。

main article>h2 {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

紧邻兄弟元素

用于选择紧挨着的同级兄弟元素。

main article+h2 {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

后面兄弟元素

用于选择后面的所有兄弟元素。

main article~* {
    color: green;
}
...

<main>
	<article>
		<h2 name="houdunren">houdunren.com</h2>
		<aside>
			<h2>houdunwang.com</h2>
		</aside>
	</article>
	<h2 name="hdcms.com">hdcms.com</h2>
	<h1>后盾人</h1>
</main>

属性选择器

根据属性来为元素设置样式也是常用的场景。

选择器	示例	描述
[attribute]	[target]	带有 target 属性所有元素
[attribute=value]	[target=_blank]	targe 属性 等于"_blank" 的所有元素
[attribute~=value]	[title~=houdunren]	title 属性包含单词 "houdunren" 的所有元素
[attribute|=value]	[title|=hd]	title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词
[attribute*=value]	a[src*="hdcms"]	src 属性中包含 "hdcms" 字符的每个 a 元素
[attribute^=value]	a[src^="https"]	src 属性值以 "https" 开头的每个 a 元素
[attribute$=value]	a[src$=".jpeg"]	src 属性以 ".jpeg" 结尾的所有 a 元素

为具有 class 属性的 h1 标签设置样式

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

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

约束多个属性

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

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

具体属性值设置样式

a[href="https://www.houdunren.com"] {
    color: green;
}
...

<a href="https://www.houdunren.com">后盾人</a>
<a href="">HDCMS</a>

^ 以指定值开头的元素

h2[name^="hdcms"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>

$ 以指定值结尾的元素

<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
...

h2[name$="com"] {
    color: red;
}

* 属性内部任何位置出现值的元素

h2[name*="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren.com">hdcms.com</h2>

~ 属性值中包含指定词汇的元素

h2[name~="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren web">hdcms.com</h2>

| 以指定值开头或以属性连接破折号的元素

h2[name|="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren-web">hdcms.com</h2>

伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则。

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	选择文档的根元素即 html。
:empty	p:empty	选择没有子元素的每个 p 元素（包括文本节点）。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 p 元素
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 p 元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素
:last-of-type	p:last-of-type	选择属于其父元素的最后 p 元素的每个 p 元素。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 p 元素的每个 p 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 p 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 p 元素。
:nth-child(odd)	p:nth-child(odd)	选择属于其父元素的奇数 p 元素。
:nth-child(even)	p:nth-child(even)	选择属于其父元素的偶数 p 元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 p 元素的每个 p 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:not(selector)	:not(p)	选择非 p 元素的每个元素

:超链接伪类

定义链接的不同状态

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
...

<a href="https://www.houdunren.com">后盾人</a>

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

input:focus {
    background: green;
}

input:hover {
    background: blue;
}

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

<input type="text">

:target

用于控制具有锚点目标元素的样式

div {
	height: 900px;
}

div:target {
	color: red;
}
...

<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">
	hdcms内容管理系统
</div>

:root

根元素选择伪类即选择 html

:root {
    font-size: 100px;
}

:empty

没有内容和空白的元素。下面第一个 p 标签会产生样式，第二个不会因为有空白内容

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

<p></p>
<p> </p>

结构伪类

下面来通过结构伪类选择器选择树状结构中的标签元素。

:first-child

选择元素中span 标签并且是第一个。

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

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
		<span>hdcms.com</span>
	</aside>
</article>

:first-of-type

选择类型是span 的第一个元素

article span:first-of-type {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<strong>hdcms.com</strong>
		<span>houdunwang.com</span>
	</aside>
</article>

:last-child

选择元素中span 标签并且是最后一个。

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

<article>
  <span>houdunren.com</span>
  <aside>
    <strong>hdcms.com</strong>
    <span>houdunwang.com</span>
  </aside>
  <span>hdphp.com</span>
</article>

:last-of-type

选择类型为span 的最后一个元素

article span:last-of-type {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
  <span>hdphp.com</span>
</article>

:only-child

选择是唯一子元素的span 标签

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

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
	</aside>
</article>

:only-of-type

选择同级中类型是span 的唯一子元素

article span:only-of-type {
    color: red;
}
...

<article>
	<span>houdunren.com</span>
	<aside>
		<span>houdunwang.com</span>
		<span>hdcms.com</span>
	</aside>
</article>

:nth-child(n)

选择第二个元素并且是 span 标签的

article span:nth-child(2) {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
    <span>houdunwang.com</span>
    <span>hdcms.com</span>
  </aside>
  <span>hdphp.com</span>
</article>

:nth-of-type(n)

选择第二个span 元素，不管中间的其他元素

article span:nth-of-type(2) {
    color: red;
}
...

<article>
  <span>houdunren.com</span>
  <aside>
    <span>houdunwang.com</span>
    <span>hdcms.com</span>
  </aside>
  <span>hdphp.com</span>
</article>

计算数量

n 为 0/1/2/3... ，下面是隔列变色

table tr>td:nth-child(2n+1) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

从第三个开始设置样式

table tr>td:nth-child(n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

设置前三个元素

table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}

奇数元素

选择奇数单元格

table tr>td:nth-child(odd) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

偶数元素

选择偶数单元格

table tr>td:nth-child(even) {
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

:nth-last-child(n)

从最后一个元素开始获取

table tr>td:nth-last-child(2n+1){
    background: green;
    color: white;
}
...

<table border="1">
  <tr>
    <td>houdunren.com</td>
    <td>hdcms.com</td>
    <td>后盾人</td>
    <td>houdunwang.com</td>
    <td>hdcms</td>
  </tr>
</table>

取最后两个元素

main>ul li:nth-last-child(-n+2) {
	color: red;
}

:nth-last-of-type(n)

从最后一个元素开始选择span 标签 。

article span:nth-last-of-type(1) {
    background: red;
    color: white;
}
...

<article>
  <aside>
  	<span>houdunren.com</span>
  	<span>houdunwang.com</span>
  	<strong>hdcms.com</strong>
  </aside>
	<span>hdphp.com</span>
</article>

:not(selector)

排除第一个 li 元素

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

<ul>
  <li>houdunren.com</li>
  <li>hdcms.com</li>
  <li>后盾人</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	验证不通过的表单

表单属性样式

input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
...

<input type="text" disabled>
<input type="text" name="info">

<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>

表单必选样式

input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc;
	border: none;
}
...

<input type="text" name="title" required>
<input type="text" name="name">

表单验证样式

input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
...

<form>
<input type="email">
<button>保存</button>
</form>

字符伪类

状态	示例	说明
::first-letter	p:first-letter	选择每个 p 元素的首字母
::first-line	p:first-line	选择每个 p 元素的首行
::before	p:before	在每个 p 元素的内容之前插入内容
::after	p:after	在每个 p 元素的内容之后插入内容

段落首行处理

p::first-line {
 font-size: 20px;
}
...

<p>
 后盾人不断更新视频教程
</p>

首字母大写

p::first-letter {
    font-size: 30px;
}
...

<p>
	后盾人不断更新视频教程
</p>

在元素前添加

span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
...

<span>后盾人</span>

搜索框示例

div {
    border: solid 1px #ddd;
    width: 150px;
}

div>input[type="text"] {
    border: none;
    outline: none;
}

div>input[type="text"]+span:after {
    content: "\21AA";
    font-size: 14px;
    cursor: pointer;
}
...

<div>
	<input type="text"><span></span>
</div>

添加属性内容

h2::before {
	content: attr(title);
}
...

<h2 title="后盾人">houdunren.com</h2>