样式优先级理解(转)

xingda1989

于 2011-07-13 13:51:52 发布

阅读量46

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xingda1989/article/details/83970181

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转自：http://topic.csdn.net/u/20100130/01/db48b639-909d-4f7d-996c-a5adad5a4276.html

浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...

其中样式表又有...

类选择器 < 类派生选择器 < ID选择器 < ID派生选择器

派生选择器以前叫上下文选择器，所以完整的层叠优先级是...

浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级...

还有一点要注意...派生选择器只对容器类标记中的标记起作用...

重给你写一个例子，这个比较清楚...
HTML code


<html>
<head>
    <title></title>
    <style type="text/css">
        div { color: #00FF00 }
        .a1 { color: #0000FF }
        .a1 div { color: #00FFFF }
        .a2 { color: #FF0000 }
        #a2 { color: #FFFF00 }
        #a2 div { color: #FF00FF }
    </style>
</head>
<body>
  <div>我是绿色，内部样式表优先于浏览器缺省</div>
  <div class="a2">我是红色，类选择器优先于内部样式表</div>
  <div class="a2" id="a2">我是黄色，ID选择器优先于类选择器</div>
  <div class="a1">
      <span>我是蓝色，类选择器优先于内部样式表</span>
      <div>我是青色，类派生选择器优先于类选择器</div>
      <div class="a2">我还是青色，类派生选择器优先于所有类选择器</div>
      <div id="a2">
          <span>我是黄色，ID选择器优先于类派生选择器</span>
          <div>我是紫色，ID派生选择器优先于类派生选择器</div>
          <div class="a1">我还是紫色，ID派生选择器优先于所有类选择器</div>
          <div class="a1" id="a1">我还是紫色，ID派生选择器优先于所有ID选择器</div>
          <div class="a1" id="a1" style="color:#000000;">我是黑色，内联样式驾到闲杂人等退下</div>
      </div>
  </div>
</body>
</html>

xingda1989

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
样式优先级理解(转)

转自：http://topic.csdn.net/u/20100130/01/db48b639-909d-4f7d-996c-a5adad5a4276.html浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式...其中样式表又有...类选择器 < 类派生选择器 < ID选择器 < ID派生选择器派生选择器以前叫上下文选择器，所以完整的层叠优先级是......
复制链接

扫一扫

专栏目录