CSS选择器的声明与嵌套

来源：互联网发布：阿里云青岛节点编辑：程序博客网时间：2024/06/08 04:04

CSS选择器的声明与嵌套

使用CSS选择器控制HTML标记的时候，每个选择器的属性可以一次声明多个，选择器本身也可以同时声明多个。

并且，任何形式的选择器，都是合法的，标记选择器，class选择器和ID选择器都可以集体声明。

集体声明

在声明CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以使用集体声明的方式，将风格相同的选择器同时声明。

<span style="font-size:24px;"><html><head><title>集体声明</title><style type="text/css"><!--h1,h2,h3,h4,h5,p{color:purple;font-size:15px;}h2.special,.special,#one{text-decoration:underline;}--></style></head><body><h1>集体声明h1</h1><h2 class="special">集体声明h2</h2><h3>集体声明h3</h3><h4>集体声明h4</h4><h5>集体声明h5</h5><p>集体声明p1</p><p class="special">集体声明p2</p><p id="one">集体声明p3</p></body></html></span>

全局声明

对于实际网站中，如果希望页面中所有的标记都使用同一种CSS样式，但是，又不希望逐个来集体声明，这是可以使用全局声明符号*来声明。

<span style="font-size:24px;"><html><head><title>集体声明</title><style type="text/css"><!--*{color:purple;font-size:15px;}h2.special,.special,#one{text-decoration:underline;}--></style></head><body><h1>集体声明h1</h1><h2 class="special">集体声明h2</h2><h3>集体声明h3</h3><h4>集体声明h4</h4><h5>集体声明h5</h5><p>集体声明p1</p><p class="special">集体声明p2</p><p id="one">集体声明p3</p></body></html></span>

可以看出两种声明效果完全一样，但是，使用全局声明会使代码大大的减少。

选择器的嵌套

在CSS选择器中，可以使用嵌套的方式，对特殊位置的HTML标记进行声明。

比如，控制p标记中的b标记

<span style="font-size:24px;"><html><head><title>CSS选择器的嵌套声明</title><style type="text/css"><!--p b{color:maroon;text-decortion:underline;}--></style></head><body><p>嵌套使<b>用CSS</b>标记的方法</p>嵌套之外的<b>标记</b>不生效</body></html></span>

嵌套选择器，使用非常的广泛，不仅只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。

下面的代码使用了三层嵌套，实际上更多层次的嵌套都是允许的，表示.top类别的<td>标记中，包含的.top1类别的<p>标记，其中包含的<strong>标记，所声明的样式风格。

<span style="font-size:24px;">td.top .top1 strong{font-size:16px;}<td class="top"><p class="top1">其他内容<strong>CSS控制的部分</strong>其他内容</p></td></span>

选择器的嵌套，在CSS中可以大大减少对class和id的声明，因此，在构建页面的HTML时，通常只给外层标记定义class或者id，内层标记能通过嵌套表示的则利用嵌套的方式，从而，不需要再定义新的class或者id，只有当子标记无法利用此规则时，才进行单独的声明。

0 0