堆棧內存溢出
  簡體   English   中英

CSS：第一個孩子的偽元素

[英]CSS :first-child pseudo-element

 原文  2015-03-17 06:53:38  6   3    html/ css/ html5

問題描述

為什么我的代碼無法按預期工作？ 第一篇文章的background-color必須為綠色。 沒有類或ID的情況下該怎么辦？ PS很抱歉，我的帖子需要更多文字。 抱歉，我的帖子需要更多文字。 

    <!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <title>stack</title>

        <link rel="stylesheet" href="css/style_new.css">
    </head>

    <body> 
        <section>
            <h1>This is H1 header</h1>

            <article>
                <p>
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>
        </section>
    </body> 
</html>

CSS代碼： 

     section article:first-child {
    background-color: green;
}

    section article:last-child {
        background-color: red;
    }

3 個解決方案

解決方案1
 1 已采納  2015-03-17 06:58:06

實際上，區段標記的第一個子代不是h1文章。 因此，請改用以下代碼， 

section article:first-of-type {
  background-color: green;
}

解決方案2
 0  2015-03-17 06:59:42

文章不是本節的第一個孩子-它的h1

僅當article是其容器的第一個或最后一個孩子時，第一個/最后一個孩子選擇器才定位。

可能的CSS： 

section article{
  background-color:green;
}
section article + article{
  background-color:transparent;
}
section article:last-child {
  background-color: red;
}

參見http://jsfiddle.net/rn4wgho2/

解決方案3
 0  2015-03-17 07:05:41

 ![enter image description here][1]

將插頭從該部分拔出所需的h1

這是H1標頭 

        <article>
            <p>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>
    </section>

<div id="text_translate"><p>我在 MDN 頁面上通過了使用選擇器的測試技能，我遇到了 CSS 規則編寫的情況：帶有 class.container 的 div 元素的第一個子元素應用於層次結構中的表元素，但不是其第一個子元素div 元素。 為什么會這樣？ 我是否缺少表格元素的一些一般規則？ 正如我所料，只有第一個 p 元素應該受此規則影響。</p><p> 我附上了 MDN 上使用的 html 代碼和導致此問題的 CSS 解決方案。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .container:first-child {font-size: 150%}.container:first-child::first-line {color: red}</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;p&gt;Veggies es &lt;a href="http://example.com"&gt;bonus vobis&lt;/a&gt;, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.&lt;/p&gt; &lt;p&gt;Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/p&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Fruits&lt;/th&gt; &lt;th&gt;Vegetables&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Apple&lt;/td&gt; &lt;td&gt;Potato&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Orange&lt;/td&gt; &lt;td&gt;Carrot&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Tomato&lt;/td&gt; &lt;td&gt;Parsnip&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Kiwi&lt;/td&gt; &lt;td&gt;Onion&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Banana&lt;/td&gt; &lt;td&gt;Beet&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</pre></div></div><p></p></div>受：first-child 偽類影響，盡管它不是規則設置的元素的第一個孩子<table> </table>

[英]<table> is affected by :first-child pseudo-class although it is not first-child of element the rule is set up for

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用CSS：first-child偽元素 ：first-child和：first-letter令人費解的偽元素語法 使用CSS在：first-child偽選擇器“內部”選擇一個元素 CSS3的第一個和最后一個偽屬性 ：first-child偽不適用 <div id="text_translate"><p>我在 MDN 頁面上通過了使用選擇器的測試技能，我遇到了 CSS 規則編寫的情況：帶有 class.container 的 div 元素的第一個子元素應用於層次結構中的表元素，但不是其第一個子元素div 元素。 為什么會這樣？ 我是否缺少表格元素的一些一般規則？ 正如我所料，只有第一個 p 元素應該受此規則影響。</p><p> 我附上了 MDN 上使用的 html 代碼和導致此問題的 CSS 解決方案。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .container:first-child {font-size: 150%}.container:first-child::first-line {color: red}</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;p&gt;Veggies es &lt;a href="http://example.com"&gt;bonus vobis&lt;/a&gt;, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.&lt;/p&gt; &lt;p&gt;Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.&lt;/p&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Fruits&lt;/th&gt; &lt;th&gt;Vegetables&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Apple&lt;/td&gt; &lt;td&gt;Potato&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Orange&lt;/td&gt; &lt;td&gt;Carrot&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Tomato&lt;/td&gt; &lt;td&gt;Parsnip&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Kiwi&lt;/td&gt; &lt;td&gt;Onion&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Banana&lt;/td&gt; &lt;td&gt;Beet&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt;</pre></div></div><p></p></div>受：first-child 偽類影響，盡管它不是規則設置的元素的第一個孩子<table> </table> CSS 2.1中的第一個孩子偽類 在一節內的幾篇文章中使用偽元素第一個孩子 關於特定元素的CSS`：first-child` 具有無序列表的CSS第一子級偽類（Bootstrap）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM