在CSS中，我們要給一個元素定義樣式，首先得把這個元素選出來，我在網上看了很多文章，再結合老師所講的精華部分將平時比較常用的選擇器整理出來分享給大家，哈哈哈一起學習一起進步！
目錄
- 通配符選擇器
- ID選擇器
- 類選擇器
- 標簽選擇器
- 后代選擇器
- 子代選擇器
- 組合選擇器
- 偽類選擇器（重點）
- 相鄰兄弟選擇器
- 相鄰選擇器
- 兄弟選擇器
- 屬性選擇器
通配符選擇器
（*）
表示選擇所有的元素，
*{
margin: 0;
padding: 0;
}
/*設定所有的HTML標簽的外邊距和內邊距為0*/
ID選擇器
(#ID)
給元素添加一個id屬性，在樣式表中用一個#就可以把元素選擇出來，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 50px;
width: 100px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="box1">
I am box1
</div>
</body>
</html>
類選擇器
（.className）
給需要設定樣式的一類元素添加class屬性，然后通過一個 .aa 這種方式就可以選擇到一類元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{
color: #FFFFFF;
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="aa">I am one</div>
<div class="aa">I am two</div>
<div class="aa">I am three</div>
</body>
</html>
標簽選擇器
直接使用標簽的名稱來選擇，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: coral;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span>
</body>
</html>
運行結果
hahaha…可自行下載喜歡的圖片玩玩
后代選擇器
(父元素 子元素)
選擇一個元素包含的后代，可以是兒子，也可以是孫子，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 a{
background-color: #FF7F50;
}
img{
width: 350px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1">
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not an a tag</span>
<img src="img/pig.jpg"/>
</body>
</html>
運行結果
子代選擇器
(>)
符號是> ,只選擇兒子，不選擇孫子及其后代，（注意這里和后代的區別）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1>a{
background-color: #FF7F50;
}
#box1>p{
background-color: #FF7F50;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p and a tag</span>
</body>
</html>
運行結果
組合選擇器
用逗號把單個的選擇器隔開，就是這幾個選擇器選擇結果的并集，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a,p,div,span{
color: red;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span>
</body>
</html>
運行結果
偽類選擇器（重點）
：
a:link{
/*未訪問狀態*/
}
a:visited{
/*已訪問狀態*/
}
a:hover{
/*滑鼠懸停狀態*/
}
a:active{
/*激活選定狀態（滑鼠點擊未釋放時）*/
}
注意：這個順序是不能改變的
方便記憶：“LOVE HATE”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="https://www.qq.com/">我是騰訊，點點我</a>
</body>
</html>
相鄰兄弟選擇器
相鄰選擇器
+
影響的是＋號后面的（相鄰）的一個
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2+p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>蘭亭序</h2>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
</div>
</body>
</html>
兄弟選擇器
~
受影響的是兄弟們，而不是一個
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2~p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>蘭亭序</h2>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
</div>
</body>
</html>
屬性選擇器
語法：標簽名[屬性名]{規則}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[href] {color:red;}
</style>
</head>
<body>
<div id="Jay">
<h2>蘭亭序</h2>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<p>蘭亭臨帖 行書如行bai云流水 月下門推 心細如你腳步碎忙不迭 千年碑易拓 卻難拓你的美</p>
<a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">蘭亭序，點我</a>
</div>
</body>
</html>
這就是我整理的全部常用選擇器啦，如果對你有幫助，留下你寶貴的小手印哈哈哈，歡迎點贊+評論+關注！一起學習一起進步，生活因學習而變得美麗！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/155127.html
標籤：其他
上一篇：Must use import to load ES Module
下一篇：Canvas線潭訓環