class 和 id 的使用场景?

• class在使用时可以将多个标签设为同一类，一个页面中可以有多个class出现
• id在使用时每个页面中的id是唯一的，id能够快速获取标签对象
• 另外：还有name的使用场景name能在form表格中给服务器获取列表的变量名，同时在input type="radio"时相同的name会构成同组单选按钮

CSS选择器常见的有几种?

基础选择器：

• *，匹配页面任何元素，因为它没有针对性的特点让我们很少去使用它
• 井id，id选择器，对页面中某个id元素进行选择
• .class,类选择器，选择页面中的某一类
• element，标签选择器，直接选择页面的标签

组合选择器：

• E,F 多元素选择器，同时选中页面中的多个元素
• E F 后代选择器，同时选中E元素下的后代F,并且不仅仅是F，子元素向下递归
• E>F子元素选择器，选择E中的所有直接子元素F
• E+F选择E和F两个相邻的同级元素
• E~F弟弟选择器，同时选择E和F两个元素，无论E和F是否相邻
• .E.F id和class同时选择时中间没有分隔符，可以直接用.相连

属性选择器：

• E[attr]：如div[id]即为可以取到所有标签是div且有id的属性
• E[attr = value]:匹配属性attr值为value的元素，div[id=test],匹配id=test的div

伪类选择器：

• E:first-child 匹配作为长子（第一个子女）的元素E
• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:active 匹配鼠标已经其上按下、还没有释放的E元素
• E:hover 匹配鼠标悬停其上的E元素
• E:focus 匹配获得当前焦点的E元素

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

！improtant>行内样式>id选择器>类选择器>标签>通配符>继承>浏览器默认的属性

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

状态分析：未点击时会有link-悬停时会有hover-点击后会有active-点击完成会变成visited
在点击完成后应该会有link之后会有visited才能把hover和active覆盖掉，所以在配置顺序时应该先是link-visited-hover-active

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

#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类中的li标签}
#header a:hover{选择header的后代a中状态为hover的属性}
#header .logo~p{选择id为header后代中logo的同级元素p}
#header input[type="text"]{选择id为header且input类型为text的元素}

列出你知道的伪类选择器

• E:first-child：匹配元素E的第一个子元素
• E:nth-child：匹配元素E的第n个子元素
• E:enabled和E:disabled：匹配元素E的状态为可用/不可用
• E:checked和E:selection：匹配元素E的状态为单选框选中/复选框选中
• a:link：未被点击的链接
• a:visited：已被点击的链接
• a:hover：鼠标悬停其上的链接
• a:active：鼠标已经按下，但没有释放的链接

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

• div:first-child:选择其父元素首个类型为div的标签,且第一个元素必须是div才能选中
• div:first-of-type:选择父元素中div这种标签的第一个

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

<style> .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;}：是表示选择类为item1的标签中的第一个设置颜色为红色
• .item1:first-of-type{ background: blue;}：是表示选择类为item1的标签中每种标签的第一个背景为蓝色