CSS基础（二）

class和id的使用场景

id：适用与指定元素
class：适用与多个有共同样式的元素

CSS常见选择器

基础选择器

• * 通用选择器
• #id id选择器
• .class class选择器
• element 类选择器

组合选择器

• E,F 多元素选择器，同时匹配元素E或元素F
• E F 后代选择器，匹配E元素的所有后代F
• E>F 子元素选择器，匹配E元素的所有子元素F
• E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
• E~F 普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）

属性选择器

• E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
• E[attr =value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div
• E[attr ~=value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
• E[attr ^=value] 匹配属性attr的值以value开头的元素
• E[attr $=value] 匹配属性attr的值以value结尾的元素
• E[attr *=value] 匹配属性attr的值包含value的元素

选择器的优先级计算

简单场景

1. 在属性后面有！important时，优先级最高
2. 作为style属性写的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器的自定义

复杂选择器

• 行内样式 ==>a
• ID选择器 ==>b
• 类、属性选择器和伪类选择器 ==>c
• 标签选择器、伪元素 ==>d
  从上到下，优先度以此降低。

a:link、a:hover、a:active、a:visited的使用顺序

a:link{
color: blue;
}
a:visited{
color: red;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}

a首先是一个没点击过的链接（a:link)，当鼠标放在a链接上(a:hover)，再点击(a:active)，点击后即为已访问过的链接(a:visited)。
样式层层覆盖。

常见的伪类选择器

• E:first-child 匹配元素E的第一个子元素
• E:link 匹配所有未被点击过的链接E
• E:visited 匹配所有已被点击过的链接E
• E:active 匹配鼠标已按下且未释放的E元素
• E:hover 匹配鼠标悬停其上的元素E
• E:focus 匹配获得当前焦点的元素E
• E:lang(c) 匹配lang属性等于c的元素E
• E:enabled 匹配表单中可用的元素
• E:disabled 匹配表单中禁用的元素
• E:cheked 匹配表单中被选中的radio或checkbox元素
• E:selection 匹配用户当前选中的元素
• 更多选择器

p:first-child和p:first-of-type的作用和区别

• p:first-child父元素下第一个且为p的元素

<style>
p:first-child{
color:red;
}
</style>
<div>
      <p>第一个元素——p</p>                   字体为红
      <div>第二个元素——div</div>             字体为黑
</div>
<div>
      <div>第一个元素——div</div>             字体为黑
      <p>第二个元素———p</p>                  字体为黑
</div>

• p:first-of-type 父元素下第一个p元素

p:first-of-type{
color:red;
}
<div>
      <p>第一个元素——p</p>                   字体为红
      <div>第二个元素——div</div>             字体为黑
</div>
<div>
      <div>第一个元素——div</div>             字体为黑
      <p>第二个元素———p</p>                  字体为红
</div>

问题1

#header{
}/*id为header的元素*/
.header{
}/*class为header的元素*/
.header .logo{
}/*后代选择器，class为header下所有class为logo的元素*/
.header.mobile{
}/*class为header和mobile的元素*/
.header p, .header h3{
}/*class为header下所有p和h3元素*/
#header .nav>li{
}/*id为header下所有class为nav的元素下所有li元素*/
#header a:hover{
}/*id为header下所有鼠标在其上方的a元素*/
#header .logo~p{
}/*id为header下所有class为logo后所有同级的p元素*/
#header input[type="text"]{
}/*id为header下所有input标签中有type属性为text的元素*/

问题2

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>/*该元素即是.ct中第一个元素，也是.ct中第一个p元素，所以它即是红字也是蓝背景*/
   <h3 class="item1">bb</h3>/*该元素是.cd中的第二个元素，但是却是第一个h3元素，所以它仅是背景为蓝色*/
   <h3 class="item1">ccc</h3>/*该元素是.cd中的第三个元素，也是第二个h3元素，所以它的样式是浏览器的默认样式*/
 </div>