選擇器
<style type="text/css">
1. 元素選擇器(標(biāo)簽選擇器):標(biāo)簽名
選中所有的標(biāo)簽名對(duì)應(yīng)的標(biāo)簽
例:所有a標(biāo)簽
a{
background-color: yellow;
}
2.id選擇器:#id屬性值
每個(gè)標(biāo)簽都有一個(gè)id屬性,整個(gè)html中,id的值必須唯一
例:id為a1的標(biāo)簽
#a1{
/*color:#ff0000;*/
color:rgba(0,0,255,0.4)
}
3.class選擇器:.class屬性值
每個(gè)標(biāo)簽都有一個(gè)class屬性,
例:所有class為.c1的標(biāo)簽
.c1{
color: brown;
background-color: olive;
}
4.通配符:*
選中所有的標(biāo)簽
*{
font-size: 50px;
}
5.層級(jí)選擇器:選擇器1 選擇器2...
例:id為all_a的所有a標(biāo)簽
#all_a a{
color: pink;
}
滿足div層下的div層下的a標(biāo)簽
div div a{
text-decoration: none;
}
6.群組選擇器:選擇器1,選擇器,....
例:同時(shí)選中所有h1標(biāo)簽和所有的span標(biāo)簽
h1,span{
background-color: #FFC0CB;
}
偽類選擇器
偽類選擇器: 選擇器:狀態(tài)
link: 超鏈接的初始狀態(tài); -- 一次都沒有訪問成功的時(shí)候的狀態(tài)
visited: 超鏈接訪問后的狀態(tài) --- 已經(jīng)訪問成功后的狀態(tài)
hover: 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
active:鼠標(biāo)按住的狀態(tài)
給同一個(gè)標(biāo)簽通過偽類選擇器給不同狀態(tài)設(shè)置不同的樣式的時(shí)候,要遵守愛恨原則(先要愛才能恨)
LoVe HAte
例子:a標(biāo)簽使用偽類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
color: black;
}
a:link{
color: green;
}
a:visited{
color: pink;
}
a:hover{
color: red;
}
a:active{
color: darkblue;
}
</style>
</head>
<body>
<a >百度一下</a>
</body>
</html>
a標(biāo)簽為黑色,從未瀏覽過的a標(biāo)簽為綠色,瀏覽過的a標(biāo)簽為粉紅色,鼠標(biāo)懸停在a標(biāo)簽上為紅色,鼠標(biāo)按下是a標(biāo)簽變?yōu)榘邓{(lán)色,松開鼠標(biāo)恢復(fù)成變色前.