子孙选择器处理不同标签的差异（测试环境FF）

最新推荐文章于 2022-04-14 21:15:20 发布

flying_wind2008

最新推荐文章于 2022-04-14 21:15:20 发布

阅读量305

点赞数

分类专栏： web前端 css 文章标签：测试 div css html ie

本文链接：https://blog.csdn.net/flying_wind2008/article/details/6789907

版权

web前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

之前没注意，这次用到了忽然发现的，不知道是我理解有误还是标签有差异，同一个css对不同标签处理有差，而且没找到规律。

对于p标签，如果它是h1的无差别孙节点（就是子孙标签相同），则它会继承子节点的样式，可以看做h1的子节点，与之相同的还有a标签、li标签、dd标签等；

而div、span、em、ul标签则无论是不是无差别孙节点，都把它当成h1的孙节点

贴出html代码

<body>   
<h1>我是h1  <!-- 看样式可以发现只有*覆盖到h1所以，h1为黑色；-->
	<p>我是h1第一个儿子p <!-- h1所有子孙为red，所有儿子为orange（就近）,这个是儿子，所以是orange-->
    	<p>我是h1的孙子p</p> <!-- 这个虽然是孙子，但是与其父一样也是p，算作儿子，所以是orange。a、li、dd标签也是这样，但span、div、em、ul标签中却把它当孙子-->
    </p>
    <p>我是h1第二个儿子</p> <!-- 儿子，所以orange -->
    <div>我是h1第三个儿子div <!-- 儿子，但是不是p,是div所以color为yellow -->
    	<div>我是h1的孙子div</div> <!-- 孙子，而且其父不是p,不能继承 -->
    	<p>我是h1的孙子p</p> <!-- 孙子，而且其父不是p,不能继承，所以找到h1的子孙中p的颜色，即red -->
    </div>
</h1><br />

<h1>我是h1
	<p>我是h1第一个儿子
    	<p>我是h1的孙子
        	<p>我是h1孙子的儿子
            	<p>我是h1孙子的孙子
                	<div>我是h1孙子的div   <!-- 直到有了其他标签，才将这个标签下面的p算为孙子，以上的所有p都算儿子 -->
                    	<p>我是h1的孙子</p>
                    </div>
                </p>
            </p>
        </p>
    </p>
</h1><!--br换行不能有，任何标签都不能有，否则下面的p就不算临近h1的兄弟 /-->

<p>我是h1后第一个p（h1兄弟） <!-- 兄弟，用h1+p,所以颜色是blue -->
	<p>我是h1后第一个p的儿子</p>
</p><br />

<p>我是h1后第4个p</p><br />
</body>

贴出css代码：

	*{color:black;font-size:12px;}
	h1+p{color:blue;} /*在优先级中算 0，0，1，0， 这个是h1后面第一个p，不是h1中的第一个p*/ 
	h1 p{color:red;font-size:12px;} /*在优先级中算 0，0，1，0 h1内所有子孙*/
	h1>p{color:orange;}/*在优先级中算 0，0，1，0  h1内所有儿子，没有孙子，和上面一样，所以那个在后面就用哪个*/
	h1>div{color:yellow;}/*在优先级中算 0，0，1，0  h1内所有儿子，没有孙子，和上面一样，所以那个在后面就用哪个*/
	p{color:green;} /*在优先级中算 0，0，0，1*/

测试环境为FF,IE678都不支持子选择器，所以没办法测。

可以将里面所有p都替换成span或者div等其他标签看。

下面是p的显示图