CSS to child p tag未根据父div的类进行应用

时间:2017-03-24 06:35:29

标签: html css

我必须将不同的样式应用于p标签,该标签是在2个单独的div下创建的。



.wrapper .extraclass p{
  color: green;
}

.wrapper .class1 p{
  color: red;
}

<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
&#13;
&#13;
&#13;

两个p的颜色相同。我如何重新组织我的CSS以使其工作?

5 个答案:

答案 0 :(得分:0)

以这种方式给你css,所以它可以覆盖全局css,

.wrapper .class1 p{
  color: red;
}
.wrapper .extraclass p{
  color: green;
}

.wrapper .class1 p会选择.class1中的所有p标记,如果您要覆盖.extraclass p的css,则必须在.wrapper .class1 p css

之后将其放置

.wrapper .class1 p {
  color: red;
}

.wrapper .extraclass p {
  color: green;
}
<div class="wrapper">
  <div class="class1 class2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <div>
<div>

<div class="wrapper">
  <div class="extraclass class1 class2">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <div>
<div>

答案 1 :(得分:0)

问题可能是你在lasp p-tag中同时拥有.extraclass和.class1 尝试对它们重新排序,使其显示“class1 class2 extraclass”。 如果没有,那么您可能必须从最后一个p-tag中删除class1。 或者你总是把“重要的”放在“颜色:红色”背后,但我不推荐这个:)

答案 2 :(得分:0)

你的CSS很好..我只是重新构建了你的HTML:

.wrapper .extraclass p {
  color: green;
}

.wrapper .class1 p {
  color: red;
}
<div class="wrapper">
  <div class="class1 class2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<div class="wrapper">
  <div class="extraclass"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum 
    neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit 
    massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing 
    elit.</p>
  </div>
</div>

我从extraclass中取出了class1并更正了未关闭的<div>s

请看这里:http://codepen.io/anon/pen/ZeRKJZ

答案 3 :(得分:0)

只要给出正确的风格优先权 下面的类将覆盖上层

.wrapper .class1 p{
  color: red;
}

.wrapper .extraclass p{
  color: green;
}
<div class="wrapper">
<div class="class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>

<div class="wrapper">
<div class="extraclass class1 class2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div>
<div>

答案 4 :(得分:0)

您的第二个类定义在应用于p时会覆盖第一个类定义。我建议为具有共享属性(使用.wrapper或其他内容)的类定义一个定义,并在另一个classid中使用特殊属性。

另外,请更好地使用缩进,并使用</div>来关闭div

.extraclass
{
     color: blue;
}

.class1
{
     color: red;
}
<div class="wrapper">
    <div class="class1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

<div class="wrapper">
    <div class="extraclass">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum neque eu mauris eleifend, eget dapibus diam pulvinar. Curabitur hendrerit massa ut dui ultrices.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>