class和id

---

区别

1. id是唯一的而class不是，id一个页面只可以使用一次；class可以多次引用，如果从头到尾浏览源代码你会发现只有一个id="header",但是有多个class="entry"。
2. 属性的优先级问题。id的优先级要高于class。

使用技巧

1. 子级名字中包含父命名中的部分为开头。这样方便在编写css中明确层次关系。
2. class中的子级最好不用id.
3. class的命名最好用大小写合用。
4. id具有唯一性，并且最好在外围使用（id多用于唯一特值得dom元素上例如：页面上唯一的头部、正文、和底部这些大的样式；表单页面唯一的上传元素），而class具有可重复性，并且尽量在结构内部使用（多用于指一类dom上，例如：所有的按钮都有同样的box-shadow；让这几个div的宽度相等；具体的细节，比如具体的一个菜单，一行文字），让所有的class都成为id的子级或孙级。

常见的选择器

---

• 基础选择器
• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

基础选择器

选择器	含义
*	通用选择器，匹配页面任何元素
#id	id选择器，匹配特定的id元素
.class	类选择器，匹配class包含（不是等于）特定类的元素
element	标签选择器

组合选择器

E、F代表基础选择器

选择器	含义
E，F	同时选择两个基础选择器
E F	后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素）元素F
E>F	子元素选择器，匹配E元素的所有直接子元素
E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F	普通相邻选择器，匹配E元素之后的同级元素F
.class1.class2	同时拥有两个特性的元素例如：<span class="p2">span</span>和<h2 class="p2">h2</h2>选择器h2下的p2则应是h2.p2；对于<h2 class="p2 active">p2</h2>则是.p2.active
element#id	不常用。例如<div id="ct"></div>写成div#ct

属性选择器（用的不多）

选择器	含义
E[attr=value]	例如：<input type="text">和<input type="password">则input[]type=password{}

伪类选择器（代表一个元素的另一种状态）

选择器	含义
E:link	匹配所有未被点击的链接
E:visited	匹配所有已经被点击的链接
E:active	匹配鼠标已经被按下，还没有释放的元素
E:hover	匹配鼠标悬停其上的E元素

对于E:nth-child和E:nth-of-type用一个例子来说明

<div>
  <h1 class="child">h1</h1>
  <h2 class="child">h2</h2>
  <div class="ct">
    <h1 class="child">ct-h1</h1>
  </div>
  <h2 class="child">h2</h2>
</div>

E:nth-child匹配父元素的第n个子元素。例如：
.child:first-child{color:red;}则h1和ct-h1变红。
E:nth-of-type匹配.child对应的父元素中，同种标签的第一个。
.child:first-of-type{background:blue;}则h1，h2，ct-h1变蓝。

伪元素选择器

E:before和E:after两个伪元素必须有content表示在E元素之前插入生成的内容。例如：
.wrap:before{
content:'aaa'
}
在元素E内部作为第一个子元素生成一个元素，内容是aaa。

选择器的优先级

---

含义

如果多条规则作用于同一元素上，且定义的相同属性的不同值。比如：
<p id="text">text</p>
css中#text{color:red;}
p{color:blue}。则会涉及到优先级的问题。

优先级

1. ！important会覆盖页面内任何位置定义的元素样式，在属性后面使用
   .child:first-child{color:red !important;}
2. 作为style属性，写在元素标签上的内联样式。
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义

复杂场景

行内样式-----a
id选择器------b
类、属性选择器和伪类选择器-------c
标签选择器、伪元素-------------------d
原则：先比较a，然后依次比较b,c,d。

选择器	优先级
*{}	a=0,b=0,c=0,d=0
li{}	a=0,b=0,c=0,d=1
li:first-line{}	a=0,b=0,c=0,d=2
ul li{}	a=0,b=0,c=0,d=2
ul ol+li{}	a=0,b=0,c=0,d=3
h1+*[rel=up]	a=0,b=0,c=1,d=1
ul ol li.red	a=0,b=0,c=1,d=3
li.red.level	a=0,b=0,c=2,d=1
style=""	a=1
p{}	a=0,b=0,c=0,d=1
div p	a=0,b=0,c=0,d=1
div p.sith	a=0,b=0,c=1,d=2
#sith	a=0,b=1,c=0,d=0
body#darkside.sith p{}	a=0,b=1,c=1,d=2

样式覆盖

如果选择器一模一样，但写了2遍，则下面的覆盖上面

div{color:#333;}
div{color:#999;}

爱恨（lvha）原则

---

a:link, a:visited, a:hover, a:active的顺序的原因：
浏览器解析都是从上往下解析
a:visited位于a:hover和a:active前面的原因
如果a:visited位于a:hover和a:active的后面，则点击之后，a:hover和a:active失效。这是因为当点击之后再用后两种属性则这时，链接同时具有a:visited,a:hover两种属性，由于a:visited属性会覆盖前面的属性，所以另外两种属性会失效。
a:link位于a:hover和a:active前面的原因
如果位于两者的后面，则链接还没有被点开的时候，同时具有这三种属性，由于浏览器由下往上解析，则先解析a:link，则放弃了a:hover,和a:active的重复定义。
a:hover位于a:active前面的原因
当鼠标按下的时候，也是在hover状态，如果位于后面，则hover就会覆盖active的颜色。
a:link和a:visited顺序呢无所谓，因为不会同时触发。

div:first-child和div :first-child以及div:first-of-type,div :first-of-type的区别

div:first-child表示其父元素的第一个子元素，并且该标签为div。
div :first-child表示div的第一个子元素。
div:first-of-type表示其父元素的所有子元素中，标签为div的第一个子元素（不管该div标签是不是第一个子元素）。
div :first-of-type表示div作为父元素的同种标签的第一个。

选择器的含义

#header{}表示选中id是header的元素
.header{}表示选中class=header的元素
.header .log{}表示选中class=header的元素的后代是class=logo的元素
.header.mobile{}表示选中同时拥有header和mobile类的元素
.header p, .header{}表示选中id=header的元素的后代p和class=header的元素的后代h3
#header .nav>li{}表示选中id=header的元素的后代class=nav下的所有li
#header a:hover{}表示匹配id=header的后代a的鼠标悬停效果
#header .logo~p{}表示匹配id=header的后代中，类名为logo元素之后的同级元素中的所有p标签
#header input[type="text"]{}表示匹配id=class的后代属性type=text的input元素。

运行代码，解析输出样式的原因

---

代码：

代码01.png

结果：

结果01.png

解析：.item1:first-child中.item1对应的元素为<p class="item1">aa</p>,<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,这三个元素的父元素是<div class="ct">,父元素的第一个标签是p,所以aa变为红色。
.item1:first-of-type中.item1的元素为<p class="item1">aa</p>，<h3 class="item1">bb</h3>,<h3 class="item1">ccc</h3>,这三个元素的父元素为<div class="ct">,首次出现的类型为p和第一个h3。所以，aa和bb为蓝色。