选择器的规则结构

图片.png

class 和 id 的使用场景?

• 在HTML文档中可以为多个元素进行指定相同的class属性值；(为多个需要同时修改样式的元素设定相同class值，使之使用同一个类选择器)
• 但在HTML文档中不能存在多个id属性值相同的元素；（为某个特定的元素声明独立的id选择器）

CSS选择器常见的有几种?

• 基础选择器
• 类选择器 .class
• id选择器 #id
• 标签选择器 p
• 通用选择器 *
• 属性选择器 E[attr]
• 组合选择器
• 多元素选择器 E,F
• 后代选择器 E F
• 子选择器 E>F
• 直接相邻祖选择器 E+F,匹配E元素之后的相邻的同级元素F
• 普通相邻选择器 E~F,匹配E元素之后的同级元素F（无论直接相邻与否）
• .class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
• element#id id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
• 伪类选择器
• 伪元素选择器

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

选择器的优先级是由它们各自的特殊性决定，特殊性值表述为四个部分，如0,0,0,0

• 对于选择器给定的各个id属性值，加0,1,0,0
• 对于选择器给定的各个类属性值、属性选择或伪类，加0,0,1,0
• 对于选择器给定的各个元素和伪类元素，加0,0,0,1
• 对于内联声明的特殊性，为1,0,0,0
• 对于标志为！important的声明，会覆盖页面任何位置定义的元素样式！important总是放在声明的最后，如果放在声明的其它位置，整个声明会失效。
  ！important > style属性的内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器自定义

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

按照link-visited-hover-active的顺序声明，因为它们拥有相同的权重、来源和特殊性，因此与元素匹配的最后一个选择器样式覆盖，以这种顺序声明是合理的。
复杂情况下根据选择器的特殊性对权值进行计算，最后采用权值大的样式

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

• 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:hover的选择器

• header .logo~p{

} 匹配元素id值为header的后代中元素class值为logo之后的同级相邻p标签（无论是否直接相邻）的选择器

• header input[type="text"]{

} 匹配元素id值为header的后代中为input标签且属性type为text的选择器

我所知道的伪类选择器

• E:first-child 匹配作为长子（第一个子女）的元素E
• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:focus 匹配获得当前焦点的E元素
• E:lang(c) 匹配lang属性等于c的E元素
• E:enabled 匹配表单中可用的元素
• E:disabled 匹配表单中禁用的元素
• E:checked 匹配表单中被选中的radio或checkbox元素
• E::selection 匹配用户当前选中的元素

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

• div:first-child 匹配符合div选择器，而且必须是其父元素的第一个子节点元素
• div:first-of-type 匹配符合div选择器，而且是与其它同类型、同级的兄弟元素中的第一个元素
• div :first-child 匹配div选择器下第一个子节点元素
• div :first-type-of 匹配div选择器下同种类型、同级兄弟元素中的第一个元素

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

图片.png 图片.png

.item1:first-child{ color: red; }因为p标签的class值为item1，且作为其父元素下第一个子节点元素，所以被匹配到字体颜色变为红色；
.item1:first-of-type{ background: biue; }因为p标签class值为item1，且作为其父元素下相同类型的第一个子节点元素，所以被匹配到背景为蓝色；最后两行的h3标签class值都为item1，但作为相同类型的子节点元素，在该选择器下，只匹配到第一个元素为蓝色背景；