web前端笔试题库之CSS篇( 二 ) _生活百科

A: blue 。
9、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>ul {color:red;}#must-buy {color:blue;}A: blue 。
10、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>.shopping-list .favorite { color: red;}#must-buy { color: blue;}A: blue 。
11、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>ul#awesome { color: red;}ul.shopping-list li.favorite span { color: blue;}A: blue 。
12、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>ul#awesome #must-buy { color: red;}.favorite span { color: blue!important;}A: blue 。
13、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>ul.shopping-list li .highlight { color: red;}ul.shopping-list li .highlight:nth-of-type(odd) { color: blue;}A: blue 。
14、Q: 如下代码中文本“Sausage”的颜色是?
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li></ul>#awesome .favorite:not(#awesome) .highlight { color: red;}#awesome .highlight:nth-of-type(1):nth-last-of-type(1) { color: blue;}A: blue 。
15、Q:#example位置如何变化：
<p id="example">Hello</p>#example {margin-bottom: -5px;}A: 向上移动5px 。
16、Q: #example位置如何变化：
<p id="example">Hello</p>#example {margin-left: -5px;}A: 向左移动5px 。
17、#i-am-useless 会被浏览器加载吗？
<div id="test1"> <span id="test2"></span></div>#i-am-useless {background-image: url('mypic.jpg');}A: 不会
18、mypic.jpg 会被浏览器加载吗？
<div id="test1"> <span id="test2"></span></div>#test2 { background-image: url('mypic.jpg'); display: none;}A: 会被下载。
19、mypic.jpg 会被浏览器加载吗？
<div id="test1"> <span id="test2"></span></div>#test1 { display: none;}#test2 { background-image: url('mypic.jpg'); visibility: hidden;}A: 不会被下载。
20、Q: only 选择器的作用是？
@media only screen and (max-width: 1024px) {argin: 0;}A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only ，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？
<div> <p>I am floated</p> <p>So am I</p></div>div {overflow: hidden;}p {float: left;}A：会形成。
会触发BFC的条件有：