关于css的加载顺序问题

changes
  • 274

Image

请问这道题为什么选AB
尤其对A不能理解,同时加载应该是对的,但是如果css2文件很小优先加载完了,那按照加载完了优先解析,那不是应该css1的样式覆盖css2吗
但实际上是css2覆盖css1啊

回复
阅读 2.5k
5 个回答

学过css的一定知道选择器权重和优先级。
假设main2.css加载更快,优先解析之后,main1.css加载完毕,随后解析。
在同样的样式优先级下,是有两条样式,一条来自于main1.css,一条来自于main2.css,按html文档中先后顺序进行合并计算,即后者合并前者。

css是按顺序解析;优先下载完的先解析;解析的先后不影响css相同规则后面的覆盖前面的;它是和位置有关;和解析没有关系;

举个可能不太恰当的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css" id="prev">
        </style>
        <style type="text/css" id="now">
            #demo{
              height: 100px;
              width: 100px;
              background-color: red;
            }
        </style>
        <style type="text/css" id="next">
        </style>
    </head>
    <body>
      <div id="demo"></div>
    </body>
    <script type="text/javascript">
        document.querySelector('#prev').innerHTML = "#demo{background-color:black}"
        setTimeout(function () {
          document.querySelector('#next').innerHTML = "#demo{background-color:green}"
        },2000)
    </script>
</html>

#now先解析了,然后是#prev然后是#next。然后#prev并没有生效。
优先级跟优先解析没有关系,声明优先级的顺序只跟在文档中的位置有关。
理解不了就当作浏览器做的优化吧,在能显示页面的时候就先显示页面,碰到有样式覆盖的问题再去做重新渲染。

优先级别与解析的顺序并无多大关系,css规定的优先级!important>style>link
同样的东西,比如link或者同样的样式,后者覆盖前者,和位置有关

尤其对A不能理解,同时加载应该是对的,但是如果css2文件很小优先加载完了,那按照加载完了优先解析,那不是应该css1的样式覆盖css2吗

这种问题自己写代码就可以验证的。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS顺序</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8888/css/a" />
<link rel="stylesheet" type="text/css" href="http://localhost:8888/css/b" />
</head>
<body>
看看我的颜色
</body>
</html>

服务端:

# -*- coding: utf-8 -*-

import time
from functools import partial
import tornado.web
import tornado.httpserver
import tornado.ioloop
import tornado.gen


class CssAHandler(tornado.web.RequestHandler):

    @tornado.gen.coroutine
    @tornado.web.asynchronous
    def get(self):
        content = '''
        body { color: red; }
        '''
        self.set_header('content-type', 'text/css')
        IL = tornado.ioloop.IOLoop().current()
        IL.add_timeout(time.time() + 5, partial(self.finish, content))


class CssBHandler(tornado.web.RequestHandler):

    def get(self):
        content = '''
        body { color: blue; }
        '''
        self.set_header('content-type', 'text/css')
        self.finish(content)



Handlers = [
    ('/css/a', CssAHandler),
    ('/css/b', CssBHandler),
]

def main():
    from tornado.options import options
    application = tornado.web.Application(Handlers)
    server = tornado.httpserver.HTTPServer(application)
    server.listen(8888)
    print 'SERVER IS STARTING ON %s ...' % 8888
    tornado.ioloop.IOLoop().current().start()

if __name__ == '__main__':
    main()
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏