前端4-2-3:.list、层级显示优先级、优化滚动性能

1、input属于窗体元素,层级显示比flash、其它元素都高。请判断这句话的正确与否。
A、正确
B、错误

【知识点:层级显示优先级】frameset > 表单元素 > 非表单元素

  • 在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。
  • 表单元素:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等;
  • 非表单元素:连接(a),div,table,span等。
  • 所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
    • 有窗口元素:select元素,object元素,以及frames元素等等。
    • 无窗口元素:大部分html元素都是无窗口元素。

2、以下哪些方法可以优化滚动性能:()

A、在滚动中对滚动函数进行节流处理

B、滚动中减少导致重绘的操作

C、滚动中减少导致重排的操作

D、通过给滚动内的子元素开启硬件加速

3、以下 HTML 列表中,文字颜色是黑色的行有哪几行?

<style>
.list{color:black}
.list>li:nth-child(2n){color:red}
.list>li:nth-child(3n+1){color:green}
.list>li:nth-child(3n+2){color:blue}
</style>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

A、第 1 行

B、第 3 行

C、第 7 行

D、第 9 行

【解析】

n是从0开始的,但nth-child()是从1开始计数的(nth-child(1)是第一个子元素,没有nth-child(0).

.list{color:black}:1,2,3,4,5,6,7,8,9,10都是黑色
.list>li:nth-child(2n){color:red}:0(nth-child(0)不存在,忽略),2,4,6,8,10变成红色
.list>li:nth-child(3n+1){color:green}:1,4,7,10变成绿色
.list>li:nth-child(3n+2){color:blue}:2,5,8变成蓝***r />

后面的样式会覆盖前面的样式

综上所述:2,5,8为蓝色;1,4,7,10为绿色;6为红色;3,9为黑色

猜你喜欢

转载自blog.csdn.net/weixin_44015669/article/details/115388666