选择器

beyes · 发表于 2015-12-23 01:14:18

选择器就是要告诉 CSS 作用于哪个元素之上，可以分为下面几类：

HTML 选择器

针对 HTML 标签的选择器。

Class 选择器

针对 class 的选择器。

ID 选择器

针对 ID 的选择器。

关联选择器

该样式和某个有关联的。比如某个 <p> 里头有个 <span> ，那么该 <span> 就是和这个 <p> 有关联的（父子关系），特定的 css 也就作用在该 <span> 上，而不是其它地方的 <span> 。

组合选择器

把多个标签定义成一种样式。这里又包含 3 种：1 多元素选择器；2. 子元素选择器； 3. 后代选择器

伪元素选择器

对一个标签的不同状态定义不同的样式。比如一个超链接，有鼠标悬停其上，离开，点击等不同的状态，那么可以针对这些状态分别定义不同的样式。

简单的说，选择器就是在 CSS 中创建，然后在网页页面中使用，这些网页页面可以是 html, php, jsp, asp.net 等。

下面以实例来说明上述概念。

HTML 选择器演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
div { font-size:20px; border:solid 1px #FF0000; margin-bottom:20px; }
body { background-color:#B7AAAA; }
</style>
</head>
<body>
<div>
曲径通幽
</div>
<div>
http://www.groad.net
</div>
</body>
</html>

复制代码

上面代码针对 <div> 和 <body>两个 html 元素进行 css 描述，如下图所示：

class 选择器演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.groad { background-color:#BBEAF0; }
</style>
</head>
<body>
<div class="groad">
曲径通幽
</div>
<div>
http://www.groad.net
</div>
</body>
</html>

复制代码

上面代码中，.groad 就是 class 选择器，注意它以 . 符号开始。我先定义了一个名为 .groad 的 class 。在第 1 个 div 中，通过 class="groad" 声明它使用该样式（注意，此处不能再写上 . 这个符号），如果你愿意，第 2 个 div 同样可以使用该样式。注意，用了 class 后，就不能再在其后继续写样式的语句了。

ID 选择器演示：

id 是标识网页唯一元素的一个属性。网页中的 id 是不能同时存在多个的，虽然在 CSS 的测试应用中，也有效果，但实际使用中是不能这么做的，特别是和 js 脚本结合起来时，如果存在多个相同的 id，脚本都不知道处理哪个好，这样势必会出错。

class 的样式名字以 . 开头，而 id 的名字要以 # 符号开头。查看下面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
#groad { background-color:#BBEAF0; }
</style>
</head>
<body>
<div id="groad">
曲径通幽
</div>
<div>
http://www.groad.net
</div>
</body>
</html>

复制代码

关联选择器演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.groad p{ font-size:35px; }
</style>
</head>
<body>
<p>
曲径通幽
</p>
<div class="groad">
<p>
在 div 里的曲径通幽
</p>
</div>
</body>
</html>

复制代码

效果：

用关联选择器的方便之处：

比如将上面的 css 代码改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.groad { font-size:35px; }
</style>
</head>
<body>
<p>
曲径通幽
</p>
<div>
<p class="groad">
在 div 里的曲径通幽
</p>
</div>
</body>
</html>

复制代码

有人说，我不用作用于 p 标签，而是直接像上头那样直接使用 class="groad" 不也可以吗？确实可以，但是如果这样的 <p> 标签有许多条，而且都打算用 groad 这个样式，那岂不是要每条都要这么写？但如果样式里写成 .groad p { font-size:35px; }，那么就能应用所有该 <div> 底下的 <p> 标签了。看下面代码演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.groad p{ font-size:35px; color:#F70D11; }
</style>
</head>
<body>
<p>
曲径通幽
</p>
<div class="groad" >
<p>
曲径通幽-1
</p>
<p>
曲径通幽-2
</p>
<p>
曲径通幽-3
</p>
<h1>hello</h1>
</div>
</body>
</html>

复制代码

效果：

注意，hello 并没有被加红。

组合选择器演示：

组合型选择器使用逗号分隔，如下代码所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
div,p{ font-size:35px; color:#F70D11; }
</style>
</head>
<body>
<p>
曲径通幽
</p>
<div>
http://www.groad.net
</div>
</body>
</html>

复制代码

效果：

在 <style> 标签里，div 和 p 是用逗号隔开的。像 class 和 html 这样的标签也是可以的，如 .groad, p { font-size:35px; color:#F70D11; } ，此时注意，class 的名字前面有个点。

再看一个例子，这里使用了组合选择器和关联选择器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.k1,.k2{ font-size:25px;}
.k1 a { color:#F00;}
.k2 a { color:#30C;}
</style>
</head>
<body>
<div class="k1">
<a href="#">块1中的链接-1</a>
<br>
<a href="#">块1中的链接-2</a>
</div>
<hr>
<div class="k2">
<a href="#">块2中的链接-1</a>
<br>
<a href="#">块2中的链接-2</a>
</div>
</body>
</html>

复制代码

效果：

这里，.k1 和 .k2 使用了组合选择器，只要使用一条语句，就能将两个块中的字体大小定义成一样的。使用关联选择器分别对两个 div 中的链接定义了不同的颜色。

伪元素选择器演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style>
.k1,.k2{ font-size:25px;}
.k1 a { color:#F00; text-decoration:none;}
.k1 a:hover {color:#2540DD; background-color:#DAE43C}
.k2 a { color:#30C;}
</style>
</head>
<body>
<div class="k1">
<a href="#">块1中的链接-1</a>
<br>
<a href="#">块1中的链接-2</a>
</div>
<hr>
<div class="k2">
<a href="#">块2中的链接-1</a>
<br>
<a href="#">块2中的链接-2</a>
</div>
</body>
</html>

复制代码

上面说过，伪元素选择器就是对一个标签的不同状态进行描述。在 k1 的两个链接中，通过 .k1 a:hover 定义了只要鼠标悬停在链接上，就会有字体是蓝色，而背景是黄色的效果。另外， text-decoration:none 表示不加文本修饰，这里的目的是去掉超链接的下划线。超链接的下划线是默认添加的，但现在一般都不这么用，因为超链接多起来后，都添加上下划线看起来很难看。

beyes · 发表于 2016-12-18 02:04:49

一个元素可以同时有 id 选择器和类选择器，其中 id 选择器的优先级要高于类选择器。

考察下面代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title> id选择器 和 类选择器的优先级演示 </title>
 
  <style type="text/css">
  
  	.p1 {
  			color:red;
  	}
  	#p2 {
  		color:blue;
  	}
  	
  </style>
 </head>
 <body>
  	
  		<p class="p1" id="p2">曲径通幽</p>
  
 </body>
</html>

结果 “曲径通幽” 这几个字为蓝色显示，而不论 #p2 是否放在 .p1 之前或之后，因此说 id 选择器的优先级要高于类选择器。

		自动登录	找回密码
密码			立即注册

[CSS] 选择器

本帖子中包含更多资源

id 选择器的优先级要高于类选择器

浏览过的版块