使用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类别的b6c5a531a458a2e790c1fd6421739d1c标记中,包含的.top1类别的e388a4556c0f65e1904146cc1a846bee标记,其中包含的8e99a69fbe029cd4e2b854e244eab143标记,所声明的样式风格。
<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,只有当子标记无法利用此规则时,才进行单独的声明。
以上是什么是选择器的声明与嵌套? CSS选择器的声明与嵌套 的详细内容。更多信息请关注PHP中文网其他相关文章!