关于opacity属性的探究

---

上问题！！

在前一段时间我朋友和我讨论到了opcaity的属性问题问题如下：

代码如下清重点关注opcaity

    <!-- css样式 -->
    <style>
        .boxfather {
            width: 500px;
            height: 500px;
            background-color: blue;
            text-align: center;
            padding: 100px;
            box-sizing: border-box;
            opacity: 0.7;
        }
        .boxson {
            width: 300px;
            height: 300px;
            background-color: green;
            padding: 100px;
            box-sizing: border-box;
        }
        .boxgrandson {
            width: 100px;
            height: 100px;
            background-color: yellow;

        }
    </style>

    <!-- html结构 -->

    <div class="boxfather">
        <div class="boxson">
            <div class="boxgrandson">
            </div>
        </div>
    </div>

可见我们只是对父级元素设置了透明度，子元素和孙子元素都没有设置但是效果却是【左未设置透明度，右设置为0.7】

    

然后我们去查手册看opacity属性是否存在继承性

这是w3school给的答案，链接：https://www.w3school.com.cn/cssref/pr_opacity.asp

这是某鸟教程给的答案，连接：https://www.runoob.com/cssref/css3-pr-opacity.html

那么问题来了，我们明明就没有给子孙元素设置透明度为啥就成这样了呢？

 

提出质疑:w3school和菜鸟教程写错了？？

---

于是我们开始探索到底怎么回事，【质疑权威】是非常好的精神，但是一定要有根据的提出于是我们引入了jQuery辅助一探究竟

  <script src="./jquery.min.js"></script>
    <script>
        $(document).ready(function(){
           var sonop = $(".boxson").css('opacity')
           var grandsonop = $(".boxgrandson").css('opacity')
           console.log(sonop,grandsonop);
        })
  </script>

有了jQuery老大哥的帮助我们看一下结果：

？？？？