Question

我在Head

中定义了样式标记

<html>
    <head>
        <style>
            p
            {
                font-size:10pt;
                color:green;
            }
            div
            {
                font-size:16pt;
                color:blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <p> hello p in div1 </p>
            <div> hello div in div1 </div>
        </div>
        <div class="div2">
            <p> hello p in div2 </p>
            <div> hello div in div2 </div>
        </div>
    </body>
</html>

这里我想将样式标记范围仅添加到div2。 div1不应该获得样式标记中提到的任何样式。

Answer 1

您可以在css中使用类选择器.来指定要设置样式的内容。例如，如果您只想设置具有类div2的第二个div，则可以将其写为.div2：

<html>
    <head>
        <style>
            .div2 p
            {
                font-size:10pt;
                color:green;
            }
            .div2 div
            {
                font-size:16pt;
                color:blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <p> hello p in div1 </p>
            <div> hello div in div1 </div>
        </div>
        <div class="div2">
            <p> hello p in div2 </p>
            <div> hello div in div2 </div>
        </div>
    </body>
</html>

.div2 p表示apply this style to p elements within any element with the div2 tag

.div2 div表示apply this style to div elements within any element with the div2 tag

现在，如果你想更具体一点，你可以使用div.div2 p和div.div2 div，这意味着div中的p和div元素分别带有div2标记。

Answer 2

使用赋予元素的类使其非常具体。

 .div2 p
    {
    font-size:10pt;
    color:green;
    }
    .div2 div
    {
    font-size:16pt;
    color:blue;
    }

它只会设置第二个div的样式。试试这个

我们如何使用Javascript实现样式标记的范围

2 个答案: