?CSS高級語法怎么使用

這篇文章主要介紹了CSS高級語法怎么使用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS高級語法怎么使用文章都會有所收獲，下面我們一起來看看吧。

CSS高級語法

1. 選擇器分組

可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h2,h3,h3,h4,h6,h7 {
  color: green;
  }

2. 繼承及其問題

根據 CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規則：

body {
     font-family: Verdana, sans-serif;
     }

根據上面這條規則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統中存在該字體的話）。

通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。在大部分的現代瀏覽器中，確實是這樣的。但是在那個瀏覽器大戰的血腥年代里，這種情況就未必會發生。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用于 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題，在表格內的字體樣式會被忽略。我們又該如何是好呢？

 辦法：

//:定義一個父元素風格，應用于整體
body  { 
     font-family: Verdana, sans-serif;
     }
//:采用組選擇器來預防某些瀏覽器拒絕繼承
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
//:如果某子元素不愿繼承風格，可以定義特殊規則來擺脫父元素規則
p  {
     font-family: Times, "Times New Roman", serif;
     }

3. 派生選擇器

派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

//:當<strong>元素位于<li>元素內部時，字體為italic,否則，字體為粗體
li strong {
    font-style: italic;
    font-weight: normal;
  }

例子：

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

下面是它施加影響的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h3>This subhead is also red.</h3>
<h3>The strongly emphasized word in this subhead is<strong>blue</strong>.</h3>

4. id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個定義屬性id=”red”的元素的顏色為紅色，第二個定義id=”green”的元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

注意：id 屬性只能在每個 HTML 文檔中出現一次。

5. id選擇器+派生選擇器

在現代布局中，id 選擇器常常用于建立派生選擇器。

#sidebar p {
         font-style: italic;
         text-align: right;
         margin-top: 0.5em;
         }

上面的樣式只會應用于出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內聯元素 <span> 中嵌入 <p>。

6.類選擇器

類選擇器以一個點號（.）顯示：

.center {text-align: center}

所有擁有 center 類的 HTML 元素均為居中。在下面的 HTML 代碼中，h2 和 p 元素都有 center 類。這意味著兩者都將遵守".center" 選擇器中的規則。

<h2 class="center">
This heading will be center-aligned
</h2>
<p class="center">
This paragraph will also be center-aligned.
</p>

注意：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

 1> 類選擇+派生選擇

.fancy td {
         color: #f60;
         background: #666;
         }

在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

2>派生選擇+類選擇

td.fancy {
         color: #f60;
         background: #666;
         }

在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色，而其他的元素不會受到影響。

關于“CSS高級語法怎么使用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS高級語法怎么使用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。