h3是p的子标签，但是用父辈选择器和子标签选择器都选不中

来源：2-1 常用文本样式属性

WYW265672

2022-03-29 22:48:27

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 16进制表示法 */
        .para1 {
            color: #ff3366; ;
        }
        .para2 {
            /* #aabbcc可以简写为#abc */
            color: #f36;
        }
        .para3 {
            /* 黑色#000 */
            color:#000;
        }
        .para4 {
            /* 白色#fff */
            color:#fff;
            background-color: #f36;
        }
        .para5 {
            color: rgb(255, 0, 0);
        }
        .para6 {
            /* rgba可以设置透明度，兼容到IE9 */
            color:rgba(255, 0, 0, 0.2)
        }
        .para7 {
            /* 加粗 */
            font-weight:bold;
        }
        p.para9>h3 {
            /* 取消加粗 */
            font-weight:normal;
        }
        .para10 {
            /* 文字倾斜 */
            font-style: italic;
        }
        i {
            /* 取消倾斜 */
            font-style: normal;
        }


    </style>
</head>
<body>
    <p class="para1">只争朝夕</p>
    <p class="para2">只争朝夕</p>
    <p class="para3">只争朝夕</p>
    <p class="para4">只争朝夕</p>
    <p class="para5">只争朝夕</p>
    <p class="para6">只争朝夕</p>
    <p class="para7">只争朝夕</p>
    <p class="para8">只争朝夕</p>
    <p class="para9">
        <h3>只争朝夕</h3>
    </p>
    <p class="para10">只争朝夕</p>
    <i>只争朝夕</i>
</body>
</html>

h3是.para9的子标签，但是style里面

p.para9 h3、

p.para9>h3

都不能选中h3，反而是用相邻兄弟选择器p.para9+h3可以选中，怎么回事啊？

上面的代码就不能实现取消加粗。

写回答

1回答