CSS基础学习四：元素选择器
最后更新于：2022-04-01 11:29:16
在上一篇的博客中我们已经熟悉CSS语法，对于CSS代码格式也有了一些认识。下面我就来说一下CSS代码式：
选择器名称 { 属性名：属性值；属性名：属性值；......}
属性与属性之间用分号隔开；属性与属性值直接使用冒号连接；如果一个属性有多个属性值的话，那么多个属性值用空格隔开。
上述提到了我这一篇博客所要说的主题，就是选择器。选择器就是指定CSS语法要作用的标签，那个标签的名称
就是选择器。
基本的选择器可分为三种：
a)html标签名选择器：使用的是html的标签名，又叫元素选择器。
b)class选择器;使用的是标签内的class属性，又叫类选择器。
c)id选择器：使用的是标签内的id属性。
每一个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。在定义中，多个标签的
class属性值可以相同，而id属性值必须唯一，因为JavaScript中经常使用。
### 一,CSS元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选
择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
下面举个最简单的例子：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
html {color:#00FFFF;}
h1 {color:#FFFF00;}
h2 {color:#FF0000;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落</p>
</body>
</html></span>
~~~
浏览器显示结果为：
从上述的结果来看选择器的优先级还是有一定的选择性的，html选择器作用的是网页中的全部字体，而h1和h2作
用的仅仅是自己标签名的标签。
可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本（而不是 h1 元素）设置为p。只
需要把 h1 选择器该为 p：
~~~
<span style="font-size:18px;">html {color:#00FFFF;}
p {color:#FFFF00;}
h2 {color:#FF0000;}</span>
~~~
浏览器显示结果为：
### 二,选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这
两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将
完全不同。还是上述的例子：
~~~
<span style="font-size:18px;">html {color:#00FFFF;}
h2,p{color:#FFFF00;}</span>
~~~
浏览器显示结果为：
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
再举一个简单的示例：
以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
~~~
<span style="font-size:18px;">/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}</span>
~~~
使用第二种代码为：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {color:blue;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<h5>这是 heading 5</h5>
<h6>这是 heading 6</h6>
</body>
</html></span>
~~~
浏览器显示结果为：
三通配符选择器(感觉还是划分到元素选择器比较好，说到底还是用标签名的一类选择器)
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与
任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：* {color:red;}这个声明等价于列出了文档中所有元素的一
个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html></span>
~~~
浏览器显示结果为：
### 四,声明分组
我们既可以对选择器进行分组，也可以对声明分组。
假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
~~~
<span style="font-size:18px;">h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}</span>
~~~
但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，
我们可以将声明分组在一起：
~~~
h1 {font: 28px Verdana; color: white; background: black;}
~~~
这与前面的 3 行样式表的效果完全相同。
注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。
### 五,结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
~~~
浏览器显示：
涉及到选择器优先级的问题，我会用专门的一篇博客来解释说明这个问题。