开发者社区> 问答> 正文

css中后代选择器有三层标签的优先级比两层的高?

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
ol em{color:green}
</style>
</head>

<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

显示的结果为(后定义的css选择器起作用):
screenshot
而把style里面的ul em {color:red; font-weight:bold;}后代选择器改为下面:
ul ol em {color:red; font-weight:bold;}(多一层ol标签)

显示结果就是(前面的css选择器起作用):
screenshot
为什么?多了一层优先级就高一些吗?

展开
收起
杨冬芳 2016-06-06 11:00:53 2255 0
1 条回答
写回答
取消 提交回答
  • IT从业

    ID、类、元素他们的优先级别是不一样的。

    你可以看看这篇文章应该能解决你的问题。

    CSS学习笔记(四) CSS优先级

    2019-07-17 19:27:54
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载