- 標籤選擇器 = 元素選擇器
- id 選擇器： 在一個頁面中，默認 id 是唯一的（不唯一不報錯，zz纔不唯一！）
- class 選擇器：.class 類名｛屬性：屬性值｝
class 選擇器適合定義一類樣式，類名的第一個字符不能使用數字
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .p1{ background-color: red; } </style> </head> <body> <p class="p1">fqx is a good man</p> <p class="p1">fqx is a good man</p> <p>fqx is a good man</p> <p>fqx is a good man</p> <p>fqx is a good man</p> </body> </html> - 交集選擇器
避免同樣的樣式寫多次
.p1,.p2{ background-color: pink; }用於選擇同時又多個選擇器匹配的元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> h1.a{ background-color: red; } </style> </head> <body> <h1 class="a">1</h1> <h2 class="b">2</h2> <h3>3</h3> <h4>4</h4> </body> </html> -
並集（羣組）選擇器
/* 羣組選擇器（並集選擇器）*/ h2,h3,h4{ background-color: aqua; } -
後代選擇器
/* 子選擇器 */ #box2 p{ background-color: lawngreen; } -
子選擇器
/* 子一級選擇器 */ #box2>p{ background-color: yellow; } -
僞類選擇器
/* 初始狀態 */ a:link{ color: #FF0000; } /* 訪問後狀態 */ a:visited{ color: #FFFF00; } /* 懸停顏色 */ a:hover{ color: blue; } /* 激活顏色 */ a:active{ color: #00FFFF; }
所有代碼在這裏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 交集選擇器 */
h1.a{
background-color: red;
}
/* 羣組選擇器（並集選擇器）*/
h2,h3,h4{
background-color: aqua;
}
/* 子選擇器 */
/* #box2 p{
background-color: lawngreen;
} */
/* 子一級選擇器 */
/* #box2>p{
background-color: yellow;
} */
/* 初始狀態 */
a:link{
color: #FF0000;
}
/* 訪問後狀態 */
a:visited{
color: #FFFF00;
}
/* 懸停顏色 */
a:hover{
color: blue;
}
/* 激活顏色 */
a:active{
color: #00FFFF;
}
</style>
</head>
<body>
<h1 class="a">1</h1>
<h2 class="b">2</h2>
<h3 id="haha">3</h3>
<h4 >4</h4>
<div id="box1">
<p>我愛學習</p>
</div>
<div id="box2">
<p>我愛編程</p>
<div >
<p>我不想變色</p>
</div>
</div>
<a href="https://blog.csdn.net/weixin_38114487">我的主頁</a>
</body>
</html>