1.class 和 id 的使用场景?
id具有唯一性，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class用来标识同一类元素，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
2.CSS选择器常见的有几种?
1.基础选择器
| 基础选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素 |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含(不是等于)特定类的元素 |
| element | 标签选择器 |
2.组合选择器
| 组合选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素F |
| E+F | 直接相邻选择器，匹配E元素之后的与他相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 | 没有分隔符，表示既满足class1也满足class2的元素 |
3.属性选择器（不常用）
id,class都是属性。
| 属性选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
4.伪类选择器
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化
伪类列举
状态伪类
基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。常见的状态伪类主要包括：
| 状态伪类选择器 | 含义 |
|---|---|
| E:link | 匹配所有未被点击的链接 |
| E:visited | 匹配所有已被点击的链接 |
| E:active | 匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover | 匹配鼠标悬停其上的E元素 |
| E:focus | 匹配获得当前焦点的E元素 |
结构性伪类
是css3新增选择器，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：
| 结构性伪类选择器 | 含义 |
|---|---|
| :first-child | 选择某个元素的第一个子元素； |
| :last-child | 选择某个元素的最后一个子元素； |
| :nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1（odd奇数，even偶数） |
| :nth-last-child() | 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； |
| :nth-of-type(n) | 匹配其父元素下使用同种标签的第一个子元素（odd奇数，even偶数） |
| :nth-last-of-type(n) | 选择指定的元素，从元素的最后一个开始计算； |
| :first-of-type | 选择一个上级元素下的第一个同类子元素； |
| :last-of-type | 选择一个上级元素的最后一个同类子元素； |
| :only-child | 选择的元素是它的父元素的唯一一个子元素； |
| :only-of-type | 选择一个元素是它的上级元素的唯一一个相同类型的子元素； |
| :empty | 选择的元素里面没有任何内容。 |
5.伪元素选择器
伪元素是对元素中的特定内容进行操作，用于创建一些不在文档树中的元素，并为其添加样式。
伪元素列举
单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
| 伪元素选择器 | 含义 |
|---|---|
| E::first-line | 选择元素文本的第一行。 |
| E::first-letter | 选择元素文本的第一个字母。 |
| E::before | 在元素内容的最前面添加新内容。(after以E子元素中的最后一个存在) |
| E::after | 在元素内容的最后面添加新内容。(after以E子元素中的最后一个存在) |
| E::selection | 匹配用户当前选取的元素 |
:before :after
<div class="box">
<p>这是第一段</p>
</div>
<style>
.box:before{
content: 'start'
}
.box:after{
content: 'end'
}
</style>
- element:before 在element内部创建一个行内元素，作为element的第一个孩子
- element:after 在element内部创建一个行内元素，作为element的最后一个个孩子
- 用:before :after 的目的是为了省标签
- 其中content 是必不可少的
伪元素的应用
- 清除浮动
如果父元素的所有子元素都是浮动的，父元素的高度则无法撑开。可以通过对父元素添加after伪类撑开父元素高度，因为after就是其最后一个子元素。
.clear:after {
content: '';
display: block;
clear: both;
}
- 画一条如下的分割线：
<style>
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
3.替代标签,这样就可以节省html标签
利用伪元素添加小尖角
4.自定义checkbox样式
点击进行笑脸切换: 代码
background-size 设置背景图片大小。其中关键词cover和contain：
cover：缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
contain：缩放背景图片以完全装入背景区，可能背景区部分空白。
6.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
css选择器优先级从高到低分别是:
- 在属性值后面加上 !important 会覆盖页面内任何位置定义的元素样式。（前面后面都覆盖）
但IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。
div{color:#f00!important;color:#000;}
在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00。
IE6及以下浏览器要使!important生效，可用以下代码：
div{color:#f00!important;}
div{color:#000;}
- 作为style属性写在元素标签上的内联样式 <div style="xxx"></div>
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
复杂场景,计算优先级
| 选择器 | 权重值 |
|---|---|
| 行内样式 | a |
| ID 选择器 | b |
| 类，属性选择器和伪类选择器 | c |
| 标签选择器、伪元素 | d |
注意：a的权重最高，b、c、d依次递减，根据abcd的排列得出优先级顺序
!important优先级最高，无视上述规则。当选择器优先级相同时，那么后定义的会覆盖先定义的。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
/*正确顺序*/
a:link {
color: #000;
}
a:visited {
color: #F00;
}
a:hover {
color: #0F0;
}
a:active {
color: #00F;
}
原因：
- 当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
- 当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后
5.以下选择器分别是什么意思?
#header{ /*id选择器，匹配id="header"的元素*/
}
.header{ /*类选择器，匹配class="header"的元素*/
}
.header .logo{ /*后代选择器，匹配class="header"元素后代中class="logo"的元素*/
}
.header.mobile{ /*既满足class="header"也满足class="mobile"的元素*/
}
.header p, .header h3{ /*多元素选择器,为header类下的p标签与header类下的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的元素后代中寻找：匹配属性type值为text的input元素*/
}
6.列出你知道的伪类选择器
| 伪类选择器 | 含义 |
|---|---|
| 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:nth-child(n) | 匹配E的父级元素下的第n个子元素，第一个编号为1 |
| E:nth-of-type(n) | 匹配E的父级元素下所有使用同种标签的第n个元素 |
7.div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child div的父元素的 子元素中第一个元素且标签为div的元素
<body>
<div>123</div>//就是这个元素，如果该标签不为div,则匹配失败
<p>123<p>
<div>123</div>
</body>
div:first-of-type div的父元素的 子元素中，首次出现的div元素
<main>
<p>123<p>
<div>123</div>//就是这个元素
</main>
div :first-child div 下的第一个标签
div :first-of-type div 下的相同标签的第一个
8.运行如下代码，解析下输出样式的原因。
<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 匹配到class="item1"的父级元素下的第一个子元素，即<p class="item1">aa</p>
.item1:first-of-type 匹配到class="item1"的父级元素下所有使用相同标签的第一个元素。 即使用p标签的第一个元素和使用h3标签的第一个元素。
网友评论