六種常用的選擇器
- 準備工作
- 1、id選擇器
- 2、class選擇器(類選擇器)
- 3、标簽選擇器
- 4、通配符
- 5、分組選擇器
- 6、後代選擇器
- 7、僞類選擇器
準備工作
- 使用div标簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
</head>
<body>
<div>
選擇器
</div>
</body>
</html>
1、id選擇器
- id選擇器，在div标簽中設定一個id屬性，在style标簽中以以#開始後面跟div标簽的id屬性。
- 這裡就像給标簽一個身份證号，然後在style标簽中通過這個身份證号找到對應的标簽，聲明該标簽的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
</head>
<style>
#id_div{
color: red ;
}
</style>
<body>
<div id="id_div">
id選擇器
</div>
</body>
</html>
結果
這裡文字的顔色已經改變了，這裡就是通過id選擇器改變具有該id名的标簽
注意：這裡的id選擇器指定标簽的id屬性不能重複。
2、class選擇器(類選擇器)
- 類選擇器給标簽指定一個class屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
#id_div{
color: red ;
}
.class_div{
font-size: 36px;
}
</style>
</head>
<body>
<div id="id_div">
id選擇器
</div>
<div class="class_div">
class選擇器(類選擇器)
</div>
</body>
</html>
結果
注意：雖然id選擇器指定的id屬性名必須不同，但是這裡類選擇器指定的屬性，可以給多個标簽指定相同的class屬性，然後通過類選擇器把相同的class屬性的标簽選擇出來。
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
#id_div{
color: red ;
}
.class_div{
font-size: 36px;
}
</style>
</head>
<body>
<div id="id_div">
id選擇器
</div>
<div class="class_div">
class選擇器(類選擇器)
</div>
<div class="class_div">
第二個類選擇器
</div>
</body>
</html>
結果：
這裡可以看出給兩個具有相同class屬性的标簽聲明了相同的樣式。
3、标簽選擇器
- 标簽選擇器，指定相同的标簽聲明同樣的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style>
span{
color: red;
font-size: 32px;
}
</style>
</head>
<body>
<span>标簽選擇器</span>
<span>||标簽選擇器</span>
</body>
</html>
結果
4、通配符
- 可以通配符可以比對任意的标簽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
color: red;
font-size: 36px;
}
</style>
</head>
<body>
<span>通配符選擇器</span>
<div>通配符選擇器</div>
<a href="#">通配符選擇器</a>
</body>
</html>
結果
5、分組選擇器
- 可把多個标簽或者id選擇器或者類選擇器等分為一組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,a,#id_b{
color: red;
font-size: 36px;
}
</style>
</head>
<body>
<div>分組選擇器</div>
<span>分組選擇器</span>
<p>分組選擇器</p>
<a>分組選擇器</a>
<p >分組選擇器</p>
<b id="id_b">分組選擇器</b>
</body>
</html>
分組選擇器
注意：分組選擇器隻是把聲明樣式的選擇器寫在一起，它和分開寫沒有差別，隻是提高了代碼複用率。
6、後代選擇器
後代選擇器的寫法
父代選擇器1 子父代選擇器2 子父代選擇器3 ….子代選擇器 {
declaration1;
declaration2;
…
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html body a{
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
7、僞類選擇器
- 僞類選擇器有很多屬性，這裡說4個常用的屬性
:link， :visited， :hover，:active
若:link、:visited、:hover和:active一起使用，:hover 必須被置于 :link 和 :visited 之後，:active 必須>被置于 :hover 之後，即:link -> :visited -> :hover -> :active ，簡記love hate(愛恨)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a{
color: black;
font-size: 24px;
text-decoration: none;
}
a:link{
color: green;
}
a:visited{
font-size: 72px;
color: yellow;
}
a:hover{
font-size: 36px;
text-decoration: underline;
color:red;
}
a:active{
font-size: 72px;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
未進行操作
滑鼠放在a标簽上面
點選連結但是不釋放
通路過的網站