溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css的基本選擇器有哪些”，在日常操作中，相信很多人在css的基本選擇器有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css的基本選擇器有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
css的基本選擇器有：1、通配符選擇器；2、標簽選擇器；3、類選擇器；4、Id選擇器；5、結合元素選擇器；6、多類選擇器。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
基本選擇器又分為六種使用方式：如、通配符選擇器、標簽選擇器、類選擇器、Id選擇器、結合元素選擇器、多類選擇器。
基本選擇器使用說明表。
| 選擇器 | 語法格式 | 含義 | 舉例 |
|---|---|---|---|
| 通配符選擇器 | *{屬性：值;} | 通用選擇器可以選擇頁面上的所有元素，并對它們應用樣式，用 * 來表示。不建議使用，IE6不支持，給大型網站增加負擔。 | *{width: 300px;} |
| 標簽選擇器 | 標簽名{屬性：值;} | 標簽選擇器，匹配對應的HTML的標簽。 | h2{color: red;} |
| 類選擇器 | .class屬性值{屬性：值;} | 類選擇器，給擁有指定的class屬性值的元素設置樣式。 | .box{color: red;} |
| Id選擇器 | #id屬性值{屬性：值;} | Id選擇器，在一個 HTML 文檔中，Id 選擇器會使用一次，而且僅一次。Id選擇器以#來定義。 | #box{color: red;} |
| 結合元素選擇器 | 標簽名 .class屬性值{屬性：值} | 選擇器會根據標簽名中包含指定的.class屬性值的元素。 | p.box {color:red;} |
| 多類選擇器 | .class屬性值.class屬性值{屬性：值;} | 通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。注意：在 IE7 之前的版本中，不同平臺的 Internet Explorer 都不能正確地處理多類選擇器。 | .box.box1{color:red;} |
接下來讓我們進入通用選擇器實踐，筆者以嵌入式的形式，將HTML頁面中的h2標簽和p標簽中的字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符選擇器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h2>億速云</h2>
<p>億速云</p>
</body>
</html>結果圖
接下來讓我們進入標簽選擇器實踐，筆者以嵌入式的形式，將HTML頁面中的h2標簽和p標簽中的字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽選擇器</title>
<style>
h2 {
color: red;
}
</style>
</head>
<body>
<h2>億速云</h2>
<p>億速云</p>
</body>
</html>結果圖
注意：標簽選擇器是指給指定的標簽設置樣式。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽選擇器</title>
<style>
h2 {
color: red;
}
</style>
</head>
<body>
<h2>成功不是擊敗別人，而是改變自己。</h2>
<h2>億速云</h2>
<p>億速云</p>
</body>
</html>結果圖
現在大家應該知道了p標簽為什么沒有改變了，因為標簽選擇器的作用是給指定的標簽設置樣式的，接下來筆者將p標簽的字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>標簽選擇器</title>
<style>
h2 {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<h2>成功不是擊敗別人，而是改變自己。</h2>
<h2>億速云</h2>
<p>億速云</p>
</body>
</html>結果圖
接下來讓我們進入類選擇器實踐，筆者以嵌入式的形式，使用類的屬性值為.box，來完成HTML頁面中的h2標簽和p標簽中的字體顏色設置為紅色。
首先我們將HTML頁面中的第一個h2標簽字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<h2 class="box">成功不是擊敗別人，而是改變自己。</h2>
<h2>億速云</h2>
<p>億速云</p>
</body>
</html>結果圖
注意：只要是class屬性的值為.box的標簽，不管它是什么標簽，都會將字體顏色設置為紅色，其余的CSS樣式也是一致。
現在我們將第二個h2標簽和p標簽字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.box{
color:red;
}
</style>
</head>
<body>
<h2 class="box">成功不是擊敗別人，而是改變自己。</h2>
<h2 class="box">億速云</h2>
<p class="box">億速云</p>
</body>
</html>結果圖
接下來讓我們進入id選擇器實踐，筆者以嵌入式的形式，通過id屬性值為#box，將HTML頁面中的h2標簽中的字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
<style>
#box {
color: red;
}
</style>
</head>
<body>
<h2 id="box">成功不是擊敗別人，而是改變自己。</h2>
</body>
</html>結果圖
注意：使用id選擇器是給擁有指定的id屬性值來設置樣式，但是要注意在一個HTML頁面中id的屬性值必須是唯一的。
接下來讓我們進入結合元素選擇器實踐，筆者以嵌入式的形式，通過h3標簽class屬性值為.box元素的字體顏色，設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>結合元素選擇器</title>
<style>
h3.box {
color: red;
}
</style>
</head>
<body>
<h3 class="box">成功不是擊敗別人，而是改變自己。</h3>
<span class="box">成功不是擊敗別人，而是改變自己。</span>
</body>
</html>結果圖
注意：結合元素選取器執行原理說明如下：首先是先找到h3標簽，然后再去h3標簽中找class屬性值為.box，如果找到class屬性值為.box就給其設置樣式。現在大家應該知道了span標簽下面的class屬性值為.box為什么沒有渲染的原因了。
接下來讓我們進入多類選擇器實踐，筆者以嵌入式的形式，將class屬性值包含.box和.box1元素的字體顏色設置為紅色。
代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多類選擇器</title>
<style>
.box.box1 {
color: red;
}
</style>
</head>
<body>
<h3 class="box1 box">成功不是擊敗別人，而是改變自己。</h3>
<span class="box box1">成功不是擊敗別人，而是改變自己。</span>
<h3 class="box1 ">億速云</h3>
<span class="box">億速云</span>
</body>
</html>
注意：多類選擇器執行原理說明如下：首先class屬性值可以設置為多個以空格隔開即可，舉例：如果一個class屬性值包含.box和.box1將其設置樣式，通過把兩個類選擇器鏈接在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。如果一個多類選擇器包含類名列表中沒有的一個類名，匹配就會失敗。現在大家應該知道了單獨的class屬性值為.box和.box1沒有被渲染了。
到此，關于“css的基本選擇器有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
