一、基本选择器
1.标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
1 body{ 2 ????color:gray; 3 ????font-size: 12px; 4 } 5 /*标签选择器*/ 6 p{ 7 ????color: red; 8 font-size: 20px; 9 }10 span{11 ????color: yellow;12 }2.id选择器
# 选中id
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 #box{ 2 ????background:green; 3 } 4 ??????????????5 #s1{ 6 ????color: red; 7 } 8 ?9 #s2{10 ????font-size: 30px;11 }3.类选择器
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
类的使用，能够决定前端工程师的css水平到底有多牛逼？
玩类了，一定要有”公共类“的概念。
1 .lv{ 2 ?????color: green; 3 ??4 } 5 .big{ 6 ?????font-size: 40px; 7 } 8 .line{ 9 ???text-decoration: underline;10 11 }1 复制代码2 ?<!-- 公共类 ???共有的属性 -->3 ?????<div>4 ?????????<p class="lv big">段落1</p>5 ?????????<p class="lv line">段落2</p>6 ?????????<p class="line big">段落3</p>7 ?????</div>
总结：
不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用
到底使用id还是用class？
答案：尽可能的用class。除非一些特殊情况可以用id原因：id一般是用在js的。也就是说 js是通过id来获取到标签
4.通用选择器
1 * {2 ??color: white;3 }二、组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/li a { ?color: green;}儿子选择器
/*选择所有父级是 <div> 元素的 <p> 元素*/div>p { ?font-family: "Arial Black", arial-black, cursive;}毗邻选择器
/*选择所有紧接着<div>元素之后的<p>元素*/div+p { ?margin: 5px;}弟弟选择器
/*i1后面所有的兄弟p标签*/#i1~p { ?border: 2px solid royalblue;}三、属性选择器
用于选取带有指定属性的元素。
/*用于选取带有指定属性的元素。*/p[title] { ?color: red;}/*用于选取带有指定属性和值的元素。*/p[title="213"] { ?color: green;}/*找到所有title属性以hello开头的元素*/[title^="hello"] { ?color: red;}/*找到所有title属性以hello结尾的元素*/[title$="hello"] { ?color: yellow;}/*找到所有title属性中包含（字符串包含）hello的元素*/[title*="hello"] { ?color: red;}/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/[title~="hello"] { ?color: green;}四、并集选择器、交集选择器和嵌套选择器
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
1 /*并集选择器*/2 h3,a{3 ????color: #008000;4 ????text-decoration: none;5 ????????????????6 }比如像百度首页使用并集选择器。
1 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{2 ????margin:0;3 ????padding:04 }使用此并集选择器选中页面中所有的标签，页面布局的时候会使用
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class=‘active‘></h4>这样的标签。
那么
1 h4{ 2 ????width: 100px; 3 ????font-size: 14px; 4 } 5 .active{ 6 ????color: red; 7 ????text-decoration: underline; 8 } 9 /* 交集选择器 */10 h4.active{11 ????background: #00BFFF;12 }它表示两者选中之后元素共有的特性。
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色
1 .c1 p {2 ??color: red;3 }五、伪类选择器
1 /* 未访问的链接 */ 2 a:link { 3 ??color: #FF0000 4 } 5 ?6 /* 已访问的链接 */ 7 a:visited { 8 ??color: #00FF00 9 } 10 11 /* 鼠标移动到链接上 */12 a:hover {13 ??color: #FF00FF14 } 15 16 /* 选定的链接 */ 17 a:active {18 ??color: #0000FF19 }20 21 /*input输入框获取焦点时样式*/22 input:focus {23 ??outline: none;24 ??background-color: #eee;25 }六、伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter { ?font-size: 48px; ?color: red;}before
/*在每个<p>元素之前插入内容*/p:before { ?content:"*"; ?color:red;}after
/*在每个<p>元素之后插入内容*/p:after { ?content:"[?]"; ?color:blue;} before和after多用于清除浮动。
七、选择器的优先级
CSS继承
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。
body { ?color: red;}此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。
p { ?color: green;}此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。
选择器的优先级
我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？
其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
除此之外还可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。
前端知识--CSS 选择器
原文地址：https://www.cnblogs.com/hansha/p/9697660.html