这个问题问得好选什么

问题对人有帮助,内容完整,我也想知道答案
问题没有实际价值,缺少关键内容,没有改进余地
discuz的文档中有这么一句话:
勿使用冗余低效的 CSS 写法, 例如:ul li a span { ... }
不知道为什么这种写法会是冗余低效?
如果说直接使用标签选择器不好,那么改成这样呢:ul.test li a span
关于选择器的层级问题,我不理解为什么超过三级会不好?
补充:我作了个测试:
&div class="row"&
&div class="haha"&
&ul class="rul"&
&li class="rli"&&span class="ss" id="hi"&你们好&/span&&/li&
//选择器性能测试
function test(fn){
var start=+new Date();
for(var i=0;i&1000000;i++){
var re=+new Date()-
console.log("用时:"+re);
function a(){
$(jquery)--document.querySelector
//document.querySelector("div div ul li span");
//document.querySelector("div.row div ul li span");
//document.querySelector("div.row&div&ul&li&span");
//document.querySelector("div.row .haha .rul .rli .ss");//
//document.querySelector(".row .ss");
//document.querySelector(".ss");
//document.querySelector("span.ss");
//document.querySelector("#hi");
//535--116
//document.querySelector("span#hi");
我作了上面的测试,结论是:1.性能最优的选择器是:id与class ,id 略快一些,但页面中每多一个id就会在js中多一个全局变量,显然用id作选择器是不好的。
2.span#hi性能比#hi差,我看过一些文章说前者会更好,但从测试的结果来看并没有。
3.层级多的选择器,无论是用标签还是用class,性能都比较差。这点以下很多回答也都提到了,但我还是不太明白,这与我的直觉相矛盾。按理说层级多,实际上缩小了查找的范围,不应该查找速度更快才对吗?
打个比喻:在某个区域的某个楼层的某个方向的某个房间里有个叫做"haha"的人,你要怎样才能更快地找到它?是只告诉你它的名字,还是告诉你它所在的区域,楼层,方向,房间号,再去查找会比较快?
另外,很多人提到关于代码的可维护性问题,我觉得这是因人而异的吧,我觉得少写添加一些id与class写起来更方便,多层级也更方便定位css的作用区域,更易于维护。比如css中存在这两种代码:A:.content{}.title{}.p{}.li{}
B:.content{}.content .title{}.content p{}.content p li{}
不是很明显B这种写法会更方便维护吗?而且可以更好地控制css代码的作用域,不是吗?
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
看到有几位同学回答说是选择器太长会影响性能。没错,性能是其中的一个方面,但是以现在浏览器的性能是不会因为几个过长的选择器而产生性能问题的。之所以不推荐这么写,主要原因还是要从 CSS 代码的可维护性的方面进行考虑。
还是来一个例子吧,假设你需要展示一个新闻列表,你可以会写下面的结构:
&li&&a href="#"&&span&杨幂被网友批“下巴前倾像乌龟”,真相曝光很心酸&/span&&/a&&/li&
&li&&a href="#"&&span&大S带孩子累出心脏病 妹妹小S:现在已经好多了&/span&&/a&&/li&
&li&&a href="#"&&span&不错哟!林妙可被曝通过中国音乐学院美声二试&/span&&/a&&/li&
&li&&a href="#"&&span&永远十七岁!林志颖出道25周年容颜几乎未改&/span&&/a&&/li&
padding: 10
list-style:
text-decoration:
ul li a:hover {
text-decoration:
ul li a span {
color: #333;
font-size: 14
这样写有没有问题?答案是没有明显的问题。它实现了我们想要的样式,至少,它是 work 的。
但是,我们说,这样写不是最好的。
首先,这样写把 CSS 的选择器和 html 结构耦合在了一起。意思是,如果这样写 CSS 选择器,对应的我们的 html 结构只能是上面例子中的这种,如果要改一个标签,还要去对应的样式文件中去修改选择器。
举个例子:如果哪一天,需求变了,这个新闻列表变成了一个热门新闻排行榜,为了更好的兼顾 html 语义,我们需要把 ul 标签(无序列表)换成 ol 标签(有序列表)。这个时候,我们样式文件中的选择器就都失效了。
那么,改成 class 就会解决这个问题吗?下面我们就看一下改成 class 的情况:
先来个简单点的,只给 ul 添加一个 class 属性,其他的保持不变。
&ul class="news-list"&
&li&&a href="#"&&span&杨幂被网友批“下巴前倾像乌龟”,真相曝光很心酸&/span&&/a&&/li&
&li&&a href="#"&&span&大S带孩子累出心脏病 妹妹小S:现在已经好多了&/span&&/a&&/li&
&li&&a href="#"&&span&不错哟!林妙可被曝通过中国音乐学院美声二试&/span&&/a&&/li&
&li&&a href="#"&&span&永远十七岁!林志颖出道25周年容颜几乎未改&/span&&/a&&/li&
那么,我们对应的 CSS 就可以改成下面这样了。
.news-list {
padding: 10
.news-list li {
list-style:
.news-list li a {
text-decoration:
.news-list li a:hover {
text-decoration:
.news-list li a span {
color: #333;
font-size: 14
现在,我们可以放心的替换 ul 标签,而不会影响到列表的样式了。
同样的,我认为,我们没有必要使用 li 这个标签选择器,它限制了列表中的每一项必须使用 li 标签。在这里就不过多展开了,感兴趣的话可以找一些 BEM 相关的内容看看,例如。
另一个比较容易理解的原因是,如果页面中还有其他的列表,也使用了 ul -& li -& a -& span 的结构,像我们上面这样写选择器就会「误伤」其他的列表,影响它们的样式。
至于题主提到的为什么选择器的层级不建议超过三层,我在这里做个简单的解释:
过多的层级会导致选择器越来越长,以至难以维护。
举个例子,如果我们的页面中有多个新闻列表,使用的是上面例子中的那个 html 结构,现在有个需求是把其中的某个列表的文字颜色改成灰色(#666),要怎么做?要么加长选择器的长度,要么使用一个 id 选择器或者 class 选择器。总之,就是想办法写一个 specificity 值比原来选择器的 specificity 值更大的选择器来覆盖它。久而久之,选择器就会变得越来越长,越来越难以维护。
就 ul li a span 这个选择器来说,我觉得可以简写成 ul span,同样的,ul li a 可以简写成 ul a,中间多个的那个 li 有什么用呢?当然啦,如果能换成 class 选择器就更好了。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
写代码,应本着尽量精简够用的原则。如果能用一行代码实现的,不使用两行。
这个问题也是同理。如果能使用这个选择器去选择元素,说明这个选择器不够高效。为什么不够高效?只要计算的步骤多,就会占用计算资源(时间、内存等)。题主可以想一下你想要选中的元素,一定不用上面四个标签的方法也可以获取到。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
说一下规则匹配成功的过程,你试着模拟一遍:
浏览器解析到一个span element, 并且发现css规则里面有一个写着span的规则 ul li a span,开始尝试是否匹配成功
从span开始往父层上找,看看能否匹配到a (还不需要是直接父结点,只要链上有a就算,所以会一直往上匹配直到html或者浏览器剪枝发现已经不可能匹配为止)
找li(同上)
找ul(同上)
所以这个算法复杂度是指数级的假设写到后面你的页面有大约2000个elements同时存在(SPA中型差不多就这个大小),大概有15层element嵌套,第15层节点中有100个左右的span,那确定不能匹配a最多要14层查找,li 13层, ul 12层,再乘上span自己本身匹配的计算,这个页面交互基本就卡住了,就算不考虑交互的静态页面,这个运算量也是完全应该去避免的
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
举个例子,如果让你用JS(不能用querySelector)获取你要的元素你会实现?
你应该不会一层一层的去查找,肯定会想着用最少的计算量来达到目的。css选择器背后的代码实现也是如此,你的选择器就是参数,传入的参数越多,解析就越慢。
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
之所以建议css选择器的层级不要过多的原因在我看来主要有以下三点:一 层级太多会造成代码冗余,违背了代码简洁的规范,也会造成文件过大;二 层级太多会造成代码可读性差,不方便他人阅读;三 浏览器的css解析是从右到左解析的,浏览器先会找出最右侧选择器的所有匹配元素,然后再逐一往左解析根据选择器筛选。因此css层级过多会造成解析时间过长,影响页面性能!
而之所以建议不使用标签选择器也是因为匹配的元素过多,因此建议使用类选择器和id选择器精确匹配
答案对人有帮助,有参考价值
答案没帮助,是错误的答案,答非所问
主要是考虑可维护性和可扩展性, 建议定义类名的形式, 尽量不要对标签做一些特殊的样式定义.毕竟项目的需求会时时改变!
当项目需要改变时, 不至于需要大改代码!
同步到新浪微博
分享到微博?
关闭理由:
删除理由:
忽略理由:
推广(招聘、广告、SEO 等)方面的内容
与已有问题重复(请编辑该提问指向已有相同问题)
答非所问,不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因(请补充说明)
我要该,理由是:
在 SegmentFault,解决技术问题
每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们,都在这里:
获取验证码
已有账号?扫二维码下载作业帮
3亿+用户的选择
下载作业帮安装包
扫二维码下载作业帮
3亿+用户的选择
这个题目选什么?经济业务的发生,会引起资产、负载与权益发生增减变动的情况有——A、资产和负载的同时增加B、资产和权益的同时减少C、资产增加和权益增加D、资产减少和权益增加E、资产增加(减少)和负载权益增加(减少)———————————分割线————————————这个题目本身是什么意思啊?
作业帮用户
扫二维码下载作业帮
3亿+用户的选择
平衡:资产=负债+所有者权益企业经济业务的发生对资产、负债和所有者权益的影响大概有以下几种:一、资产内部、负债内部、所有者权益内部的有增有减二、资产与负债同增同减三、资产与所有者权益同增同减四、负债与所有者权益有增有减所以选ABCE
为您推荐:
其他类似问题
扫描下载二维码更多疑问请点击这里哦
出境游尽在穷游App
千万旅行者的选择
IOS/Android扫码下载
美国必问Top10
请问怎么知道要把寄到哪里去?我要去出差3个月,B1B2,打算在申请签证,下面这个问题不知道选什么?What is your c...
来自帖子《》
请问怎么知道要把寄到哪里去?我要去出差3个月,B1B2,打算在申请签证,下面这个问题不知道选什么?What&is&your&current&country/territory&of&residence?&If&you&are&presently&in&Canada,&you&should&select&Canada.&不知道选china还是USA
 442人浏览
 1 个回答
 1 人关注
你这个情况我不清楚呢,建议咨询的签证处。由阿基米德原理(F=G)结合相关知识.可以推得F=Vg.从而看出物体受到的浮力大小与物体 和液体的 有关. 有些爱思考的同学进一步提出.除上述两个因素外.浮力的大小是否还与别的什么因素有关?其中.一个比较具体的问题是:物体所受浮力大小是否与物体的形状有关?针对这个问题.若提供下列器材由你选择.你将选择哪些器材.怎样进行探究? 供选择的器材 题目和参考答案——精英家教网——
暑假天气热?在家里学北京名师课程,
& 题目详情
由阿基米德原理(F=G)结合相关知识,可以推得F=Vg,从而看出物体受到的浮力大小与物体&&&& 和液体的&&&& 有关. &&& 有些爱思考的同学进一步提出,除上述两个因素外,浮力的大小是否还与别的什么因素有关?其中,一个比较具体的问题是:物体所受浮力大小是否与物体的形状有关?针对这个问题,若提供下列器材由你选择,你将选择哪些器材、怎样进行探究? & 供选择的器材有:弹簧测力计,三个形状不同的小石块,橡皮泥,烧杯、细线和水. & (1)你选择的器材是:&&&&&&&&&&&&&&&&&&&&&&&&&
& (2)你的探究方案(即实验步骤)是:&&&&&&&&&&&&&&&&&&&&&&&&&&&
(3)你如何根据探究过程中观察到的现象或获得的数据得出结论:&&&&&&&&&&&&&&&&&&&&&&
排开液体的体积&& 密度 & (1)弹簧测力计、橡皮泥、烧杯、细线和水;
(2)实验步骤:
&&&&& ①用细线将橡皮泥吊在弹簧测力计上,测出橡皮泥重G; ②将橡皮泥浸没水中,记下测力计的示数F1; ③改变橡皮泥形状,将橡皮泥浸没水中,记下测力计的示数F2; ④再改变橡皮泥形状,将橡皮泥浸没水中,记下测力计的示数F3 (3)结论:求出橡皮泥各次在水中所受的浮力。若各次所受浮力相等,说明浮力大小与形状无关;若各次所受浮力不等,说明浮力大小与形状有关 或者 (2)实验步骤 ①用细线将橡皮泥吊在弹簧测力计上,将橡皮泥浸没水中,记下测力计的示数F1; ②改变橡皮泥形状,把橡皮泥浸没水中,记下测力计的示数F2; ③再改变橡皮泥形状,把橡皮泥浸没水中,记下测力计的示数F3 (3)结论:比较橡皮泥各次浸没水中时测力计示数。若测力计的示数相等,说明浮力大小与形状无关;若测力计的示数不等,则说明浮力大小与形状有关
科目:初中物理
来源:物理教研室
由阿基米德原理F=G,那么在液体中物体受到的浮力F=G=    && ,从中我们看出浮力的大小只与    & 和    & 两个因素有关.
科目:初中物理
来源:三点一测丛书 八年级物理 下 上海科技版课标本 上海科技版课标本
由阿基米德原理(F浮=G排液)结合相关知识,可以推得F浮=ρ液V排液g,从而看出物体受到的浮力大小与物体________和液体的________有关.
有些爱思考的同学进一步提出,除上述两个因素外,浮力的大小是否还与别的什么因素有关?其中,一个比较具体的问题是:物体所受浮力大小是否与物体的形状有关?针对这个问题,若提供下列器材由你选择,你将选择哪些器材、怎样进行探究?
供选择的器材有:弹簧测力计,三个形状不同的小石块,橡皮泥,烧杯、细线和水.
(1)你选择的器材是:________,
(2)你的探究方案(即实验步骤)是:________.
(3)你如何根据探究过程中观察到的现象或获得的数据得出结论:________.
科目:初中物理
来源:101网校同步练习 初三物理 人教社(新课标2001-2年通过) 人教实验版
由阿基米德原理(F浮=G排液)结合相关知识,可以推出F浮=ρ液V排液g,从而看出物体受到的浮力大小与物体排开液体的体积和液体的密度有关.
有些爱思考的同学进一步提出:物体所受浮力大小是否与物体的形状有关?针对这个问题,若提供下列器材由你选择,你将选择哪些器材、怎样进行探究?
供选择的器材有:弹簧测力计,三个形状不同的小石块,橡皮泥,烧杯、细线和水.
(1)你选择的器材是:________.
(2)你的探究方案(即实验步骤)是:
(3)你是如何根据探究过程中观察到的现象或获得的数据得出结论的:
科目:初中物理
来源:2006年新课标中考模拟试题(八)
由阿基米德原理(F浮=G排液)结合相关知识,可以推得F浮=ρ液V排液g,从而看出物体受到的浮力大小与物体排开液体的体积和液体的密度有关.有些爱思考的同学进一步提出,除上述两个因素外,浮力的大小是否还与别的什么因素有关?其中,一个比较具体的问题是:物体所受浮力大小是否与物体的形状有关?针对这个问题,若提供下列器材由你选择,你将选择哪些器材、怎样进行探究?
供选择的器材有:弹簧测力计,三个形状不同的小石块,橡皮泥,烧杯、细线和水.
(1)你选择的器材是:________
(2)你的探究方案(即实验步骤)是:________
(3)你如何根据探究过程中观察到的现象或获得的数据得出结论:________
精英家教网新版app上线啦!用app只需扫描书本条形码就能找到作业,家长给孩子检查作业更省心,同学们作业对答案更方便,扫描上方二维码立刻安装!
请输入姓名
请输入手机号扫二维码下载作业帮
拍照搜题,秒出答案,一键查看所有搜题记录
下载作业帮安装包
扫二维码下载作业帮
拍照搜题,秒出答案,一键查看所有搜题记录
always与动词一般时连用和always与动词进行时连用,二者之间有什么区别?这个问题应该选什么?I have lost my key again.I ____ things.A.always lose B.am always losing C.always lost D.have always lost正确答案为什么是B?
作业帮用户
扫二维码下载作业帮
拍照搜题,秒出答案,一键查看所有搜题记录
和动词一般时连用,表示“永远,始终,总是”例如:The
east.太阳总是从东方升起.又如:She
welcome她总是让人有宾至如归的感觉.和动词进行时连用,表示“...
为您推荐:
其他类似问题
扫描下载二维码}

我要回帖

更多关于 处理这个问题 英文 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信