问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于css的加载顺序问题

头像
changes
    27553750

    Image

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

    css
    阅读 6.8k
    5 个回答
    得票最新
    头像
    spencerht
      7.8k2728

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

      头像
      xiaopengji
        6411719

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

        头像
        toBeTheLight
          16.6k41634

          举个可能不太恰当的例子

          <!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并没有生效。
          优先级跟优先解析没有关系,声明优先级的顺序只跟在文档中的位置有关。
          理解不了就当作浏览器做的优化吧，在能显示页面的时候就先显示页面，碰到有样式覆盖的问题再去做重新渲染。

          头像
          夏_57b91dccc8a2e
            26313

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

            头像
            yszou
              4.9k2718

              尤其对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()
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题