Question

我想在我的网页中找到一个特定的段落 - 这是对的吗？

CSS

div ul li p { /*is this right? */
    color:red;
    font-family:Arial;
}

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
    <div>
        <ul>
            <li><p>Grab me!</p></li>
            <li><p>Me, too!</p></li>
        </ul>
    </div>
        <p>Don't grab me!</p>
    </body>
</html>

我看到一些代码到达......

<p>Grab me!</p>
<p>Me, too!</p>

不添加div ul作为选择器，如下所示：

li p { /* someone do like this */
    color:red;
    font-family:Arial;
}

Answer 1

如果您只想使用li和p标签更改css，请使用此

li > p {
color:red;
font-family:Arial;
}

希望它有所帮助或让我知道，所以我可以帮助你.. :)

Answer 2

关于你的HTML是怎样的。更好的方法是为id应用一些独特的div。请参阅div with id，然后参考子级别div。请看下面的例子。

<div>
    <ul>
        <li><p>Grab me!</p></li>
        <li><p>Me, too!</p></li>
    </ul>
</div>
<p>Don't grab me!</p>
<div>
    <ul>
        <li><p>One more Grab me!</p></li>
        <li><p>One more Me, too!</p></li>
    </ul>
</div>
<p>One more Don't grab me!</p>

在这种情况下，您的代码也将选择另一部分。因此，您必须为任何一个div添加id，然后引用它然后到达它。我希望你知道id应该是独一无二的。只需修改您的代码，如下所示。

<div id="first-level">
    <ul>
        <li><p>Grab me!</p></li>
        <li><p>Me, too!</p></li>
    </ul>
</div>
<p>Don't grab me!</p>
<div id="second-level">
    <ul>
        <li><p>One more Grab me!</p></li>
        <li><p>One more Me, too!</p></li>
    </ul>
</div>
<p>One more Don't grab me!</p>

如下所示应用您的CSS。

div#first-level ul li p {
   color:red;
   font-family:Arial;
}

div#second-level ul li p {
   color:blue;
   font-family:Arial;
}

FIDDLE DEMO

在网页中查找特定段落

2 个答案: