第五章選擇器的聲明

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

第五章 選擇器的聲明

第五章選擇器的聲明