第四章 CSS選擇器

時間 2019-11-12

標籤第四 css 選擇器欄目 CSS 简体版

原文原文鏈接

全部HTML語言中的標記都是經過不一樣的CSS選擇器進行控制的。用戶只須要經過選擇器對不一樣的HTML標籤進行控制，並賦予各類樣式聲明，便可實現各類效果。css

一、標記選擇器html

一個HTML頁面有不少不一樣的標記組成，而CSS標記選擇器就是聲明哪些標記採用哪一種CSS樣式。例如P選擇器，就是用於聲明頁面中全部<p>標記的樣式風格。瀏覽器

CSS代碼聲明瞭HTML頁面中全部的<h1>標記，文字的顏色都採用紅色，大小都爲25px。編輯器

<style>
h1{
    color:red;
    font-size:25px;
}
</style>

每個CSS選擇器都包含了選擇器自己、屬性和值，其中屬性和值能夠設置多個，從而實現對同一個標記，聲明多種樣式風格。
函數

CSS語言對於全部屬性和值都有相對嚴格的要求，若是聲明的屬性在CSS規範中沒有，或者某個屬性的值不符合該屬性的要求，都不能使該CSS語句生效。一般狀況下能夠直接利用CSS編輯器的語法提示功能避免，但某些時候還須要查閱CSS手冊或者直接登陸W3C的官方網站（http://www.w3.org/）來查閱CSS的詳細規格說明。網站

二、類別選擇器spa

類別選擇器的名稱能夠由用戶自定義，屬性和值跟標記選擇器同樣，也必須符合CSS規範。code

當頁面中同時出現3個<p>標記，而且但願它們的顏色各不相同，就能夠經過設置不一樣的class選擇器來實現。htm

<html>
<head>
<title>class選擇器</title>
<style type="text/css">
<!--
.one{
    color:red;      /*紅色*/
    font-size:18px;     /* 文字大小*/
}
.two{
    color:green;
    font-size:20px;
}
.three{
    color:cyan;
    font-size:22px;
}
-->
</style>
</head>
<body>
    <p class="one">class選擇器1</p>
    <p class="two">class選擇器2</p>
    <p class="three">class選擇器3</p>
    <h3 class="two">h3一樣適用</h3>
</body>
</html>

不少時候頁面中幾乎全部的<p>標記都使用相同的樣式風格，只有1~2個特殊的<p>標記須要使用不一樣的風格來突出，這時能夠經過class選擇器與標記選擇器配合使用，大大提升了代碼的編寫效率。blog

<html>
<head>
<title>選擇器與標記選擇器</title>

<style type="text/css">
<!--
p{
    color:blue;              /*標記選擇器*/
    font-size:18px;
}
.special{                 /*類別選擇器*/
    color:red;
    font-size:23px;
}
-->
</style>
</head>
<body>
<p>class選擇器與標記選擇器1</p>
<p>class選擇器與標記選擇器2</p>
<p>class選擇器與標記選擇器3</p>
<p class="special">class選擇器與標記選擇器4</p>
<p>class選擇器與標記選擇器5</p>
<p>class選擇器與標記選擇器6</p>
</body>
</html>

類別選擇器還有一種很直觀的使用方法，就是直接在標記聲明後接類別名稱，以此來區別該標記
h3.special用於特殊的控制，僅僅只適用於<h3 class="special">標記，而不會影響單獨的.special選擇器。

在HTML的標記中，還能夠同時給一個標記運用多個class類別選擇器，從而將兩個類別的樣式風格同時運用到一個標記中
這在實際製做網站時每每會頗有用，能夠適當減小代碼的長度。

<html>
<head>
<title>標記選擇器.class</title>
<style type="text/css">
<!--
h3{                   /*標記選擇器*/
    color:blue;
    font-size:18px;
}
h3.special{            /*標記.類別選擇器*/
    color:red;
    font-size:23px;
}
.special{          /*類別選擇器*/
    color:green;
}
.one{         /*類別選擇器*/
    color:blue;
}
.two{        /*類別選擇器*/
    font-size:22px;
}
-->
</style>
</head>
<body>
<h3>標記選擇器.class1</h3>
<h3>標記選擇器.class2</h3>
<h3 class="special">標記選擇器.class3</h3>
<h3>標記選擇器.class4</h3>
<h3>標記選擇器.class5</h3>
<p class="special">使用於別的標記</p>


<h4>一種都不使用</h4>
<h4 class="one">同時使用兩種class，只使用第一種</h4>
<h4 class="two">同時使用兩種class，只使用第二種</h4>
<h4 class="one two">同時使用兩種class，同時使用</h4>
<h4>一種都不使用</h4>
</body>
</html>

三、ID選擇器

ID選擇器的使用方法跟class選擇器基本相同，不一樣之處在於ID選擇器只能在HTML頁面中使用一次，所以其針對性更強。

在HTML的標記中只須要利用id屬性，就能夠直接調用CSS中的ID選擇器。

<html>
<head>
<title>ID選擇器</title>
<style type="text/css">
<!--
#one{
    font-weight:bold;
}
#two{
    font-size:30px;
    color:#009900;
}
-->
</style>
</head>
<body>
<p id="one"> ID選擇器1 </p>
<p id="two"> ID選擇器2 </p>
<p id="two"> ID選擇器3 </p>
<p id="one two"> ID選擇器4 </p>
</body>
</html>

在不少瀏覽器下，ID選擇器也能夠用於多個標記，但這裏須要指出的是，將ID選擇器用於多個標記是錯誤的，由於每一個標記定義的id不僅是CSS能夠調用，JavaScript等其餘腳本語言一樣也能夠調用。
若是一個HTML中有兩個相同的id標記，那麼將會致使JavaScript在查找id是出錯，如函數getElementById()

網站建設者在編寫CSS代碼時，應該養成良好的編寫習慣，一個id最多隻能賦予一個HTML標記

ID選擇器不支持想class選擇器那樣的多風格同時使用，相似id=「one two」是徹底錯誤的語法。

相關標籤/搜索

每日一句

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