CSS 选择器（选择符）

￡神魔★判官ぃ 2022-08-27 08:51 289阅读 0赞

# CSS 选择器（选择符） #

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

关于选择器

每一条css样式定义由两部分组成，形式如下： \[code\] 选择器\{ 样式\} \[/code\] 在\{\}之前的部分就是“选择器”。 “选择器”指明了\{\}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

## 1.HTML标签选择符 ##

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签

采用相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总

是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里

都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{
    font-size:12px;
    background:#900;
    color:090;
    }

复制代码则页面中所有p标签的背景都是\#900(红色)，文字大小均是12px，颜色为\#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

## 2.类（别）选择符 ##

class类选择符匹配文档中元素E的class属性的属性值为classname的元素

语法：标记名.类名\{ 属性：值\}或 .类名\{ 属性：值\}

类选择符名称的定义方式是，"."英文dot,后加类名称classname

类选择器根据类名来选择。前面以”.”来标志，如：

.demoDiv{
    color:#FF0000;
    }

在HTML中，元素可以定义一个class的属性。

如：

<div class="demoDiv">
    这个区域字体颜色为红色
    </div>
    同时，我们可以再定义一个元素：
    <p class="demoDiv">
    这个段落字体颜色为红色
    </p>

最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。

上例我们给两个元素(div元素和p元素)都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。

我们可以改成这样来定义。

<div class="demoDiv">
    <div>
    这个区域字体颜色为红色
    </div>
    同时，我们可以再定义一个元素：
    <p>
    这个段落字体颜色为红色
    </p>
    </div>

这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。

代码示例：

采用外部式样表。首先创建一个css文件，命名为 selectclass.css，添加下面的代码：

.demoDiv{
    color:#00FF00;
    background:red;
    font-size:50px;
    }

说明：selectclass.css 存放在文件夹 CSS test 中

再创建一个html文件，命名为 selectclass.html ，它和文件夹 CSS test位于相同的目录。向selectclass.html中添加下面的代码：

<html>
    <head>
      
      <link rel="stylesheet" type="text/css" href="./CSS test/selectclass.css" />
      <style>
          hr{width:500px;}
          p{color:bule}
          p.dark{background:#0000ff;font-size:30px;}
      </style>
    </head>
     
    <body>
      <div class="demoDiv">
         这个区域字体颜色为红色
         <p>222222222222222</p>
         <p style="color:blue;font-size:10px;">111111111111111111</p>
      </div>
     
      <p class="demoDiv">
         这个段落字体颜色为红色
      </p>
     
      <hr>
         <p style="color:green;font-size:50px;">111111111111111111</p>
         <p>222222222222222</p>
         <p>333333333333333</p>
      </hr>
     
      <p class="dark">line111111111111</p>
      <p>line22222222222222</p>
     
    </body>
    </html>

运行结果示意图：

![Center][]

图2-1 class选择符页面示意图

注：这里可以顺便总结一下样式表的优先级：“就近原则”，这个可以对照示例代码自己去理解。

## 3.ID选择符 ##

根据元素ID来选择元素，具有唯一性。

前面以”\#”号来标志，在样式里面可以这样定义：

\#demoDiv\{

color:\#FF0000;

这里代表id为demoDiv的元素的设置它的字体颜色为红色。

我们在页面上定义一个元素把它的ID定义为demoDiv，如：

这个区域字体颜色为红色

</div>

用浏览器浏览，我们可以看到因为区域内的颜色变成了红色

再定义一个区域

<div>

这个区域没有定义颜色

</div>

用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。

示例：

新建一个html文件，命名为：selectid.html 。添加下面的代码：

<html>
    <head>  
      <style>
          #light{
    background:#ff0000;font-size:50px;color:blue;
          }
      </style>
    </head>
     
    <body>
      <p id="light">这个段落字体颜色为红色</p>
      <p>这个段落没有添加样式 line22222222222222</p>
    </body>
    </html>

运行后，页面效果如图3-1所示：

![Center 1][]

图3-2 ID选择符页面示意图

## 4.其他选择符 ##

CSS选择器还有其他的类型，暂时只学习这3种最基本的类型，其他的后续用到时再做理会。

总结

•html标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 p\{font-size:12px;\}

•id选择符,唯一性选择符,比如 \#dreamdured\{color:red;\},就是在名字前增加了一个\#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).

•class选择符,多重选择符,比如.dreamdublue\{color:blue;\},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).

id与class选择符在CSS与HTML中的用法总结

CSS中的写法  XHTML中的写法

xhtml标签选择符 p\{font-size:12px;\}  <p>www.dreamdu.com</p>