第五章选择器的声明

时间 2019-11-12

标签第五选择器声明繁體版

原文原文链接

一、集体声明css

在声明各类CSS选择器时，若是某些选择器的风格是彻底相同的，或者部分相同，这时即可以利用集体声明的方法，将风格相同的CSS选择器同时声明。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>

对于实际网站中的一些小型网页，例如弹出的小对话框和上传附件的小窗口等，但愿这些页面中全部的标记都使用同一种CSS样式，但有不但愿逐个来加入集体声明列表，这是能够利用全局声明符号“*”。代码大大缩减，在一些小页面中特别实用。框架

<style type="text/css">
<!--
*{            /*全局声明符号*/
    color:purple;
    font-size:15px;
}
h2.special,.special,#one{     /*集体声明*/
    text-decoration:underline;
}
-->
</style>

二、选择器的嵌套网站

在CSS选择器中，还能够经过嵌套的方式，对特殊位置的HTML标记进行声明，例如当<p>与</P>之间包含<b></b>标记是，就可使用嵌套选择器进行相应的控制。spa

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

嵌套选择器的使用很是普遍，不仅是嵌套的标记自己，类别选择器和ID选择器均可以进行嵌套。code

<style type="text/css">
<!--
p b{
    color:maroon;                /*嵌套声明*/
    text-decoration:underline;
}
.special i{       /*使用了属性special的标记里面包含的<i>*/
    color:red;
}
#one li{           /*ID为one的标记里面包含的<li>*/
    padding-left:5px;
}
td.top.top1 strong{     /*多层嵌套一样使用   使用了.top类别的<td>标记中包含的.top1类别的标记，其中包含<strong>标记*/
    font-size:16px;
}
-->
</style>

<td class="top">
   <p class=".top1"> 其余内容<strong>CSS控制的部分</strong>其余内容</p>
</td>

注：在构建页面HTML框架是一般只给外层标记（父标记）定义class或者id，内层标记（子标记）能经过嵌套表示的则利用嵌套的方式，而不须要再定义新的class或者专用id。只有当子标记没法利用此规则时，才单独进行声明，例如一个ul标记中包含多个li标记，而须要对其中某个li单独设置CSS样式是才赋给该li一个单独的id或者类别，而其余li一样采用ul li{} 的嵌套方法来设置。htm

第五章 选择器的声明

第五章选择器的声明