一.结构伪类选择器
伪类选择器一般的格式是使用冒号来表示 ：
一般其它的伪类选择器很少使用，但是a标签的个性化都是使用的伪类选择器来个性化，所以对于a标签的个性化需要用到
代码解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/* 选择ul的第一个子元素
颜色为蓝色
*/
ul li:first-child{
background: #5825ff;
}
/* 选择ul的最后一个子元素
颜色为红色
*/
ul li:last-child{
background: #ff3b59;
}
/*
选择p1：定位到父元素，选择当前的第一个元素
选择当前的p元素的父元素，选择父级元素的第一个，并且是当前的元素生效
颜色为绿色
*/
p:nth-child(2){
background: #19ff37;
}
/*
选中父元素，下的p元素的第二个，通过类型来选中
*/
li:nth-of-type(2){
background: #fffa0f;
}
/*
伪类选择器使用的最多的地方还是a标签
通过伪类选择器可以对a标签进行个性化的设置，
对于链接提示非常有用
*/
/*
给 a 标签一个背景颜色
颜色为粉色
*/
a:hover{
background: #df0bff;
}
</style>
</head>
<body>
<a href="#">a标签</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
二.属性选择器
常用的四种属性选择器控制条件：
- = 必须完全与条件一致才能被选择
- *= 通配选择器，只有有满足的就行，不必完全满足，类似是或门
- ^= 以....开头，属性的字符串开头
- $= 以...结尾，属性中的字符串以什么结尾
代码解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 8px;
background: #6897ff;
text-align: center;
color: #20ff67;
text-decoration: none;
font: bolder 20px/50px Arial;
}
/* 存在id属性*/
a[id]{
background: #ff3b59;
}
/*
= 绝对等于，等号后的值必须匹配才会css生效
*= 包含即可，属于通配符等于
*/
a[class*=link]{
background: #fff70c;
}
/*
^= 以..开头的元素
这里以http开头的元素
*/
a[href^=http]{
background: #5825ff;
}
/*
$=jpg
以....结尾的元素
这里是以jpg为结束的元素
*/
a[href$=jpg]{
background: #ff3b59;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links first" id="first">1</a>
<a href="" class="link first">2</a>
<a href="image/123.html">3</a>
<a href="image/123.png">4</a>
<a href="image/123.jpg">5</a>
<a href="abc">6</a>
<a href="/a.pdf">7</a>
<a href="abc.doc">8</a>
<a href="/abc/pdf">9</a>
<a href="abcd.xml">10</a>
</p>
</body>
</html>
标签：伪类,标签,元素,background,之伪类,选择器,CSS,属性 From： https://www.cnblogs.com/5ran2yl/p/17263359.html