下面供应了18道有关css的测试题，人人能够尝试做一下，一些题能够延长深挖出许多知识点。
测试题的答案在尾部。人人能够在批评区举行议论。
1.css辨别大小写吗？
ul {
MaRgIn: 10px;
}这类写法是不是准确？
2.为行内元素设置 margin-top 和 margin-bottom是不是会产生影响？
3.为行内元素设置 padding-top 和 padding-bottom是不是会转变它的位置？
4.假如你有一个<p>元素，它的font-size为10rem, 当用户转变浏览器窗口大小时，该元素的字体是不是会相应式转变？
5.伪类:checked作用于radio 或许 checkbox，然则不作用于<option>？
6.在HTML中，伪类:root老是婚配 <html> 元素？
7.translate()函数完成了沿着 z 轴挪动元素？
8-14题是针对同一个html,循规蹈矩。
8.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
ul {
color: red;
}
li {
color: blue;
}笔墨Sausage的色彩终究显现的是什么？
9.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
ul li {
color: red;
}
#must-buy {
color: blue;
}笔墨Sausage的色彩终究显现的是什么？
10.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
.shopping-list .favorite {
color: red;
}
#must-buy {
color: blue;
}11.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
ul#awesome {
color: red;
}
ul.shopping-list li.favorite span {
color: blue;
}笔墨Sausage的色彩终究显现的是什么？
12.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
ul#awesome #must-buy {
color: red;
}
.favorite span {
color: blue!important;
}13.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
ul.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
color: blue;
}14.
html:
<ul class="shopping-list" id="awesome">
<li><span>Milk</span></li>
<li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>css:
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}笔墨Sausage的色彩终究显现的是什么？
15-17题是针对同一个html,循规蹈矩
15.
html:
<div id="test1">
<span id="test2"></span>
</div>css:
#i-am-useless {
background-image: url('mypic.jpg');
}没有引用到的款式所包括的资本是不是会被浏览器下载下来？
16.
html:
<div id="test1">
<span id="test2"></span>
</div>css:
#test2 {
background-image: url('mypic.jpg');
display: none;
}页面加载的时刻，mypic.jpg该图片是不是会被下载下来？
17.
html:
<div id="test1">
<span id="test2"></span>
</div>css:
#test1 {
display: none;
}
#test2 {
background-image: url('mypic.jpg');
visibility: hidden;
}页面加载的时刻，mypic.jpg该图片是不是会被下载下来？
18.
@media only screen and (max-width: 1024px) {
margin: 0;
}only的作用是什么？
答案：
1.css不辨别大小写，MaRgIn这类写法是准确的。
2.否。
3.否。
题目二跟题目三是同一个题目范围内，会有点坑，
行内元素还分为行内不可替代元素和行内替代元素。
关于input这类替代元素，margin和padding各方向均有作用。
关于span，a等这些不可替代元素，padding-left,padding-right,margin-right,margin-left均有结果,padding-top,padding-bottom,margin-top,margin-bottom无结果。
4.否。
5.否。 https://developer.mozilla.org…
6.是。
7.否。
8.blue。
9.blue。
10.blue。
11.blue。
12.blue。纵然没有!important，也是blue
13.blue。
14.red。
15.否。
16.会。
17.否。
18.only操作符示意仅在媒体查询婚配胜利的情况下运用指定款式。能够经由过程它让选中的款式在老式浏览器中不被运用,防备老旧的浏览器不支持带媒体属性的查询而运用到给定的款式。
