css权重和继承的问题


html>
<html>
  <head>
    <meta charset="utf8" http-equiv="content-type" content="text/css">
    <title>dsaftitle>
    <style>
      p{
          color: pink;
      }
      div{
        color: red;
      }
      p div{
        color: green;
      }
      
    style>
  head>
  <body>
    <div>bbbb
      <p>aaaa
          <div>ccccdiv>
      p>
    div>
  body>
html>
问题1:为什么aaaa是粉色而不是红色，首先p继承了div，都说继承后权重为0，也就是此时p标签权重为0，但是又定义了p的样式，所以此时p权重为1，而div权重也是1，权重相同的情况下最终结果应该是div里面的red才对啊。
问题2：为什么cccc是红色而不是绿色，按照权重来说p div的权重是2要高于p和div，所以应该执行p div里面的green才对呀

问题1:为什么aaaa是粉色而不是红色，首先p继承了div，都说继承后权重为0，也就是此时p标签权重为0，但是又定义了p的样式，所以此时p权重为1，而div权重也是1，权重相同的情况下最终结果应该是div里面的red才对啊。

<div> 样式设置为红色
<p> 样式设置为粉色
p 为div子元素，则p本身样式覆盖继承的样式

你关于权重的理解是错误的，上一个问答我已经有说明了

问题2：为什么cccc是红色而不是绿色，按照权重来说p div的权重是2要高于p和div，所以应该执行p div里面的green才对呀

p 标签是一个比较特殊的标签，他会在遇到块级元素时断开，自动补全，所以，页面 dom 最后不是 <p><div></div></p> 而是 <p></p><div></div><p></p>

问题1：匹配到aaa的颜色样式只有p{color:pink;}，自然是粉红色的。对p的颜色设置和对div的颜色设置并不冲突。继承的权重与div本身的权重并不相加。
问题2：p标签里面不能放块级标签，所以你的HTML中aaa和ccc那里最后会被解析成如下，自然设置green的地方找不到p里面的div,无效设置。

<p>aaa<p>
<div>ccc</div>
<p></p>
  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7464671
  • 这篇博客也不错, 你可以看下css 圆形的按钮设计
  • 除此之外, 这篇博客: css进阶中的 浮动带来的问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 浮动会带来高度坍塌，一个父盒子包着两个子盒子，给两个子盒子设置浮动后，父盒子会包不住子盒子，父盒子没高度了
      在这里插入图片描述
    • 解决方法：
      • 父元素设置overflow：hidden：没有使用position时使用不能和position配合使用，因为超出的尺寸的会被隐藏
      • 添加一个空div：如果页面浮动布局多，就要增加很多空div，不推荐使用
      • 使用伪元素：推荐使用，建议定义公共类，以减少CSS代码（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

        • 父元素设置

            .box{
  overflow:hidden
  }

        • 添加一个空div

            .clear{
  clear:both
  }
  <div class="box">
  	<div class="left"></div>
  	<div class="right"></div>
  	<div class="clear"></div>
  </div>

        • 使用伪元素(常用)

            .clearfix:after{
  	/*此元素将显示为块级元素，此元素前后会带有换行符*/
  	display:block;
  	/*清除浮动*/
  	clear:both;
  	/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容*/
  	content:""
  	}
  <div class="box clearfix">
  	<div class="left"></div>
  	<div class="right"></div>
  </div>
        :before和:after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
  • 您还可以看一下 孙探老师的CSS核心基础精讲课程中的 CSS入门案例小节, 巩固相关知识点