CSS zu Kind-p-Tag nicht basierend auf der Klasse der Eltern div

Ich muss verschiedene Stile auf P-Tag, die unter 2 seprate divs erstellt wird, anwenden.CSS zu Kind-p-Tag nicht basierend auf der Klasse der Eltern 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>

Die Farbe für beide P ist gleich. Wie kann ich meine CSS umorganisieren, damit dies funktioniert?

Quelle

2017-03-24 techrookie

Es gibt viele Antworten jetzt ... Unabhängig davon, welche Sie sich entscheiden, so stellen Sie sicher, dass Sie das ''

' tags correctly with '

–

Dank @PatrickManser schließen. Bekannt. – techrookie

Setzen Sie auf diese Weise CSS, so dass es über globale CSS außer Kraft setzen kann,

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

.wrapper .class1 p alle p-Tags innerhalb .class1 wählen, wenn Sie CSS von .extraclass p außer Kraft setzen wollen, müssen Sie es nach .wrapper .class1 p CSS setzen

.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>

Quelle

2017-03-24 06:37:39

Danke Abhishek. – techrookie

Das Problem könnte sein, dass Sie sowohl .extraclass und .class1 im lasp p-tag haben Versuchen Sie, sie neu zu ordnen, damit es "Class1 class2 extraclass" sagt. Wenn nicht, müssen Sie möglicherweise Klasse 1 aus dem letzten P-Tag entfernen. Oder Sie können immer setzen wichtig hinter dem „color: red“ aber ich würde nicht empfehlen :)

Quelle

2017-03-24 06:38:50

Danke. Das Markup wird automatisch generiert. Ich habe keine Kontrolle über die Klassenaddition in das Div. – techrookie

Ihre CSS war in Ordnung .. ich Ihre HTML ein wenig gerade neu strukturiert:

.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>

ich nahm die class1 von Extraklasse aus und korrigiert die unclosed <div>s

Schauen Sie hier: http://codepen.io/anon/pen/ZeRKJZ

Quelle

2017-03-24 06:40:43

Danke, aber ich kann das Markup nicht ändern. Es ist automatisch generiert.Ich kann nur mit CSS spielen. – techrookie

Okay, nur für das nächste Mal: Das solltest du in deiner Frage erwähnen :) –

Kopiere dat @Patrick – techrookie

Genau die richtige Priorität Stil geben die unter Klasse Oberschicht

.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>

außer Kraft gesetzt wird

Quelle

2017-03-24 06:41:44 AimeTPGM

Ihre zweite Klassendefinition die erste overrode wenn auf p angewendet wird. Ich empfehle eine Definition für Klassen, die immer gemeinsame Eigenschaften haben (unter Verwendung von .wrapper oder etwas anderes) und besondere Eigenschaften in einem anderen class oder id.

Verwenden Sie auch besser die Einrückung und verwenden Sie </div>, um eine div zu schließen.

.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>

Quelle

2017-03-24 06:53:54 toonice

CSS zu Kind-p-Tag nicht basierend auf der Klasse der Eltern div

Antwort

Verwandte Themen