仙剑问情0.0 2023-04-21 17:08 采纳率: 77.8%
浏览 16
已结题

关于继承优先级层叠问题


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" http-equiv="content-type" content="text/css">
    <title>dsaf</title>
    <style>
      p{
        color: red;
      }
      div p{
        font-size: 55px;
        color: pink;
      }
    </style>
  </head>
  <body>
      <p>这是p标签</p>
  </body>
</html>
请问：
1.为什么结果是红色字体而且不是55px，根据优先级p的优先级是1，div p的优先级是2,为什么会执行p{}而不是div p{}？
2.看结果好像直接连div p{}都没有执行，因为字号不是55px，这是为什么，定义了一个单独的p，又定义了一个继承了div的p，他们也只是颜色冲突，而字号并不冲突呀？
3.最后我想问一下这个div p{}和p{}有什么区别？都是用户样式么（用户自己定义的单独p{}和单独的继承后的p{}）？
  • 写回答

2条回答 默认 最新

  • 守时间的孤岛 2023-04-21 17:21
    关注

    该回答引用chatgpt:
    在该代码中，只有一个p标签，没有div标签，所以div p{}样式规则不会被应用。因此，只会应用p{}的样式规则。
    样式表中的字号单位为px，而不是pt。这可能导致字号看起来比预期的小。另外，如果您的浏览器在调整文本大小时使用了缩放比例，也可能导致文本大小与预期不符。定义单独的p和继承自div的p的样式规则中，字号属性并没有冲突，但是字号大小由于单位的不同和缩放比例的影响，可能会显示不同的大小。
    div p{}和p{}都是CSS选择器。p{}是匹配所有p标签的选择器，而div p{}是匹配所有在div元素内部的p标签的选择器。两个选择器的区别在于它们匹配的元素不同。这两个选择器都可以由用户定义，都是用户样式。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 4月29日
  • 已采纳回答 4月21日
  • 创建了问题 4月21日

悬赏问题

  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 linux驱动，linux应用，多线程