说明：

Question

假设网页中有很多元素我如何应用CSS：

无序列表之后的所有<hr>
<hr>

<div>

<span>

<p><article>

<span>

<article>

示例：

#first > p > em
{
    background: #739D00;
    color: #C7F83E;
    padding: .1em;
}

Answer 1

适当的选择器，按顺序：

ul + hr {}
div + hr {}
p > article span {}
article span {}

说明：

+选择器会在给定元素后选择立即的所有元素。通常，A + B会导致在任何元素B之后的第一个元素A被设置为样式。

您也可以使用~代替+，这将选择给定元素之后的所有元素，无论多长时间。

使用ul ~ hr

<ul></ul>
<hr /><!-- i get styled -->
<hr /><!-- me too -->
<hr /><!-- me too -->

使用ul + hr

<ul></ul>
<hr /><!-- i get styled -->
<hr /><!-- nope -->
<hr /><!-- nope -->

>是直系后代。

我对你的问题的假设：

<ul></ul>
<hr /><!-- You want to style THIS -->

<div></div>
<hr /><!-- You want to style THIS -->
<hr /><!-- ... but not this -->

<p>
    <article>
        <!-- there may be more nested elements here... --->
            <span></span><!-- You want to style THIS -->
    </article>
</p>


<article>
    <!-- there may be more nested elements... -->
        <span></span><!-- you want to style THIS -->
</article>

Answer 2

您可以使用这些选择器：

Next-sibling combinator（+）

例如，ul + hr匹配紧跟hr之前的所有ul（忽略非元素节点）。
Following-sibling combinator（~）

例如，ul ~ hr匹配hr之前（不一定是立即）的所有ul。
Child combinator（>）

例如，article > span匹配span的所有子article。
Descendant combinator（）

例如，article span匹配span后代的所有article。

Answer 3

使用border-bottom

而不是<hr>

文章是一个块级项目，实际上取代了<div>代码，<p>代码应该在<article>内，

article {border-bottom:#C3F 8px solid}
article span {font-size:200%; color:#C3F}

ul {border-bottom:#C3F 8px solid}

在html中，看起来像这样：

<article>
 <h1>article headline</h1>
 <p> My paragraph here <span> with a span section</span> and a border below the article, not paragraph.</p>
 <p>Another paragraph here</p>
 </article>
 <ul><li>Item one</li>
      <li>Item two</l>
  </ul>

将css应用于元素“path”

3 个答案:

说明：