Как установить свойство CSS в смежных элементах?

Question

Я пытаюсь установить стиль css из элемента sibling.

Например:

<h4 class='title'>Title</h4> 
<div class='desc1'>    --> This element class is dynamic.. 
    <h4 class="lesson1">Test1</h4> --> This element class is dynamic.. 
</div> 
<div class='des2'>    --> This element class is dynamic.. 
    <h4 class="lesson2">Test2</h4> --> This element class is dynamic.. 
</div> 
<div class='desc3'>    --> This element class is dynamic.. 
    <h4 class="lesson3">Test3</h4> --> This element class is dynamic.. 
</div> 
<div class='desc4'>    --> This element class is dynamic.. 
    <h4 class="lesson4">Test4</h4> --> This element class is dynamic.. 
</div> 

CSS

.title { 
    color:red; 
} 

.title + .desc1 { --> only set the first element as blue. I need to set all desc 
    color:blue 
} 

Я использую Угловые нг-повтор и показать те h4 динамически. В любом случае, я могу использовать отношение класса заголовка для установки свойства h4 в моем случае? Благодаря!

Answer 1

Попробуйте ~

.title { 
 
    color: red; 
 
} 
 
.title ~ div[class^=desc] {/* class name starting with `desc` */ 
 
    color: blue 
 
}

<h4 class='title'>Title</h4> 
 
<div class='desc1'> 
 
    <h4 class="lesson1">Test1</h4> 
 
</div> 
 
<div class='des2'> <!-- class is not starting with `desc` --> 
 
    <h4 class="lesson2">Test2</h4> 
 
</div> 
 
<div class='desc3'> 
 
    <h4 class="lesson3">Test3</h4> 
 
</div> 
 
<div class='desc4'> 
 
    <h4 class="lesson4">Test4</h4> 
 
</div>

Answer 2

Вы можете использовать селектор атрибутов CSS. Попробуйте [class^="desc"]. Это выберет все элементы, класс которых начинается с «desc».

[class^="desc"] { 
 
    /* all elements that have classes that begin with "desc" */ 
 
    color: blue 
 
}

<h4 class='title'>Title</h4> 
 
<div class='desc1'> 
 
    <h4 class="lesson1">Test1</h4> 
 
</div> 
 
<div class='desc2'> 
 
    <h4 class="lesson2">Test2</h4> 
 
</div> 
 
<div class='desc3'> 
 
    <h4 class="lesson3">Test3</h4> 
 
</div> 
 
<div class='desc4'> 
 
    <h4 class="lesson4">Test4</h4> 
 
</div>

Answer 3

HTML:

<div class="desc">    --> This element class is dynamic.. 
    <h4 class="lesson">Test1</h4> --> This element class is dynamic.. 
</div> 
<div class="desc">    --> This element class is dynamic.. 
    <h4 class="lesson">Test2</h4> --> This element class is dynamic.. 
</div> 
<div class="desc">    --> This element class is dynamic.. 
    <h4 class="lesson">Test2</h4> --> This element class is dynamic.. 
</div> 
<div class="desc">    --> This element class is dynamic.. 
    <h4 class="lesson">Test2</h4> --> This element class is dynamic.. 
</div> 

CSS:

.desc .lesson{ 
    color: blue; 
} 

Там нет необходимости, чтобы дать каждому 'DESC' свое уникальное имя. Вы можете просто назвать их одинаковыми и применить CSS выше, чтобы все они были синими.

Answer 4

от того, как понимаю, ваша проблема в том, чтобы добавить правило цвета CSS для Н4 непосредственного потомка «название» класса. Правильно.

Тогда почему бы просто не попробовать.

.title + div {  
    color:blue 
} 

Это просто позволит вам стиль немедленного родственный к <div class='title'>.

Что <div class='desc'>

И если вам нужно добавить различные правила CSS для каждого из этих четырех дивов по алфавиту. Затем, вы можете написать, что-то вроде:

/*First class desc1 */ 
.title + div {  
    color:#00a1ff; 
} 
/*First class desc2' */ 
.title + div + div {  
    color:#00a1ff; 
} 
/*First class ' desc3' */ 
.title + div + div + div {  
    color:#32d2db; 
} 
/*First class ' desc4' */ 
.title + div + div + div + div {  
    color:#32d2db; 
}   

Answer 5

Если я правильно понимаю вашу проблему правильно, вы хотите ребенка h4 s, чтобы иметь один цвет и название, чтобы иметь другой цвет. Если да, то определить цвет для всех H4 сек, а затем установить цвет для конкретного

h4.title as: 
h4{ 
color: blue; 
} 
h4.title{ 
color: red; 
} 

Или это, что вам нужно сделать родственную вещь, и это просто случай образца?