这个也有意思
之前几天学的，现在写写刚好复习（
伪类选择器
伪类是什么？
伪类用于定义元素的特殊状态，比如鼠标悬浮在按钮上，按钮颜色会变就是一个例子。
链接伪类选择器
修改链接状态的选择器
点击查看-连接选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
伪类选择器
</title>
<style>
/*
链接伪类选择器,可以修改状态
有顺序
L V H A
*/
a:link{
font-weight: bold;
font-size: 20px;
color: gray;
}
a:visited{
font-weight: bold;
font-size: 20px;
color: blueviolet;
}
a:hover{
font-weight: bold;
font-size: 50px;
color: red;
}
a:active{
font-weight: bold;
font-size: 20px;
color: orange;
}
</style>
</head>
<body>
<a href="https://www.baid.com">BAIDU</a>
</body>
</html>
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
目标伪类选择器
点击目录里一个链接就跳到相应内容的效果就靠它
点击查看-目标伪类选择器-代码
<!DOCTYPE html>
<html>
<head>
<title>
目标伪类选择器
</title>
<style>
:target{
color: firebrick;
}
</style>
</head>
<body>
<h2>menu</h2>
<a href="#story">lubenwei</a>
<a href="#NB">nb</a>
<br>
<pre>
awerawe
qwer
qw
er
qwerqw
er
qwerr
qwerqw
er
qwe
f
gs
dfg
sdf
Gsg
dghj
awerawefe
rf
er
fsre
fw
g
wer
Gewrg
werg
er
Gewrggw
erg
werrg
werrgh
yt
tuy
j
yu
j
yu
j
tuyjty
uj
tuyju
dtyhrty
<hgroup>rty
jh
rty
jrt
yj
rtyj
rtyjrt
yjtyrj
yjtrty
jhrty
jhrty
jhrtyj
rtyj
</hgroup>
rtyjjr
tuyjty
rtyjrty
jhrtyrtyj
rt
yjtrtyrty
jhrtyrtyj
rtyjtry
jhrtyrtyjj
tiyu
<kbd>yuik
uyi
l
yluo
<li>yuiklyu
yu
</li>
</kbd>
</pre>
<h2 id="story">story</h2>
<pre>
LBWNB
LBWNB
LBWNB
LBWNBLBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
LBWNB
</pre>
<h2 id="NB">nb</h2>
<pre>nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
nbnbnbnbnb
</pre>
</body>
</html>
建议保存代码然后用浏览器打开查看效果
结构伪类选择器
选择选取属于其父元素的某个子元素的选择器
点击查看代码
<!DOCTYPE html>
<html>
<head>
<title>
结构伪类选择器
</title>
<style>
/*
first-child 选取属于其父元素的首个子元素的选择器
last-child 选取属于其父元素的最后一子元素的选择器
nth-child 选取属于其父元素的第n个子元素的选择器
last-nth-child 选取属于其父元素的倒数第n个子元素的选择器
*/
li{
font:bold 40px "微软雅黑";
}
li:nth-child(odd){
color: darkgrey;
}
li:nth-child(even){
color: darkslategray;
}
li:first-child{
color: brown;
}
li:last-child{
color: cornflowerblue;
}
</style>
</head>
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
目前学到这里，有学新的了再更