首先概括一下概念吧，属性选择器就是根据属性来选择HTML元素，来应用CSS样式（比如你的某个属性符合我的要求，我就给你应用样式）。属性选择器就是为匹配属性的HTML元素设置样式。
首先属性选择器中所有的例子，其HTML部分都是这部分代码：
<body>
<p align="center">111</p>
<p>222</p>
<p align="left">333</p>
</body>这三个<p>段落内容分别是111、222、333，对其属性分别是居中、无、左对齐。
属性选择器的基本格式 ： 标签名 [ 属性要求 ] { CSS属性名：属性 }
比如最基本的：
标签名[属性]
<style>
p[align]{
color: red;
}
</style>意思就是所有<p>标签，只要有align属性的都符合条件，即染为红色。运行结果为111和333红色，222为黑色。
标签名[属性='属性值']
<style>
p[align='center']{
color: red;
}
</style>意思就是所有<p>标签，只要有align属性为'center'的染为红色。运行结果为111红色，222和333为黑色。
标签名[属性^='属性值'] / 标签名[属性$='属性值']
<style>
p[align^='c']{
color: red;
}
</style>意思就是所有<p>标签，align属性为'c'开头的染为红色。运行结果为111红色，222和333为黑色。
同理，把^改为$，当align属性为'c'结尾的染为红色。
标签名[属性*='属性值']
<style>
p[align*='t']{
color: red;
}
</style>所有<p>标签，align属性包含字符串'c'的染为红色。即111、333红色。
伪类选择器
伪类动态选择器，我觉得就是一个HTML元素在点击之前、之后、点击瞬间和悬停这四种情况的临时样式。
<body>
<div class="test">
</div>
</body>
<style>
.test{
/* 基础样式 */
width: 100px;
height: 100px;
}
.test:link{
/* 未被点击 */
background-color: grey;
}
.test:hover{
/* 鼠标悬停 */
background-color: red;
}
.test:active{
/* 鼠标点击瞬间 */
background-color: black;
}
.test:visited{
/* 点击之后 */
background-color: teal;
}
</style>伪装结构选择器
利用文档结构的特殊性来匹配元素，比如父元素只有一个子元素，等等。
比如 标签名：only-child 表示该类的父类只有其一个元素的情况。
比如 标签名：only-first 表示匹配该类的父类的第一个元素。其中 ：标签名：nth-child(3) 表示第三个。
比如 标签名：only-last 表示匹配该类的父类的最后一个元素。 其中 ：标签名：nth-last-child(3) 表示倒数第三个。
其他的还有很多，但个人感觉都是花里胡哨，基本不会去用的......
标签名：only-of-type 表示子元素唯一；
标签名：first-of-type 表示匹配第一个子元素；
标签名：last-of-type 表示匹配最后一个子元素；nth-of-type(3)同理
标签名：empty 表示没有子元素的HTML元素
状态伪类
就是HTML元素的状态......比如是否可见
标签名：enabled 表示可见的HTML属性 ； disenabled同理
标签名：checked 表示选中的HTML元素 比如单选框、复选框
标签名：not() 否定伪类 比如下方代码，把id不是b的都变为红色。
<body>
<p id="a">111</p>
<p id="b">222</p>
<p id="c">333</p>
</body>
<style>
p:not(#b){
color: red;
}
</style>
最后一个比较好玩的东西是目标伪类选择器
如果让你实现一个功能：在HTML中的瞄的基础之上，跳转到瞄内容的时候，背景显示红色。
像这样，点击“导航1”，跳转到内容111，并且显示红色背景。
点击“导航3”，跳转到内容333，并且显示红色背景。
这就需要用到“ 标签名：target ”，代码如下所示：
<body>
<a href="#a">导航1</a>
<a href="#b">导航2</a>
<a href="#c">导航3</a>
<p id="a">内容111</p>
<p id="b">内容222</p>
<p id="c">内容333</p>
</body>
<style>
p:target{
background-color: red;
}
</style>