本文已参与「新人创作礼」活动，一起开启掘金创作之路
一、属性选择器
基本语法：
[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元
[属性名$=属性值]{} 选择属性值以指定值结尾的元
[属性名*=属性值]{} 选择属性值含有某值的元素
例如：
</style>
<body>
<h1 title="abc">《静夜思》</h1>
<h3 title="acde">唐·李白</h2>
<p title="dbac">床前明月光，</p>
<p title="abcab">疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</body>
1.将含有title属性标签，变成红色
<style>
[title]{
color: red;
}
</style>
2.将含有title属性标签，属性值为“abc”，变成绿色
<style>
[title=abc]{
color: green;
}
</style>
3.将含有title属性标签，属性值开头为“d”,变成橘色
<style>
[title^="d"]{
color: orange;
}
</style>
4.将含有title属性标签，属性值结尾为“e”,变成粉色
<style>
[title$="e"]{
color: pink;
}
</style>
5.将含有title属性标签，含有属性值“ca”,变成黄色
<style>
[title*="ca"]{
color: yellow;
}
</style>
整体展示效果：
编辑
编辑
二、a元素伪类
下面案例为例：
<body>
<a href="https://www.jd.com/">京东</a>
<a href="https://www.taobao.com/">淘宝</a>
<a href="https://www.baidu.com/">百度</a>
</body>
<style>
a{text-decoration: none;} /*去除超链接的下划线*/
</style>
1.设置没有访问的超链接颜色为红色
我们需要使用link 来表示没有访问过的链接
<style>
a:link {
color: red;
}
</style>
2.访问过的超链接字体变成绿色
需要使用visited 来表示访问后的颜色（visited只能改变颜色）
<style>
a:visited {
color: green;
}
</style>
效果展示：
编辑
3.鼠标移入链接字体背景变成橘色
需要使用hover来改变背景颜色
<style>
a:hover {
background-color: orange;
}
</style>
4.鼠标点击后链接字体变大，颜色为黑色
需要使用active来改变鼠标点击后的状态
<style>
a:active{
font-size: 30px;
color: black;
}
</style>
效果展示：
编辑
编辑
注意事项：a伪类中，link和visited只能用于超链接，hover和active伪类可以用在所有标签。
