溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“CSS的基本選擇器怎么使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“CSS的基本選擇器怎么使用”文章吧。
CSS 選擇器用于“查找”（或選取）要設置樣式的 HTML 元素。
| 選擇器名稱 | 舉例 | 描述 |
|---|---|---|
| 元素選擇器 | p {color:red;} | 選擇所有<p>元素。 |
| 類選擇器 | .mystyle {color:red;} | 選擇所有class='mystyle’的標簽元素 |
| id選擇器 | #myid {color:red;} | 選擇所有id="myid"的標簽元素 |
全局選擇器|* {color:red;}|選擇該頁面中所有的HTML元素
1、元素選擇器
根據元素名稱來選擇 HTML 元素。
p {
text-align: center;
color: green;
}2、類選擇器
選擇有特定 class 屬性的 HTML 元素。
.mystyle1 {
background:rgb(200,200,0);
color:blue;
}
.mystyle2{
font-size: 14px;
font-weight: 500;
display: block;
margin-top: 25px;
}運行結果
<p>這個段落沒有引用</p> <p class="mystyle1 mystyle2">這個段落引用兩個類。</p>
在使用時同一個HTML 元素可以引用多個類。
1）單類選擇器
單純的元素選擇器似乎還過于粗糙了，比如我們希望在文檔中突出加粗顯示某種重要的內容，例如稿件的截至日期。問題在于我們不能確定稿件的截至日期將會出現在哪種元素中，或者它可能出現在多種不同的元素中。這個時候，我們可以考慮使用類選擇器(class selector)。使用類選擇器我們需要首先對文件元素添加一個class屬性，比如截至日期可能會出現在以下元素中：
這樣我們就可以用以下方式使用類選擇器了：
點號”.”加上類名就組成了一個類選擇器。以上2個選擇器會選擇所有包含”deadline”類的p元素和h3元素。而其余包含該屬性的元素則不會被選中。如果我們省略.deadline前面的元素名，那么所有包含該類的元素都將被選中：
通常情況下，我們會組合使用以上2者得到更加有趣的樣式：
以上代碼首先會對所有的包含deadline的元素字體設置為紅色，同時會對span元素中的文本添加額外的斜體效果。這樣，如果你希望某處文本擁有額外的斜體效果將它們放在<span></span>中就可以了。
2）多類選擇器
在實踐的做法中，元素的calss屬性可能不止包含一個單詞，而是一串單詞，各個單詞之間用空格隔開。
比如某些元素包含一個”warning”類，某些元素包含一個”important”類，某些元素同時包含”warning important”類。屬性名出現的順序沒有關系：
以上2者是等價的。
我們希望包含warning類的元素有一個醒目的紅色字體，包含important屬性的元素有一個加粗的字體顯示，而同時包含以上2中屬性的元素另外擁有一個藍色背景(不管還能不能看清文字了)，我們可以使用以下的css代碼：
當然，第三條你也可以寫成：
和詞序沒有關系。
說明一下，.warning會匹配所有包含warning屬性的元素，不管該元素還包含多少其他的屬性。.important同理。
而.important.warning會匹配所有同時包含以上2種屬性的元素，不管該元素還包含多少其他的類，也不管他們在類列表中出現的順序，只要其中含有這2個屬性，則會被選擇進來！
同樣地，多于多類選擇器，在前面加上元素名，則會匹配包含指定類名的指定元素，例如：
將會匹配同時包含warning和important屬性的p元素，其他同樣包含以上2類的元素則不會被選中。
3、id選擇器
ID選擇器和類選擇器有些類似，但是差別又十分顯著。
首先一個元素不能像類屬性一樣擁有多個類，一個元素只能擁有一個唯一的ID屬性。其次一個ID值在一個HTML文檔中只能出現一次，也就是一個ID只能唯一標識一個元素(不是一類元素，而是一個元素)。
元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇一個唯一的元素！
在樣式定義時，id選擇器前面要添加’#'符號
#div1{
background:rgb(200,200,0);
color:blue;
font-size:20px;
}運行結果
<p>這是一個段落</p> <p id="div1">這是一個段落</p>
注意：由于id屬性的唯一性，一般使用css做樣式不使用該選擇器，而該選擇器的主要用途是用來做js特效
問題引入
如果有多個選擇器選擇到了同一個HTML元素，要將其樣式進行改變，但是這些選擇器定義的樣式又是互斥的，那么該HTML元素的樣式最終以哪一個作為最終顯示結果呢？
瀏覽器根據css樣式渲染某一個元素時，會遵循一定的規則，一般來說有以下的優先級規則，我們將其量化為特異性值
行內樣式（1000），如<h2 style="color: blue;">
id選擇器（100），#myid{color:red;}
類選擇器、屬性選擇器、偽類選擇器（10）：.myclass1{color:yellow;}、a[target=_blank]
元素選擇器（1）：h2 {color:green;}
下面我們來看一個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>這是一個demo</title>
<style>
#myid{color:red;}
.myclass1{color:yellow;}
h2,p {color:green;}
</style>
<body>
<h2 style="color: blue;" id="myid">這是一個標題，請查看優先級</h2>
<p id="myid">這是一個段落，請查看優先級</p>
</body>
</head>
</html>我們可以看到因為標簽<h2>有行內樣式，所以它顯示為了藍色；
而標簽<p>雖然定義了三種css樣式，但是由于id選擇器的優先級最高，所以顯示為了紅色
以上就是關于“CSS的基本選擇器怎么使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
