css选择器作用
一基本选择器
首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。
基础选择器包括：
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
标签选择器
顾名思义就是通过标签名来选择元素：
可以选中所有的标签元素，比如div,ul,li,p等
不管标签藏的多深，都能选中
选中的是所有的，而不是某一个，所以说'共性'而不是'特性'
实例：
p {
color: red;
}
ID选择器
通过元素的ID值选择元素：
同一个页面id不能重复
任何标签都可以设置id
id命名规范 以字符 数字 下划线 大小写 严格区分 aa和AA
示例：
#i1 {
color: red;
}类选择器
通过样式类选择元素：
1.所谓类 就是class .class与id非常相似 任何标签都可以
加类 但是类可以重复 归类
2.同一个标签中可以携带多个类 用空格隔开
示例：
.c1 {
color: red;
}
注意：1.不要去视图用一个类将我们的页面写完，这个标签要
多携带几个类，共同设置
2.每个类要尽可能的小，有公共的概念，能让更多的标签取用
二组合选择器
通用选择器
使用*选择所有元素：
* {
color: black;
}高级选择器
后代选择器
因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：
div p {
color: red;
}
从div的所有后代中找p标签，设置字体颜色为红色。
儿子选择器
div>p {
color: red;
}
从div的直接子元素中找到p标签，设置字体颜色为红色。
毗邻选择器
div+p {
color: red;
}
找到所有紧挨在div后面的第一个p标签，设置字体颜色为红色。
弟弟选择器
div~p {
color: red;
}
找到所有div标签后面同级的p标签，设置字体颜色为红色。
三属性选择器
除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。
根据属性查找
[title] {
color: red;
}
根据属性和值查找
找到所有title属性等于hello的元素：
[title="hello"] {
color: red;
}
找到所有title属性以hello开头的元素：
[title^="hello"] {
color: red;
}
找到所有title属性以hello结尾的元素：
[title$="hello"] {
color: red;
}
找到所有title属性中包含（字符串包含）hello的元素：
[title*="hello"] {
color: red;
}
找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：
[title~="hello"] {
color: red;
}
四分组选择器
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div,p {
color: red;
}
为div标签和p标签统一设置字体为红色的样式。
通常，我们会分两行来写，更清晰:
div,
p {
color: red;
}五伪类选择器
伪类经常与伪元素混淆，伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。本文将详细介绍伪类的详细知识
锚点
关于锚点<a>，有常见的5个伪类，分别是:link,:hover,:active,:focus,:visited
/*没有访问的超链接a标签样式*/
.box ul li.item1 a:link{
color:green;
}
/*访问过的超链接a标签样式*/
.box ul li.item3 a:visited{
color:red;
}
/*鼠标悬浮在元素上应用样式*/
.box ul li.item2 a:hover {
background-color:green;
}
/*鼠标点击瞬间的样式：*/
.box ul li.item1 a:active {
color: yellow;
/*浅灰，拥有焦点*/
a:focus{
background-color:lightgrey;
}
六伪元素
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，
但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，
表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
伪元素的结构无法审查。
/* 设置首字母样式 */
p:first-letter{
color:red;
font-size:50px;
}
/*在。。。之前 添加内容
此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
p:after{
content:'&';
font-size:40px;
color:green;
七选择器的优先级
我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？
是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。
注意：
还有一种不讲道理的!import方式来强制让样式生效，但是不推荐使用。因为大量使用!import的代码是无法维护的。