Есть ли какой-либо селектор css для следующего сценария
Мне нужно применить стили только для первого линиякласс в этой структуре, есть ли решение:
.headercontainer .line > *:first-child {
border: 3px solid yellow;
}<div class = "headercontainer">
<div class = "header">step1</div>
<div class = "line"></div>
<div class = "header">step2</div>
<div class = "line"></div>
</div>Если я здесь что-то пропустил, предложите, пожалуйста.
Типичная ошибка селекторов :first-child / :first-of-type, потому что он ищет только положение элементов, но не класс.
Кроме того, если вам нужно применить стили к самому элементу .line, не пишите .line > something.
Ответы 5
Не совсем. Однако вы можете использовать небольшой трюк в качестве обходного пути: установите границу для всех таких элементов, а затем сбросьте границу до значения по умолчанию для всех div, следующих за первым.
.headercontainer .line {
border: 3px solid yellow;
}
.headercontainer .line ~ .line {
border: none;
}<div class = "headercontainer">
<div class = "header">step1</div>
<div class = "line"></div>
<div class = "header">step2</div>
<div class = "line"></div>
</div>Надеюсь это поможет!
С другой стороны, каково назначение элементов .line? Если их единственная цель - служить линией, то ответ будет: не надо. Выбросьте их и вместо этого поставьте нижнюю границу на первом .header. Это упростило бы как HTML, так и CSS.
.headercontainer .header:first-child {
border-bottom: 6px solid yellow;
}<div class = "headercontainer">
<div class = "header">step1</div>
<div class = "header">step2</div>
</div>Я думаю, что ваш второй фрагмент - это ответ настоящий
@val Да, но к тому времени, как я подумал об этом, мой исходный ответ уже был одобрен, так что я не хотел его выбрасывать!
Css не имеет селектора first-of-class для выбора первого класса данного элемента DOM. В вашем случае, когда классные порядки останутся. Тогда вы можете подать заявку
.headercontainer .header:first-child + .line {
color:red;
}
.headercontainer .header:first-child + .line {
color: red;
}
/* or:
.headercontainer .header:first-of-type + .line {
color: red;
}
*/<div class = "headercontainer">
<div class = "header">step1</div>
<div class = "line">red</div>
<div class = "header">step2</div>
<div class = "line">black</div>
</div>Нет. Однако, если вы этого не сделаете, вы можете использовать другой HTML-элемент для элемента 'line'. вы можете использовать :first-of-type
.headercontainer p:first-of-type {
border: 3px solid yellow;
} <div class = "headercontainer">
<div class = "header">step1</div>
<p class = "line">here</p>
<div class = "header">step2</div>
<p class = "line">there</p>
</div>
first-of-type имеет хорошую поддержку браузерами. К сожалению, в CSS нет селектора :first-of-class.
Другой способ сделать это - использовать orderимущество, в котором используется Флексбокс / Сетка:
.headercontainer {
display: flex; /* displays flex-items (children) inline */
flex-direction: column; /* stacks them vertically */
}
.headercontainer .line:first-child {
border: 3px solid yellow;
}
/* or:
.headercontainer .line:first-of-type {
border: 3px solid yellow;
}
*/
.order {
order: -1; /* puts the flex-item back to its desired position or above other siblings, because the default value of the "order" property is "0" */
}<div class = "headercontainer">
<div class = "line">border</div> <!-- needs to be positioned above other siblings in the DOM -->
<div class = "header order">step1</div>
<div class = "header">step2</div>
<div class = "line">no border</div>
</div>В других ответах конкретно объясняется, как написать селектор, который вы просите, однако на самом деле это не лучшая практика.
Чтобы сделать CSS и HTML более удобными в обслуживании и упростить работу для вашего механизма выбора CSS, вам лучше добавить новый класс к элементу, который вы хотите стилизовать по-другому.
Это упрощает изменение CSS и делает HTML более очевидным.