CSS中的选择器
目录
一、什么是选择器
二、基本选择器
三、属性选择器
四、伪类选择器
五、总结
一、什么是选择器
在 CSS 中，选择器是选取需设置样式的元素的模式。
二、基本选择器
1、.class选择器（类选择器）
选择class="你的类型"的所有元素。
style{
.class{设置你需要的样式}
}大概格式是这样的
在.class选择器的基础上还有.class1.class2和.class1 .class2(这个相较于前者第二个点前有空格)选择器。
.class1.class2选中的是同时具有name1和name2的所有元素。
选择器
这是一个段落
.class1 .class2选中的是name1的后代类为name2的所有元素。
选择器
这是一个块级元素
这是一个段落
2、#id选择器（id选择器）
选择 id="你的id" 的元素。
style{
#id{设置需要的样式}
}格式大概是这样
3、标签选择器
选中的是标签相同的所有元素。
选择器
这是一个段落
如此代码选中的就是标签是p标签的元素，即对“这是一个段落”进行颜色变化。
除了单独的标签选择器，也可以使用和其他标签混合使用
标签1,标签2（选中的是两个标签的所有元素）
选择器
这是一个块级元素
这是第二个段落
标签1 标签2（选择 <标签1> 元素内的所有 <标签2> 元素。与上个不同的是两个标签中间的符号）
选择器
这是一个块级元素
这是第一个段落
如此代码所示，div标签中的“这是一个块级标签”并没有变色，只有div标签内的p标签的“这是一个段落”变色了。
标签1>标签2（选择父元素是 <标签1> 的所有 <标签2> 元素）
选择器
这是一个块级元素
这是第一个段落
这是一个标题
如此代码所示，变色的只有“这是一个段落” 。
标签1+标签2（选择紧跟
元素）
选择器
这是一个块级元素
这是第二个段落
这是第三个段落
如此代码所示，变色的是离div最近的“这是第二个段落”变色了。
标签1~标签2（选择前面有 <标签1> 元素的每个 <标签2> 元素）
选择器
这是第三个标题
这是一个块级元素
这是第二个标题
如此代码所示，变色的是div后面h1标签的“这是第二个标签” 。
标签.class（选择 class="你的类型" 的所有 <该标签> 元素。）
选择器
这是一个块级元素
这是第二个段落
此代码为例，有颜色的是p标签。
4、*选择器（通配符选择器）
选择所有元素。
style{
*{设置需要的样式}
}以上四种常见选择器是存在优先级的：ID选择器>类选择器>标签选择器>通配符选择器，当选中对象发生重叠时会根据优先级设置样式。
三、属性选择器
1、选择带有某属性的所有元素
style{
标签[属性]{设置需要的样式}
}格式大概是这样的
选择器
这是一个块级元素
这是第二个标题
这是第二个段落
如此代码所示，选中的是带有属性class的div标签进行变色，其他标签没能同时满足两者要求故不发生变色。
2、选择带有属性="值" 属性的所有元素
style{
标签[属性=值]{设置需要的样式}
}格式一般是这样的
选择器
这是第二个段落
这是第三个段落
如此代码所示，两个p标签中，只有含有属性class且值为two的第二个p标签才变色。
3、选择 某属性包含某单词的所有元素
style{
[属性~=值]{设置需要的样式}
}格式大概是这样
选择器
这是一个块级元素
这是第二个段落
这是第三个段落
如此代码所示，变色的是div 标签和第一个p标签，因为二者都有属性class 且class的值中含有one，与上一种选择器不同的是不是完全等于一个值而是包含一个值。
4、选择属性值以某字母或词组开头的所有元素
style{
[属性|=值]{设置需要的样式}
}格式大概是这样的
选择器
这是一个块级元素
这是第二个段落
如此代码所示，变色的是div标签，而p标签因为开头并不是one而未被选中。
5、选择其 属性值以 某单词开头的每个某标签 元素
style{
标签[属性^=值]{设置需要的样式}
}格式大概是这样
选择器
这是第二个段落
这是第三个段落
如此代码所示，变色的是以one开头的p标签即第一个p标签。
6、选择其属性以某单词或词组结尾的所有标签元素
style{
标签[属性$=值]{设置需要的样式}
}格式大概是这样的
选择器
这是第二个段落
这是第三个段落
如此代码所示，变色的是以two结尾的第一个p标签。
7、选择其属性值中包含 某子串的每个 某标签元素
style{
标签[*=值]{设置需要的样式}
}格式大概是这样的
选择器
这是第二个段落
这是第三个段落
如此代码所示，两个p标签都会变色，因为都含“two”。
四、伪类选择器
style{
a:active{设置需要的样式}
}格式大概是这样的
DOCTYPE html>
选择器
点击
2、鼠标放在超链接上的时候（悬停）
style{
a:hover{设置需要的样式}
}格式大概是这样的
DOCTYPE html>
选择器
点击
3、链接被访问之后
style{
a:visited{设置需要的样式}
}格式大概是这样的
选择器
点击
4、超链接点击之前
style{
a:link{设置需要的样式}
}格式大概是这样的
选择器
点击
可以去试试这些代码，颜色变化还是多明显的
5、在每个标签的内容之前插入内容
(:before使用于css2,而::before使用于css3，但二者本质意义一样）
style{
标签：before{content：内容；
设置需要的样式}
}格式大概是这样的
选择器
告诉我
如此代码所示，“告诉我”的前面会有变色的“张桑”
6、在每个
的内容之后插入内容
(:after使用于css2,而::after使用于css3，但二者本质意义一样）
style{
标签：after{content：“内容”；
设置需要的样式}
}格式大概是这样的
选择器
告诉我
如此代码所示，“告诉我”的后面有变色的“去打球”。
使用:after和:before的时候需要注意的是一定要加content。
五、总结
选择器就是将含有某种名称或者属性的标签在进行设样式的时候可以大面积的设置，可以清楚地区分样式，使得更加方便快捷。还有很多选择器没有列举出来，想了解的可以在W3School上找找。