css选择器

1.class和id的使用场景

class是用于给元素分类，可以重复；而id是唯一的，一个id只能给一个元素，不能重复。

2.CSS选择器常见的有几种。

css语法由两个个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。属性和值被冒号+空格隔开。
h1 {color： red; font-size: 14px; }
1.基础选择器
* 通配符选择器

#id     id选择器
  tips：id选择器常常用于建立派生选择器。
#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
上面的样式只会出现在id 是sidebar的元素内的p标签上。这个元素可能是div或者是一个表格

.class     类选择器
tips:类选择器的第一个字符不能使用数字！他无法在fireflx中起作用。
.fancy td {
    color: #f60;
    background: #666;
    }这是与is选择器用法一样的类选择器，样式作用于fancy这个元素下的td标签上，其他标签不受影响。

td.fancy {
    color: #f60;
    background: #666;
    }这个样式仅作用于类名为fancy的td元素上，而有相同类名的其他元素却不受该规则限制。（用td元素来选择fancy类）

例如：p {color:gray;}

组合选择器

E,F
E F
  tips：有“，”的是多元素选择器，只有空格的是后代选择器。
E>F
   tips：E元素下的所有直接子元素F。
   tips：空格与>的区别是。无论嵌套多少层后代选择器都可以直接对自己内部的直接或多层进行样式的控制；而子元素选择器是不能控制直接子元素下嵌套的孙元素的。。。

E+F     
   tips:匹配E元素之后的相邻的同级元素F
E~F
   tips：匹配E元素之后的同级元素F（无论是否直接相邻只要是元素F，但必须是同级）
element.class/p.class
   tips：必须满足同时拥有，才能被这个样式规则控制。
   tips:id选择，class选择器，属性选择器连写的时候中间没有分隔符，“，”和“#”本身充当分隔符

属性选择器

E[attr]         匹配所有具有属性attr的元素
E[attr=value]   匹配属性值仅为value的元素
E[attr～=value] 适用于由空格分隔的属性值
E[attr^=value]  匹配属性atr的值以value开头的元素
E[attr$=value]  匹配属性atr的值以value结尾的元素
E[attr*=value]  匹配属性atr的值包含value的元素

伪类选择器
E:first-child 匹配元素E的第一个子元素。
E:lang（c）匹配lang属性等于c的元素
a链接中的：
a:link 匹配所有未被点击的链接 a:hover 匹配所有悬停其上的元素 a:active 匹配鼠标已经骑上按下,还没有释放的元素 a:visited 匹配所有已被点击过的链接 tips：权重从下往上依次加重，随着操作的进行样式依次覆盖。
表单中的：
E:focus 匹配获得当前焦点的E元素 E:enabled 匹配表单中可用的元素 E:disabled 匹配表单中禁用的元素 E:checked 匹配表单中被选中的radio或checkbocx元素 E::selection 匹配用户当前选中的元素
伪元素选择器
E:before：在E元素之前插入的内容 E:after：在E元素之后插入的内容

3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？

!important：在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
内联样式：style="..."
ID选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

权重顺序依次增大。因为浏览器是按照就近原则来解释的，也就是从下到上。
在CSS中，如果对于相同元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。即a:link、a:visited、a:hover、a:active

5.以下选择器分别是什么意思?

#header{
}选择id为header的元素
.header{
}选择类为header的所有元素
.header .logo{
}选择类名里既有header又有logo的
.header.mobile{
}选择类名里既有header又有mobile的
.header p, .header h3{
}选择所有类名为header下的p后代与h3后代共用样式。
#header .nav>li{
}选择id为header下类名为nav的元素的直接子元素。
#header a:hover{
}选择id为header的a链接鼠标放上去时候的状态
#header .logo~p{
}选择id 为header元素下的类名为logo的元素后的所有相邻的p元素。
#header input[type="text"]{
}选择id为header元素下type属性值为text的input元素。

6.div:first-child和div:first-of-type的作用和区别

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个
tips：
nth-child(n)匹配其父元素的地n个子元素，选择几，括号内就写几
nth-of-type(n)同理。

7.输出样式的原因

.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

.item1:first-child{color: red;}
这是指定所有元素中第一个类名为item的元素的字体颜色为红色。
.item1:first-of-type{background: blue;}
为每一类元素中第一个类名为item的元素添加蓝色背景。