CSS 选择器（选择符）

最新推荐文章于 2024-06-19 15:19:49 发布

法哥2012

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量1k

点赞数

分类专栏： html/css/javascript 文章标签： css 选择器选择符

本文链接：https://blog.csdn.net/shufac/article/details/26518749

版权

html/css/javascript 专栏收录该内容

7 篇文章 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>
  <!--链接在当前目录文件夹CSS test下的selectclass.css文件-->
  <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>

运行结果示意图：

图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所示：