CSS选择器及三大特性

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。
类选择器使用.（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class="类名"  即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。

能良好区分JavaScript变量命名(JS变量命名是用_)
不要纯数字、中文等命名， 尽量使用英文字母来表示。
命名规范：  见（Web前端开发规范手册.doc）
命名是我们通俗约定的，但是没有规定必须用这些常用的命名。
google案例：
多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>
id选择器
id选择器使用#进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class） 好比人的名字重名，是可以多次重复使用的，
id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
通配符选择器
通配符选择器用*号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
注意：通配符选择器 基本不用。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
伪类使用:  比如  :link{}
链接伪类选择器
:link      /* 未访问的链接 */
:visited   /* 已访问的链接 */
:hover     /* 鼠标移动到链接上 */
:active    /* 选定的链接 */
写的时候，他们的顺序不要颠倒。

按照  lvha 的顺序。love hate   记忆法
a {   /* a是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
结构(位置)伪类选择器（CSS3)
:first-child : 选取属于其父元素的首个子元素的指定选择器
:last-child : 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式
:nth-child(odd) : 奇数
:nth-child(even) : 偶数，:nth-last-child(even) : 倒序偶数
:nth-child(2n) ：次序为2的倍数(偶数)，同理3n,5n...
:nth-child(2n-1) ：次序为2的倍数-1(奇数)
li:first-child { /*  选择第一个孩子 */
                color: pink; 
li:last-child {   /* 最后一个孩子 */
                color: purple;
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
目标伪类选择器(CSS3)
:target目标伪类选择器 : 选择器可用于选取当前活动的目标元素。
例：锚点中通过 :target来改变跳转后当前锚点的字体颜色
:target {
        color: red;
        font-size: 30px;
CSS复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。
1.交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special { ... }。
并集选择器  和 的意思，  就是说，只要逗号隔开的，所有选择器都会执行后面样式。
.one, p , #test {color: #F00;}表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。
3. 后代选择器
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>
伪元素选择器（CSS3)
1、   E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2、 E::first-line 文本第一行；

3、 E::selection 可改变选中文本的样式；
p::first-letter {
  font-size: 20px;
  color: hotpink;
/* 首行特殊样式 */
p::first-line {
  color: skyblue;
p::selection {
  /* font-size: 50px; */
  color: orange;
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
  content:"开始";
div::after {
  content:"结束";
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

: 与 :: 区别在于区分伪类和伪元素
CSS书写规范
【强制】 选择器 与 { 之间必须包含空格。eg：.selector { ... }
【强制】 属性名与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。eg：font-size: 12px;
选择器规范
【强制】 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。
/* good */
.post,
.page,
.comment {
    line-height: 1.5;
/* bad */
.post, .page, .comment {
    line-height: 1.5;
【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。
/* good */
#username input { ... }
.comment .avatar { ... }
/* bad */
.page .header .login #username input {}
.comment div * { ... }
【强制】 属性定义必须另起一行。
/* good */
.selector {
    margin: 0;
    padding: 0;
/* bad */
.selector { margin: 0; padding: 0; }
【强制】 属性定义后必须以;结尾。
/* good */
.selector {
    margin: 0;
/* bad */
.selector {
    margin: 0
CSS 三大特性
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
CSS层叠性
所谓层叠性是指多种CSS样式的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

CSS最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。
CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。子承父业
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
对于字体、文本、颜色属性可以继承，(跟文字相关)

边框、边距、背景、定位、元素高不可以继承
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
CSS特殊性（Specificity）
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者* 的贡献值
0,0,0,0
数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。
继承的 权重是 0
总结优先级：
1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。