Question

我有一个html如下

<!DOCTYPE html>
<html>
    <head>
        <style>
            p{font-size:14pt;color:red;}
        </style>
    </head>
    <body>
        <div>
            <p> this is a p without class defined</p>
        </div>
            <div class = "temp">
            <p> this is a p tag in another div</p>
        </div>
        <div class = "test">
            <p> this is a Original Mail</p>
            <p class="hello"> this is a p tag </p>
            <p> this is a p without class defined</p>
            <div> this is a div tag 
                <p> this is a p tag within the div</p>
            </div>
        </div>
    </body>
</html>

我想通过课堂测试将样式应用于div中的所有p标签。

我尝试像div.test＆gt; p {字体大小：14pt;颜色：红;} 但是这个样式没有被应用到具有类名test的div子div中的p标签。请帮我解决这个问题。

Answer 1

JSFiddle：http://jsfiddle.net/8K2yL/

你想要的选择器是：

div.test p {
    font-size:14pt;
    color:red;
}

这将选择p标记内任何位置的所有div.test标记。

选择器div.test > p只会选择p作为div.test直接子女的{{1}}个标签。

Answer 2

在类名后面指定标签名称，选择在类中找到的所有匹配标签。

.test p{
    font-size:14pt;
    color:red;
}

Answer 3

>选择器选择直接后代。因此，儿童的孩子将被忽视。

更改为：

div.test p {
    font-size:14pt;color:red;
}

Answer 4

就像下面这样做

 div.test p{
         font-size:14pt;
       color:red;
       }

为你提琴DEMO

Answer 5

<style>
  div.test p{
    font-size: 14pt;
    color:     red;
  }
</style>

将样式应用于元素中的所有子元素

5 个答案: