相信很多学编程的同学都知道选择器这种概念，比如基础选择器、伪类选择器以及属性选择器等等，下面由小生斗胆总结那些年我们用过的选择器。
基础选择器
1、标签选择器：给所有的同种标签制定标准
语法：标签名 {
key:value;
}
实例：div {
width:100px;
}
2、类名选择器:将标签归为一类来命名
一对多：一个类名可以多个标签使用
多对一：一个标签可以用多个类名
定义一个类名（class="类名"）
语法：.类名 {
key:value;
}
实例：.head {
width:100px;
}
使用类名（多个类名用空格隔开）
<div class="head"></div>
<div class="类名 类名-1 类名-2"></div>
3、ID选择器：唯一性 只能给一个标签用 同种ID名只能用一次
语法：#名字 {
key:value;
}
实例：#foot {
width:100px;
}
4、包含选择器：从父元素里面找符合标准的子孙元素
先找到父元素 再找到它的子孙元素 从中筛选出符合条件的元素
用 空格 连接
语法：.类名/标签名 .类名/标签名 {
key:value;
}
实例：div .son {
width:100px;
}
5、子选择器：找到的只是子元素
先找到父元素 再找到它的子元素 从中筛选出符合条件的元素
语法：.类名/标签名 >.类名/标签名 {
key:value;
}
实例：.father>div {
width:100px;
}
6、全局选择器： 通配符 * （兼容性不太好）
语法：* {
key:value;
}
实例：* {
width:100px;
}
7、群组选择器（节省代码）
语法：标签名,标签名 {
key:value;
}
实例：div,div {
width:100px;
}
8、相邻选择器 :
找到指定元素的相邻的兄弟元素（只能找下方的相邻元素）
语法：.类名/标签名+.类名/标签名 {
key:value;
}
实例：.a+div {
width:100px;
}
9、兄弟选择器 （css3）:
找到指定元素的同级的所有兄弟元素（只能找下方的同级所有兄弟元素，并且为同种标签）
语法：.类名/标签名~.类名/标签名 {
key:value;
}
实例：.a~div {
width:100px;
}
伪类选择器
1、:hover
指的是给指定元素加上鼠标悬停状态下的样式（该元素必须有宽高）
2、:active
指的是给指定元素加上鼠标激活状态下的样式
3、:after
指的是给指定元素后面添加一个伪元素 必须携带 content："" 属性
4、：before
指的是给指定元素前面添加一个伪元素 必须携带 content: "" 属性
5、 ： focus
设置焦点（聚焦）状态
6、
（1）：first-child
指的是父元素下的第一个子元素
（2）：last-child
指的是父元素下的最后一个子元素
（3）：nth-child（n）n为几 就是第几个子元素 从前面开始指定
2n
3n
odd 奇数
even 偶数
（4）：nth-last-child（n） 从后面开始指定
（5）：only-child 只有一个子元素 需加空格
（6）：empty 没有子元素的 没有任何文本 不加空格
（7）：not（） 取反（反选）
（8）：root 根元素
（9） E：first-of-type
先找到元素E，再找到其中的第一个
（10） E：last-of-type
先找到元素E，再找到其中的最后一个
（11） E：only-of-type
先找到元素E，再找到其中的只有一个的
（12） E：nth-of-type（n）
先找到元素E，再找到其中的第n个
（13） E：nth-last-of-type（n）
先找到元素E，再找到其中倒数的第n个
（14） ：first-letter/：last-letter （：：first-letter）
第一个字符/最后一个字符
（15） ：first-line /：last-line （：：first-line）
第一个行/最后一个行
属性选择器
1、 元素[属性] {}
找到某个元素，并且携带这个属性
<div class></div>
<div></div>
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只会给第一个设置属性
2、 元素[属性='属性值'] {}
找到某个元素，且携带这个属性，并且属性值相等的(有且只有一个属性值)
<div class></div>
<div class="box"></div>
<div class="box box2"></div>
div[class='box'] {
width: 200px;
height: 200px;
background: green;
}
// 只会给第二个设置属性
3、 元素[属性~='属性值'] {}
找到某个元素，且携带属性，并且属性值中包含指定的属性值
<div class="box2"></div>
<div class="box box2"></div>
div[class~='box2'] {
width: 300px;
height: 300px;
background: purple;
}
// 只要属性之中含有 box2就设置属性，给所有的div标签设置属性
4、 元素[属性|='前缀'] {}
找到元素，并且携带属性，并且属性值要以指定的形式: '前缀-xxxx'
<div class="key box1 box2"></div>
<div class="key-box box1 box2"></div>
<div class="key-box2 box1 box2"></div>
div[class|='key'] {
width: 50px;
height: 50px;
background: pink;
}
// 只给后面两个设置属性
5、 元素[属性^='前缀'] {}
找到元素，并且携带属性 ,并且属性值以'前缀'开头（属性中只有一个属性值）
<div class="ax"></div>
<div class="baox"></div>
div[class^='a'] {
width: 20px;
height: 20px;
background-color: #000;
}
// 只给第一个设置属性
6、元素[属性$='后缀'] {}
找到元素，并且携带属性 ,并且属性值以'后缀'结尾
<div class="baox"></div>
<div class="axb"></div>
div[class$='b'] {
width: 20px;
height: 20px;
background-color: blue;
}
// 只给第二个设置属性
7、 元素[属性*='中间'] {}
找到元素，并且携带属性 ,并且属性值中包含'中间'
<div class="ax"></div>
<div class="axb"></div>
div[class*='x'] {
width: 10px;
height: 10px;
background-color: palegreen;
}
// 两个都会设置属性
还有一点就是当我们写程序时，可能会遇到代码写上了，但是效果却不是我们想要的，这里就遇到了选择器权重的问题：
权重： 通配符<标签选择器<类名/伪类选择器<ID选择器<行内样式<！important
本人学识有限，如有错误，希望界内大牛可以指正，万分感谢！！！
image
网友评论