选择器

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

基本选择器

选择器	示例	描述
.class	.intro	选择 class="intro" 的所有元素
#id	#firstname	选择 id="firstname" 的所有元素
*	*	选择所有元素
element	p	选择所有元素
element,element	div,p	选择所有元素和所有元素
element element	div p	选择元素内部的所有元素
element>element	div>p	选择父元素为元素的所有元素
element+element	div+p	选择紧接在元素之后的所有元素

标签选择

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

CSS

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

根据标签为元素设置样式

CSS

h1 {
	color: red;
}

同时设置多个元素组合

CSS

h1,h2 {
    color: red;
}

元素在多个组件中存在

CSS

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

类选择器

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

HTML

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

<h1 class="text-center">banmashou.com</h1>
<h2 class="text-center">xinxinya.com</h2>

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

HTML

<style>
.help-block {
    background: red;
}

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

<span class="help-block">斑马兽</span>

ID选择器

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

HTML

<style>
#container {
    background: red;
}
</style>

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

文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。
建议优先使用类选择器

结构选择器

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

后代选择器

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

HTML

<style>
main article h2,main h1 {
    color: green;
}
</style>
...

<main>
	<article>
		<h2 name="banmashou">banmashou.com</h2>
		<aside>
			<h2>banmashou.com</h2>
		</aside>
	</article>
	<h2 name="xinxinya.com">xinxinya.com</h2>
	<h1>斑马兽</h1>
</main>

子元素选择

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

HTML

<style>
main article>h2 {
    color: green;
}
</style>
...

<main>
	<article>
		<h2 name="banmashou">banmashou.com</h2>
		<aside>
			<h2>banmashou.com</h2>
		</aside>
	</article>
	<h2 name="xinxinya.com">xinxinya.com</h2>
	<h1>斑马兽</h1>
</main>

紧邻兄弟元素

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

HTML

<style>
main article+h2 {
    color: green;
}
</style>
...

<main>
	<article>
		<h2 name="banmashou">banmashou.com</h2>
		<aside>
			<h2>banmashou.com</h2>
		</aside>
	</article>
	<h2 name="xinxinya.com">xinxinya.com</h2>
	<h1>斑马兽</h1>
</main>

后面兄弟元素

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

HTML

<style>
main article~* {
    color: green;
}
</style>
...

<main>
	<article>
		<h2 name="banmashou">banmashou.com</h2>
		<aside>
			<h2>banmashou.com</h2>
		</aside>
	</article>
	<h2 name="xinxinya.com">xinxinya.com</h2>
	<h1>斑马兽</h1>
</main>

属性选择器

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

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

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

HTML

<style>
h1[class] {
    color: red;
}
</style>
...

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

约束多个属性

HTML

<style>
h1[class][id] {
    color: red;
}
</style>
...

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

具体属性值设置样式

HTML

<style>
a[href="https://www.banmashou.com"] {
    color: green;
}
</style>
...

<a href="https://www.banmashou.com">斑马兽</a>
<a href="">欣欣吖</a>

^以指定值开头的元素

HTML

<style>
h2[name^="xinxinya"] {
    color: red;
}
</style>
...

<h2 name="banmashou">banmashou.com</h2>
<h2 name="xinxinya.com">xinxinya.com</h2>

$以指定值结尾的元素

HTML

<style>
h2[name$="com"] {
    color: red;
}
</style>

...

<h2 name="banmashou">banmashou.com</h2>
<h2 name="xinxinya.com">xinxinya.com</h2>

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

HTML

<style>
h2[name*="banmashou"] {
    color: red;
}
</style>
...

<h2 name="banmashou">banmashou.com</h2>
<h2 name="banmashou.com">xinxinya.com</h2>

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

HTML

<style>
h2[name~="banmashou"] {
    color: red;
}
</style>
...

<h2 name="banmashou">banmashou.com</h2>
<h2 name="banmashou web">xinxinya.com</h2>

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

HTML

<style>
h2[name|="banmashou"] {
    color: red;
}
</style>
...

<h2 name="banmashou">banmashou.com</h2>
<h2 name="banmashou-web">xinxinya.com</h2>

伪类选择器

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

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

:超链接伪类

定义链接的不同状态

HTML

<style>
a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blue
}

a:active {
    color: yellow
}
</style>
...

<a href="https://www.banmashou.com">斑马兽</a>

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

HTML

<style>
input:focus {
    background: green;
}

input:hover {
    background: blue;
}

input:active {
    background: yellow;
}
</style>
...

<input type="text">

:target

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

HTML

<style>
div {
	height: 900px;
}

div:target {
	color: red;
}
</style>
...

<a href="#xinxinya">xinxinya</a>
<div></div>
<div id="xinxinya">
	xinxinya
</div>

:root

根元素选择伪类即选择html

CSS

:root {
    font-size: 100px;
}

:empty

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

HTML

<style>
:empty {
    border: solid 2px red;
}
</style>
...

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

结构伪类

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

:first-child

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

HTML

<style>
article span:first-child {
    color: red;
}
</style>
...

<article>
	<span>banmashou.com</span>
	<aside>
		<span>banmashou.com</span>
		<span>xinxinya.com</span>
	</aside>
</article>

:first-of-type

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

HTML

<style>
article span:first-of-type {
    color: red;
}
</style>
...

<article>
	<span>banmashou.com</span>
	<aside>
		<strong>xinxinya.com</strong>
		<span>banmashou.com</span>
	</aside>
</article>

:last-child

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

HTML

<style>
article span:last-child {
    color: red;
}
</style>
...

<article>
  <span>banmashou.com</span>
  <aside>
    <strong>xinxinya.com</strong>
    <span>banmashou.com</span>
  </aside>
  <span>banmashou.com</span>
</article>

:last-of-type

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

HTML

<style>
article span:last-of-type {
    color: red;
}
</style>
...

<article>
  <span>banmashou.com</span>
  <aside>
  	<span>banmashou.com</span>
  	<strong>xinxinya.com</strong>
  </aside>
  <span>banmashou.com</span>
</article>

:only-child

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

HTML

<style>
article span:only-child {
    color: red;
}
</style>
...

<article>
	<span>banmashou.com</span>
	<aside>
		<span>banmashou.com</span>
	</aside>
</article>

:only-of-type

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

HTML

<style>
article span:only-of-type {
    color: red;
}
</style>
...

<article>
	<span>banmashou.com</span>
	<aside>
		<span>banmashou.com</span>
		<span>xinxinya.com</span>
	</aside>
</article>

:nth-child(n)

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

HTML

<style>
article span:nth-child(2) {
    color: red;
}
</style>
...

<article>
  <span>banmashou.com</span>
  <aside>
    <span>banmashou.com</span>
    <span>xinxinya.com</span>
  </aside>
  <span>banmashou.com</span>
</article>

:nth-of-type(n)

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

HTML

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

<article>
  <span>banmashou.com</span>
  <aside>
    <span>banmashou.com</span>
    <span>xinxinya.com</span>
  </aside>
  <span>banmashou.com</span>
</article>

计算数量

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

HTML

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

<table border="1">
  <tr>
    <td>banmashou.com</td>
    <td>xinxinya.com</td>
    <td>斑马兽</td>
    <td>banmashou.com</td>
    <td>xinxinya</td>
  </tr>
</table>

从第三个开始设置样式

CSS

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;
}

奇数元素

选择奇数单元格

HTML

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

<table border="1">
  <tr>
    <td>banmashou.com</td>
    <td>xinxinya.com</td>
    <td>斑马兽</td>
    <td>banmashou.com</td>
    <td>xinxinya</td>
  </tr>
</table>

偶数元素

选择偶数单元格

HTML

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

<table border="1">
  <tr>
    <td>banmashou.com</td>
    <td>xinxinya.com</td>
    <td>斑马兽</td>
    <td>banmashou.com</td>
    <td>xinxinya</td>
  </tr>
</table>

:nth-last-child(n)

从最后一个元素开始获取

HTML

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

<table border="1">
  <tr>
    <td>banmashou.com</td>
    <td>xinxinya.com</td>
    <td>斑马兽</td>
    <td>banmashou.com</td>
    <td>xinxinya</td>
  </tr>
</table>

取最后两个元素

CSS

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

:nth-last-of-type(n)

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

HTML

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

<article>
  <aside>
  	<span>banmashou.com</span>
  	<span>banmashou.com</span>
  	<strong>xinxinya.com</strong>
  </aside>
	<span>banmashou.com</span>
</article>

:not(selector)

排除第一个li元素

HTML

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

<ul>
  <li>banmashou.com</li>
  <li>xinxinya.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	验证不通过的表单

表单属性样式

HTML

<style>
input:enabled {
    background: red;
}

input:disabled {
    background: #dddddd;
}

input:checked+label {
    color: green;
}
</style>
...

<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>

表单必选样式

HTML

<style>
input:required {
    border: solid 2px blue;
}

input:optional {
	background: #dcdcdc; 
	border: none;
}
</style>
...

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

表单验证样式

HTML

<style>
input:valid {
    border: solid 1px green;
}

input:invalid {
    border: solid 1px red;
}
</style>
...

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

字符伪类

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

首字母大写

HTML

<style>
p::first-line {
 font-size: 20px;
}
</style>
...

<p>
    斑马兽
</p>

段落首行处理

HTML

<style>
p::first-letter {
    font-size: 30px;
}
</style>
...

<p>
	斑马兽
</p>

在元素前添加

HTML

<style>
span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
</style>
...

<span>斑马兽</span>

搜索框示例

HTML

<style>
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;
}
</style>
...

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

添加属性内容

HTML

<style>
h2::before {
	content: attr(title);
}
</style>
...

<h2 title="斑马兽">banmashou.com</h2>

选择器 ​

选择器 ​

基本选择器 ​

标签选择 ​

类选择器 ​

ID选择器 ​

结构选择器 ​

后代选择器 ​

子元素选择 ​

紧邻兄弟元素 ​

后面兄弟元素 ​

属性选择器 ​

伪类选择器 ​

:超链接伪类 ​

:target ​

:root ​

:empty ​

结构伪类 ​

:first-child ​

:first-of-type ​

:last-child ​

:last-of-type ​

:only-child ​

:only-of-type ​

:nth-child(n) ​

:nth-of-type(n) ​

计算数量 ​

奇数元素 ​

偶数元素 ​

:nth-last-child(n) ​

:nth-last-of-type(n) ​

:not(selector) ​

表单伪类 ​

表单属性样式 ​

表单必选样式 ​

表单验证样式 ​

字符伪类 ​

首字母大写 ​

段落首行处理 ​

在元素前添加 ​

搜索框示例 ​

添加属性内容 ​

选择器

选择器

基本选择器

标签选择

类选择器

ID选择器

结构选择器

后代选择器

子元素选择

紧邻兄弟元素

后面兄弟元素

属性选择器

伪类选择器

:超链接伪类

:target

:root

:empty

结构伪类

:first-child

:first-of-type

:last-child

:last-of-type

:only-child

:only-of-type

:nth-child(n)

:nth-of-type(n)

计算数量

奇数元素

偶数元素

:nth-last-child(n)

:nth-last-of-type(n)

:not(selector)

表单伪类

表单属性样式

表单必选样式

表单验证样式

字符伪类

首字母大写

段落首行处理

在元素前添加

搜索框示例

添加属性内容