CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

judyge

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量313

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

样式由Selector（选择器）、属性（Property）和属性值（Value）等三部分组成。

CSS选择器可以使我们全面控制网页的展现效果，它明确指出了网页上需要设置格式的一个或多个元素。

下面简单列出了各个选择器的语法格式及实例。

标签选择器的语法格式

标签选择器的语法格式有两种形式：

1. 语法格式及实例一

最简单地CSS语法格式：

selector {property: value}

选择器（selector）一般是需要改变样式的html元素。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值（value）。属性和值用冒号分开。

实例：

p {color: red}

p是选择器，color是属性，red是属性值。

2. 语法格式及实例二

如果要为样式（Style）添加多个属性，在两个属性之间要用分号分开：

selector {property1: value1; property2: value2; ...propertyN: valueN}

实例：

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

这个样式包含2个属性，一个是text-align属性，它的属性值是center，一个是color属性，它的属性值是red，两个属性之间用分号隔开了。

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，如下所示：

p {
  font-family: "宋体";
  text-align: center;
  color: red
}

类选择器的语法格式

类选择器可以定义成下面的语法格式：

.class{property: value}

上面的语法格式是直接用.加上class名作为一个选择器（selector）。

实例：

.center {text-align: center}

这种通用的类选择器（class selector）可以用于不同的html标签。比如：

<h2 class = "center">这个标题居中显示。</h2>
<p class = "center">这个段落居中显示。</p>

源代码如下：

<!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语法类选择器语法格式示例-www.baike369.com</title>
<style type="text/css">
<!--
.center {text-align: center}
-->
</style>
</head>
<body>
<h1>CSS语法类选择器语法格式示例</h1>
<h2 class = "center">这个标题居中显示。</h2>
<p class = "center">这个段落居中显示。</p>
</body>
</html>

在浏览器中查看CSS语法类选择器语法格式的显示效果。如下图所示：

查看CSS语法类选择器语法格式的显示效果

id选择器的语法格式

id选择器与类选择类似，可以定义成下面的语法格式：

#class{property: value}

上面的语法格式是直接用#加上id名作为一个选择器（selector）。

实例：

#center {text-align: center}

这种通用的id选择器也可以用于不同的html标签。只是在html网页中只能使用一次，比如：

<h2 id = "center">这个标题居中显示。</h2>
<p id = "center">这个段落居中显示。</p>

交集选择器的语法格式

交集选择器可以定义成下面的语法格式：

selector.class{property: value}

实例：

p.right {text-align:right}
p.center {text-align:center}

其中right和center就是两个class。只有p标记可以引用这两个class，其它html标记引用这两个class是无效的。示例代码如下：

<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>

源代码如下：

<!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语法交集选择器语法格式示例-www.baike369.com</title>
<style type="text/css">
<!--
p.right {text-align:right}
p.center {text-align:center}
-->
</style>
</head>
<body>
<h1>CSS语法交集选择器语法格式示例</h1>
<p class="center">这一段居中显示。</p>
<p class="right">这一段是居右显示。</p>
</body>
</html>

在浏览器中查看CSS语法交集选择器语法格式的显示效果。如下图所示：

查看CSS语法交集选择器语法格式的显示效果

并集选择器的语法格式

在并集选择器中，可以将相同的属性和属性值赋予多个Selector。Selector之间用逗号分隔。

selector1,selector2,...selectorN {
  property1: value1;
  property2: value2;
  ...
  propertyN: valueN
}

注：两个selector之间要用","隔开。

实例：

h1,h2,h3,h4,h5,h6 {
  color: red
}

上面的实例是将所有文本标题（<h1>到<h6>）的字体颜色都设置为红色。

注：当有多个属性的时候，必须在两个属性之间用";"分隔开。

后代选择器的语法格式

后代选择器可以定义成下面的语法格式：

selector1 selector2 ...selectorN {
  property1: value1;
  property2: value2;
  ...
  propertyN: valueN
}

注：两个selector之间要用空格分隔开。

实例：

strong {
  color: blue;
}
h2 {
  color: blue;
}
h2 strong {
  color: red;
}

上面定义的是strong选择器在h2里要使用的样式规则。strong这个标记嵌套在h2里面。h2 strong就叫做Contextual Selector，它是定义嵌套在h2内的strong的样式。

下面是strong选择器在html中的使用方法：

<p>strong在这里是<strong>蓝色</strong>的。</p>
<h2>h2是蓝色的，而strong在这里是<strong>红色</strong>的。</h2>

源代码如下：

<!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语法后代选择器语法格式示例-www.baike369.com</title>
<style type="text/css">
<!--
strong {
  color: blue;
}
h2 {
  color: blue;
}
h2 strong {
  color: red;
}
-->
</style>
</head>
<body>
<h1>CSS语法后代选择器语法格式示例</h1>
<p>strong在这里是<strong>蓝色</strong>的。</p>
<h2>h2是蓝色的，而strong在这里是<strong>红色</strong>的。</h2>
</body>
</html>

在浏览器中查看CSS语法后代选择器语法格式的显示效果。如下图所示：

查看CSS语法后代选择器语法格式的显示效果