如何选择具有特定类的div中的第一个段落(CSS2)

vbopmzt1 于 2023-05-30 发布在其他

关注(0)|答案(4)|浏览(111)

我有一个包含许多<p>元素的<div>，需要只对每个<div>中的第一个<p>应用一些样式，并使用特定的类（cnt）。

请注意，这个问题可能与SO上的其他问题类似，但我需要的角色应该只适用于类cnt，这使得它有所不同。

//I use YUI 3 Reset and Grid:
<link href="http://yui.yahooapis.com/3.4.0/build/cssfonts/fonts.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/3.4.0/build/cssgrids/grids.css" rel="stylesheet" type="text/css" />

        <div class="cnt">
             <p>Number 1</p>
             <p>Number 2</p>
             <p>Number 3</p>
        </div>

            // I'm using this class without success!"
           .cnt p:first-child
            {
                background-color:Red;
            }

    // Other classes could create some conflict
    .cnt p
    {
        margin: 10px 0px 10px 0px;
    }
    .cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6
    {
        font-size: 16px;
        font-weight: 700;
    }
    .cnt ul, .cnt ol
    {
        margin: 10px 0px 10px 30px;
    }
    .cnt ul > li
    {
        list-style-type: disc;
    }
    .cnt ol > li
    {
        list-style-type: decimal;
    }
    .cnt strong
    {
        font-weight:700;   
    }
    .cnt em
    {
        font-style:italic;
    }
    .cnt hr
    {
        border:0px;
        height:1px;
        background-color:#ddddda;
        margin:10px 0px 10px 0px;
    }
    .cnt del
    {
        text-decoration:line-through;
        color:Red;
    }
    .cnt blockquote 
    {   margin: 10px;
        padding: 10px 10px;
        border: 1px dashed #E6E6E6;
    }
    .cnt blockquote p
    {
        margin: 0;
    }

PS：我需要它在CSS 2（无论是少CSS3：第一类型工程伟大）

css

来源：https://stackoverflow.com/questions/7473646/how-to-select-the-first-paragraph-in-a-div-with-a-specific-class-css-2

4条答案

按热度按时间

ui7jx7zq1#

你的榜样应该很管用

Demo

交替法

Live Demo

尝试使用first-of-type选择器。

.cnt p:first-of-type{
    background-color:Red;
}

它是一个CSS3选择器，但不能在IE8上工作。

赞(0）回复(0）举报 2023-05-30

tvokkenx2#

人们总是忘记的一件事是相邻选择器，在IE7+中工作（在某种程度上），试试这个：

HTML

<div class="paragraph">
    <p>some paragraph</p>
    <p>some paragraph</p>
    <p>some paragraph</p>
    <p>some paragraph</p>
    <p>some paragraph</p>
</div>

CSS

p {
    color:black;
}

.paragraph p {
    color:red;
}

.paragraph p + p {
    color:black;
}

http://jsfiddle.net/andresilich/AHHrF/

赞(0）回复(0）举报 2023-05-30

wixjitnu3#

下面是一个使用不同方法的例子，没有使用：first-child。
http://jsfiddle.net/chricholson/dp3vK/6/
它涉及到为所有p标签设置样式（以获得通用样式），然后只有p标签在p标签之后的地方才会影响更多的样式。您可以利用这一点，将所有p标记设置为第一个标记的样式，然后覆盖其他标记

赞(0）回复(0）举报 2023-05-30

juzqafwq4#

<div class="cnt">
         <p>Number 1</p>
         <p>Number 2</p>
         <p>Number 3</p>
    </div>

去你的css
.cnt p：第一个类型{
给予你想要的风格

赞(0）回复(0）举报 2023-05-30

我来回答

如何选择具有特定类的div中的第一个段落(CSS2)

4条答案

相关问题

热门标签

最新问答