選擇器是用來選擇標(biāo)簽用的
一熬北、標(biāo)簽選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>id選擇器</div>
</body>
</html>
標(biāo)簽選擇器可以把某一類屬性全都選擇出來
二镐作、類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
span {
font-size: 200px;
}
.g {
color: #4285f4;
}
.o1 {
color: #ea4436;
}
.o2 {
color: #fbbc07;
}
.l {
color: #35a954;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o1">e</span>
</body>
</html>
上面.聲明下面class調(diào)用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="red font20">多類名選擇器</div>
<div>多類名選擇器</div>
<div class="red">多類名選擇器</div>
<div>多類名選擇器</div>
</body>
</html>
多類名選擇器
樣式顯示效果跟HTML元素中類名先后順序沒有關(guān)系毙籽，受CSS樣式書寫的上下順序有關(guān)
各個類名之間用空格隔開
三紧卒、id選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
#id {
color: red;
}
</style>
</head>
<body>
<div id="id">id選擇器</div>
</body>
</html>
每個界面不能有重復(fù)的id
四畏妖、通配符選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>通配符選擇器</div>
<p>通配符選擇器</p>
</body>
</html>
代表所有標(biāo)簽
五襟齿、后代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
div a {
color: #f00;
}
</style>
</head>
<body>
<div>
<a>div的后代</a>
</div>
<a>不是div的后代</a>
</body>
</html>
后代選擇器中間用空格隔開
六伍玖、子代選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
div > a {
color: #f00;
}
</style>
</head>
<body>
<div>
<a>div的子代</a>
<span>
<a>div的后代悴务，不是子代</a>
</span>
</div>
</body>
</html>
子代選擇器中間用 大于號 > 隔開
七、交集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
div.red {
color: #f00;
}
</style>
</head>
<body>
<div>交集選擇器</div>
<div>交集選擇器</div>
<div class="red">交集選擇器</div>
<p>交集選擇器</p>
<p>交集選擇器</p>
<p class="red">交集選擇器</p>
</body>
</html>
用的較少铲掐，特殊情況使用
八拾弃、并集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
div , p {
color: #f00;
}
</style>
</head>
<body>
<div>并集選擇器</div>
<div>并集選擇器</div>
<div>并集選擇器</div>
<p>并集選擇器</p>
<p>并集選擇器</p>
<p>并集選擇器</p>
<a>并集選擇器</a>
<a>并集選擇器</a>
<a>并集選擇器</a>
<a>并集選擇器</a>
<h1>并集選擇器</h1>
<h1>并集選擇器</h1>
<h1>并集選擇器</h1>
</body>
</html>
適合用于相同樣式的集體聲明
九、偽類選擇器
1.連接偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題</title>
<style>
a:link { /*未訪問過的鏈接*/
color: #333;
font-size: 50px;
text-decoration: none; /*取消下劃線*/
font-weight: 700;
}
a:visited { /*已訪問過的鏈接*/
color: orange;
}
a:hover { /*鼠標(biāo)經(jīng)過時*/
color: #f10215;
}
a:active { /*鼠標(biāo)點擊的時候*/
color: #2fceff;
}
</style>
</head>
<body>
<a href="lianxi.css">練習(xí)</a>
</body>
</html>
link visited hover active 這四個的順序不能改變
