CSS选择器（2）部分属性选择器
2022-01-08 本文已影响0人
这样你就找不到我了
属性选择器
- 存否和值选择器
- 字符串匹配选择器
- 大小写敏感
[href]{
color: #0000FF;
}
[href="www.qq.com"]{
color: #00FFFF;
}
[class~="b"]{
color: #FF0000;
}
更多参考：MDN Web Docs
链接伪类选择器
- hover 鼠标选择时选中
a:hover{
background: chocolate;
}
- active 鼠标按下时选中
a:active{
color: yellow;
}
- link 超链接未访问时的状态
a:link{
color: black;
}
- visited 超链接访问过后的状态
a:visited{
color: grey;
}
demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器_属性选择器</title>
<style>
/* 属性选择器 */
[href]{
color: #0000FF;
}
[href="www.qq.com"]{
color: #00FFFF;
}
[class~="b"]{
color: #FF0000;
}
/* 链接伪类选择器 */
a:hover{
background: chocolate;
}
a:active{
color: yellow;
}
a:link{
color: black;
}
a:visited{
color: grey;
}
</style>
</head>
<body>
<a href="www.baidu.com" class="a b c">百度</a>
<a href="www.qq.com">qq</a>
</body>
</html>
