九、伪类选择器
（1）将最后一栏背景设置为灰色，补全横线处数字。
<style> .item:nth-last-of-type(________) { background-color: gray; } </style> <ul class="list"> <li class="item">2</li> <li class="item">3</li> <li class="item">5</li> <li class="item">6</li> </ul>
答案：1
:nth-last-of-type(n)匹配属于其父元素的第 N 个指定类型的子元素，从最后一个 子元素开始计数， :nth-last-of-type(1)则可选取属于其父元素的最后一个 li 元素
（2）划去内容不是质数的<li></li>，补全横线处数字。
<style> .item:nth-last-child(________) { text-decoration: line-through; } </style> <ul class="list"> <li class="item">2</li> <li class="item">3</li> <li class="item">5</li> <li class="item">8</li> </ul>
答案：1
划去内容不是质数的 li 元素，首先判断哪个 li 元素的内容不是质数；
上述代码最后一个 li 元素的内容为 8 不是质数，则要选取最后一个 li 元素 .item:nth-last-child(1)
（3）要实现当鼠标悬停到a标签时移除下划线，请补齐选择器。
a:________{ text-decoration: none; }
答案：hover
（4）需要将单数行文本的字体颜色设置为红色，偶数行文本的字体颜色设置为蓝色，请补齐选代码 。
<style> p:nth-of-type(odd) { color: red; } p:nth-of-type(______) { color: blue; } </style> <div> <p>CSDN能力认证中心</p> <p>C1见习能力认证</p> <p>C4专项能力认证</p> <p>C5全栈能力认证</p> </div>
答案：even
even 偶数行、odd 奇数行
十、伪元素选择器
（1）现需要实现首行文本为红色，请补全代码片段。
<style> p::_______{color: red;} </style> <p>CSDN软件工程师能力认证对标名企技术标准<br/>校招/转岗/加薪必备。</p>
答案：first-line
（2）现需要实现在文字结尾添加一张图片，请补全代码片段。
<style> p::_______ {content: url('./bg.png');} </style> <p>CSDN软件工程师能力认证</p>
答案：after
（3）现需要实现给文本请输入用户名设置样式，请补全代码片段。
<style> input::_______ {content: url('./bg.png');} </style> <input type="text" placeholder="请输入用户名">
答案：placeholder
（4）现需要将li元素前的项目符号修改为*，请补全代码片段。
<style> ul li::____ { content: '*'; } </style> <ul> <li>C1 见习工程师能力认证</li> <li>C4 专项工程师能力认证</li> <li>C5 全栈工程师能力认证</li> </ul>
答案：marker
十一、CSS优先
（1）现有如下代码片段，hello world的最终显示颜色为color: ________
<style> #son.bt p {color: #111999;} #father>div p {color: #333444;} </style> <div id="father"> <div id="son" class="bt"> <p>hello world</p> </div> </div>
答案：#111999
根据CSS选择器权重计算
第一个选择器权重 = 100 + 10 + 1 = 111
第二个选择器权重 = 100 + 0 + 1 + 1 = 102
（2）现有如下代码片段，hello world的最终显示颜色为color: ________
<style> .text1 {color: #999998 !important;} #son {color: #00ff00;} </style> <p id="son" class="text1" style="color: #ff0000;">hello world</p>
答案：#999998
在一个样式声明中使用!important时，这个样式将覆盖其他的任何声明，与优先级无关
十二、块级元素和行内元素
行内元素：
不独占一行，默认不自动换行
宽高、上下边距不可以控制，仅有左右边距可以控制且会对周围元素产生影响
一般只能包含内容和其他行内元素，不可包含块级元素
设置宽高无效，宽高默认为内容的宽高
常见行内元素：span、label、a、em、strong、img
设置display属性为display: inline可将元素转换为行内元素
块级元素：
在浏览器显示时总是独占一行
宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响
可以包含内容、行内元素和其他块级元素
宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
常见块级元素：div、form、footer、h1-h6、ol、ul、p、video
设置display属性为display: block可将元素转换为块级元素
行内块级元素：
综合块级元素与行内元素的特性
不独占一行
元素宽高、内外边距均可设置，上下左右边距均会对周围元素产生影响
宽高未设置时默认为内容宽高
常见行内块级元素：button、input、textarea、select
设置display属性为display: inline-block可将元素设置为行内块级元素
（1）现需要设置a的顶部外边距，需要将其设置为块级元素，请补齐代码片段
a { display: ________; margin-top: 10px; }
答案：block
（2）现有以下代码，请问此时span元素的高度为_____？
<style> span { height: 50px; line-height: 28px; } </style> <span>CSDN能力认证中心</span>
答案：28px
span元素为行内元素，为行内元素设置宽，行内元素的宽高为内容的宽高
十三、盒子模型
（1）现有如下代码片段，请问标准盒模型中div的实际占位高度为_______px
div { width: 100px; height: 100px; margin: 5px; }
答案：110
标准盒模型实际占位高度 = height + padding-top + padding-bottom + margin-top + margin-bottom + border-top + border-bottom
在上述题目中，该盒模型只设置了height和margin，【margin:5px;】表示margin-top、margin-bottom、margin-left、margin-right均为5px
div的实际占位高度 = height + margin-top + margin-bottom = 100 + 5 + 5 = 110
（2）现有以下代码，请问最终div的实际宽度是_______px
div { box-sizing: border-box; width: 200px; height: 100px; padding: 5px; margin: 10px; }
答案：200
怪异盒模型的实际大小 = 盒模型设置的width、height，宽高已经包含了border和padding
（3）现有以下代码，请问最终div的实际高度是_______px
div { box-sizing: content-box; width: 150px; height: 150px; padding: 5px; margin: 10px; }
答案：160
box-sizing: content-box;表示div为标准盒模型
div实际高度 = width + padding-top + padding-bottom + border-top + border-bottom
十四、定位
absolute定位：元素相对于最近的非static定位的祖先元素定位进行偏移，元素脱离文档流；
relative定位：相对于元素自身原始位置定位，元素不脱离文档流，即原来元素所占的空间不会改变；
static定位：页面上的每个盒子从上到下、从左到右依次排列的布局；
fixed定位：相对于浏览器窗口进行定位，元素脱离文档流。
（1）使div.box2定位在div.box1上方，横线处可填写的最大整型数字是
<style> .box { position: relative; } .box1 { position: absolute; width: 400px; height: 400px; background: yellow; z-index: _______; } .box2 { position: absolute; width: 200px; height: 200px; background: orange; z-index: 9; } </style> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div>
答案：9
z-index属性值越高，层级越高，层级高的元素会覆盖层级低的元素
z-index值相同时，后面的元素会覆盖前面的
box2的z-index值为9，box1的z-index值设置小于或等于9时，即可实现box2定位在box1上方
十五、浮动
（1）现要求将main中的section元素在一行排列，请补全代码片段
<style> main { width: 500px; } section { width: 80px; height: 80px; margin: 10px; background-color: cadetblue; ___________: left; } </style> <main> <section></section> <section></section> <section></section> <section></section> <section></section> </main>
答案：float
使用浮动属性也可实现文字环绕图片的效果
（2）现有以下代码片段，要求实现box1和box2在同一行排列，box3排在box1和box2下方，补全代码片段
<style> .box1, .box2 { width: 300px; height: 500px; background-color: skyblue; float: left; } .box3 { width: 800px; height: 100px; background-color: #f51; ______: both; } </style> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div>
答案：clear （清除浮动）
box1和box2均为浮动元素，清除浮动即可使box3排在box1和box2下方
