Web前端入門學(xué)習(xí)（3）——CSS選擇器

發(fā)布時間：2020-07-27 20:02:14 來源：網(wǎng)絡(luò) 閱讀：451 作者：小倩_小倩欄目：開發(fā)技術(shù)

CSS選擇器

id選擇器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
#box{width:200px;height:200px;border:2px solid #f3f3f3;background:blue;margin:100px auto;}
/* id 選擇符 */
</style>
</head>
<body>
<div id="box">我是一個盒子——塊狀模型</div>
</body>
</html>

注意：id選擇器，在<style>中，在屬性名前應(yīng)加上一個“#”號，代表引用。

2.class選擇器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
.box1{width:200px;height:200px;background:red;}
.box2{border:2px solid #333;background:blue;}
/* class 選擇符 */
</style>
</head>
<body>
<div class="box1">我是第一個盒子</div>
<div  class="box2 box1">我是第二個盒子</div>
<div  class="box1">我是第三個盒子，樣式跟第一個盒子一樣</div>
</body>
</html>

注意：class選擇器，在<style>中，在屬性名前應(yīng)加上一個“.”號，代表引用。

溫馨提示 Web前端入門學(xué)習(xí)（3）——CSS選擇器：

id選擇器和class選擇器的區(qū)別：id名稱是文檔唯一且不可重復(fù)出現(xiàn)的，

class選擇器名稱是可重復(fù)使用的，因此也稱為類選擇器。

3.標(biāo)簽選擇器

顧名思義，是根據(jù)標(biāo)簽名字來進(jìn)行匹配樣式的選擇器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
p{width:100px;height:100px;background:blue;}
div {width:50px;height:50px;background:red;margin-bottom:10px;}
/* 標(biāo)簽 選擇符 */
</style>
</head>
<body>
<div>塊</div>
<div>塊</div>
<div>塊</div>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</body>
</html>

4.群組選擇器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
#box1,#box2,#box3{width:100px; height:100px; background:blue;}
/* 群組  選擇符 */
</style>
</head>
<body>
<div id="box1">塊</div>
<div id="box2">塊</div>
<div id="box3">塊</div>
</body>
</html>

5.包含選擇器

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
div span p{width:100px; height:100px; background:blue;}
/* 包含  選擇符 */
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p2</p>
  <span>
  <p>p3</p>
  </span>
</div>
<div>塊</div>
<p>p1</p>
<p>p1</p>
<p>p1</p>
</body>
</html>

不難看出，包含選擇器中，只有在div里面的span中的p標(biāo)簽的內(nèi)容才有變化。

6.通配符

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
*{font:20px/30px;color:#e3e3e3;text-align:center;}
/* 包含  選擇符 */
</style>
</head>
<body>
<div>
<p>我是小倩加油站~~</p>
</div>
<div>
<p>哎呦喂</p>
  <span>
  <p>嘿嘿嘿~</p>
  </span>
</div>
<div>干巴爹~</div>
<p>哎呀~</p>
<p>嘻哈~</p>
<p>喲喲~</p>
</body>
</html>

7.選擇器優(yōu)先級

前面介紹了這么多選擇器，接下來該說說這些選擇器的優(yōu)先級，如果在同一文檔中出現(xiàn)不同的選擇器，應(yīng)該表現(xiàn)何種樣式，于是優(yōu)先級就誕生了。

選擇器優(yōu)先級

標(biāo)簽選擇器 < class選擇器 < id選擇器 < style行間樣式 < js

溫馨提示 Web前端入門學(xué)習(xí)（3）——CSS選擇器：

如果同樣的選擇器出現(xiàn)文檔中，默認(rèn)后者覆蓋前者的選擇器，則表現(xiàn)為后面選擇器的樣式。

向AI問一下細(xì)節(jié)

Web前端入門學(xué)習(xí)（3）——CSS選擇器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽