Попытка применить CSS
.content>span:first-child{
color: red;
font-size: 12px;
font-weight: bold;
}
<span class = "content">
<svg xmlns = "http://www.w3.org/2000/svg">
<use xlink:href = "assets/icons.svg#back-button"></use>
</svg>
<span> Lorem ipsom </span>
<!-- only this span font color should be red -->
<span>
<span> </span>
</span>
</span>
только для первого пролета. Я пробовал, но это не работает. Если кто знает помогите найти решение.
Демонстрация: https://stackblitz.com/edit/angular-svg-use-gvmekn?file=src%2Fapp%2Fapp.component.html
Вы можете использовать первый тип, например:
.content > span:first-of-type {
color:red;
}
Вы можете сделать это, просто предоставив span класс, подобный следующему
Старый:
<span> Lorem ipsom </span>
Новый:
<span class = "firstspan"> Lorem ipsom </span>
(Редактировать: извините, забыл пометить как код, поэтому он не отображался правильно)
затем вы можете добавить имя класса в файл css следующим образом:
.firstspan {
/* this is a example of code that will make the text red*/
color: red;
font-size: 12px;
font-weight: bold;
}
Надеюсь, это поможет.
Проблема в том, что селектор :first-child
применяется только в том случае, если нужный вам span
является первым потомком .content
.
В вашем случае первый ребенок - это тег svg
, поэтому он не работает.
Есть 3 способа обойти это:
Сделайте селектор .content > span:nth-child(2)
. Это будет работать в приведенном выше примере, но снова сломается, если вы когда-нибудь поместите дополнительные элементы между рассматриваемым диапазоном и вашим svg.
.content > span:first-of-type
. Кажется, это то, что вам нужно, то есть первый промежуток, который является дочерним элементом .content
.
span.some-meaningful-classname
— это дает вам возможность точно выбрать, к каким промежуткам применить класс, добавив classname = "some-meaningful-classname"
к вашему промежутку.
Вам решать, с чем идти, в зависимости от ваших требований.
Кроме того, здесь есть хорошая ссылка на селекторы CSS: https://www.w3schools.com/cssref/css_selectors.php
:first-of-type
CSS-псевдокласс :first-of-type представляет первый элемент своего типа среди группы родственных элементов.
https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type
span.content > span:first-of-type {
color: red;
}
<span class = "content">
<svg viewBox = "0 0 10 2" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "10" y2 = "0" stroke = "black" />
</svg>
<span> Lorem ipsom </span>
<!-- only this span font color should be red -->
<span>
Child
<span> Inner child </span>
</span>
</span>
+
Соседний родственный комбинатор (+) разделяет два селектора и соответствует второму элементу, только если он непосредственно следует за первым элементом, и оба являются дочерними элементами одного и того же родительского элемента.
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
svg+span {
color: red;
}
<span class = "content">
<svg viewBox = "0 0 10 2" xmlns = "http://www.w3.org/2000/svg">
<line x1 = "0" y1 = "0" x2 = "10" y2 = "0" stroke = "black" />
</svg>
<span> Lorem ipsom </span>
<!-- only this span font color should be red -->
<span>
Child
<span> Inner child </span>
</span>
</span>
Поскольку .container
также является диапазоном, объявления перекрывают друг друга.
Для этого вам просто нужно настроить таргетинг на n-го дочернего элемента, например span:nth-child(2)
или любой другой диапазон, который вы хотите, с помощью nth-child('child No.'). Вот решение:
HTML:
<span class = "content">
<svg xmlns = "http://www.w3.org/2000/svg">
<use xlink:href = "assets/icons.svg#back-button"></use>
</svg>
<span> Lorem ipsom </span>
<!-- only this span font color should be red -->
<span>
<span> </span>
</span>
</span>
CSS:
span:nth-child(2) {
color: red;
font-size: 12px;
font-weight: bold;
}