css 嵌入式无效果

最近在学习网站设计中的css部分，遇到了一个让我困扰许久的问题：嵌入式css无效！

html>
    head>
        style type="text/css">
        p {
                color: red;
        }
        /style>
    /head>
    body>
        div class="box">
            p>
    这是一段文字/p>
        /div>
    /body>
    /html>
    

就像上面那段代码一样，想要将段落文字颜色设置为红色，但实际效果并没有变化。

经过反复排查，发现问题所在：在html中，元素的选择器需要精确指定才可以生效。而在上面的代码中，只指定了p元素，但是这个p元素却套在了一个div元素中，导致样式无法嵌入。

html>
    head>
        style type="text/css">
        .box p {
                color: red;
        }
        /style>
    /head>
    body>
        div class="box">
            p>
    这是一段文字/p>
        /div>
    /body>
    /html>
    

将代码改为上面这样，指定选择器为.box p，这样在.box元素中的所有p元素才会受到影响。

所以，在写css嵌入式代码时需要注意，要精确指定选择器才可以让样式生效。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！