选择器的作用是选中页面中的指定元素。
只有选中了需要的元素，我们才能够做相应的样式更改。

本文主要介绍前三种，前三种在学习初期已经够用了，后两种的选择器，有需要可以点击链接进行拓展学习。

1、基础选择器

基础选择器包括

  • 标签选择器
  • 类选择器
  • id选择器
  • 通配符选择器
  • 分组选择器

1.1 标签选择器

  • 可以快速的将同一类型都选择出来
  • 但选择的范围太广，不能做单独调整

实例：

<!DOCTYPE html>
<html>
<head>
<style>
	p {
	  text-align: center;
	  color: red;
	} 
</style>
</head>
<body>

	<p>每个段落都会受到样式的影响。</p>
	<p id="para1">我也是！</p>
	<p>还有我！</p>

</body>
</html>

页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色：

html5 文件选择器_html5 文件选择器


注： 此处给出完整代码，后文将会简写，只写出关键代码。

1.2 类选择器

  • 可以选择有特定 class 属性的 HTML 元素。
  • 为多个标签都是用一个类，更改为同一样式。

使用方法： 选择拥有特定 class 的元素，使用一个句点（.）字符，后面跟类名。
实例：
所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

<style>
	.center {
	  text-align: center;
	  color: red;
	}
</style>
<body>
	<h1 class="center">居中的红色标题</h1>
	<p class="center">居中的红色段落。</p> 
</body>

html5 文件选择器_css_02


对一个元素设置多个类：<p class="center large">这个段落引用两个类。</p>注： 类名不能以数字开头。

1.3 id选择器

  • 使用 HTML 元素的 id 属性来选择特定元素。
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)

使用方法： 使用 # 开头表示 id 选择器。
实例：

<style>
    #hello {
    	text-align: center;
        color: red;
   }
</style>
<body>
<div id="hello">Hello world！</div>
</body>

html5 文件选择器_css_03

1.4 通配符选择器

  • 使用 * 的定义, 选取所有的标签。

实例：
下面的CSS样式会影响所有的元素：

<style>
	* {
	  text-align: center;
	  color: red;
	}
</style> 
<body>
	<h1>Hello world!</h1>
	<p>页面上的每个元素都会受到样式的影响。</p>
	<p id="para1">我也是！</p>
	<p>还有我！</p>
</body>

html5 文件选择器_选择器_04

1.5 分组选择器

可以选取所有具有相同样式定义的元素。
实例：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

以上的代码对选择器进行分组，用都好分割每个选择器，则会大大缩减代码量，如下：

h1, h2, p {
  text-align: center;
  color: red;
}

2、复合选择器

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器

2.1 后代选择器

  • 又称作包含选择器。选择属于指定元素的某个子元素。
  • 使用： div p { }

示例：
选择 <div> 元素内的所有 <p> 元素：

<style>
div p {
  background-color: yellow;
}
</style>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>

html5 文件选择器_html_05

2.2 子选择器

  • 和后代选择器类似, 但是只能选择子标签。
  • 使用大于号分割，使用： div > p { }示例：
<style>
div > p {
  background-color: yellow;
}
</style>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>

html5 文件选择器_html5 文件选择器_06

2.3 相邻兄弟选择器

<style>
div + p {
  background-color: yellow;
}
</style>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。
</p>
<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>

html5 文件选择器_选择器_07

2.4 通用选择器

<style>
div ~ p {
  background-color: yellow;
}
</style>
<body>
<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>
<p>段落 1。</p>
<div>
  <p>段落 2。</p>
</div>
<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>
</body>

html5 文件选择器_前端_08

3、伪类选择器

伪类用于定义元素的特殊状态。
它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

3.2 基本的伪类选择器

示例：

<style>
/*未访问的链接 */
a:link {
  color: red;
}

/* 已经访问的链接 */
a:visited {
  color: green;
}

/* 鼠标悬停链接 */
a:hover {
  color: hotpink;
}

/* 已选择的链接 */
a:active {
  color: blue;
}
</style>
<body>
<h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p>
</body>

html5 文件选择器_css_09


html5 文件选择器_前端_10

3.1 :force伪类选择器

下面示例实现的是当鼠标选择表单时会触发的效果。
示例：

<style>
input:focus {
  background-color: yellow;
}
</style>
<body>

<form action="/action_page.php" method="get">
  账号: <input type="text" name="account"><br>
  密码: <input type="text" name="password"><br>
  <input type="submit" value="提交">
</form>

</body>

html5 文件选择器_前端_11