我必须将不同的样式应用于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;
两个p的颜色相同。我如何重新组织我的CSS以使其工作?
答案 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
答案 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
或其他内容)的类定义一个定义,并在另一个class
或id
中使用特殊属性。
另外,请更好地使用缩进,并使用</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>