#html #css #dom #css-selectors
#HTML #css #dom #css-селекторы
Вопрос:
Я хочу выбрать слова «Панель мониторинга», «Посещаемость», «Маркум» и «Результаты» и установить для них белый цвет.
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
Я пытался сделать это с помощью :
div a[role="button"] {
color: white;
}
Однако, поскольку у меня есть другие элементы с ролью «Кнопка», все они изменены на белый, что в моем случае нежелательно. Мне нужно настроить таргетинг только на эти четыре слова. Возможно ли это? Любая помощь приветствуется заранее.
Спасибо
Ответ №1:
Используйте родительские элементы в селекторе, чтобы быть более конкретными:
.fpstartwrap > .fpstart > .iconset > div.btn.btn-secondary a[role="button"] {
color: white;
}
Или просто примените класс к тем кнопкам, которые вы используете только для этих четырех кнопок, и используйте этот класс в своем селекторе.
Ответ №2:
Чтобы заставить селектор CSS воздействовать только на кнопку внутри div, используйте > this, чтобы CSS получал все элементы, у которых есть родительский div и роль=button:
div > a[role="button"] {
color: white;
}
если вам действительно нужно быть конкретным, вы можете даже просто добавить специальный класс к кнопкам, с которыми вы хотите действовать, например
<a class="whiteButton" role="button" href="https://rafiee.net/attendance" title="Attendance" alt="Attendance" target="_blank">
Затем для CSS вы можете сделать
.whiteButton {
}
or if only whiteButton inside of div's
div > .whiteButton {
}
or even
div > a > .whiteButton {
}
div > a[role="button"]{
color: white;
background: blue;
} <div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="fpstartwrap">
<div class="fpstart">
<div class="iconset">
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net" title="Dashboard"
alt="Dashboard" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-home"></i>
</div>
Dashboard
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/attendance"
title="Attendance" alt="Attendance" target="_blank">
<div class="navicon" align="center">
<i class="fa fa-3x fa-user-times"></i>
</div>
Attendance
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/q" title="Marcum"
alt="Marcum" target="_parent">
<div class="navicon" align="center">
<i class="fa fa-3x fa-calculator"></i>
</div>
Marcum
</a>
</div>
<div class="btn btn-secondary">
<a role="button" href="https://rafiee.net/user/" title="Results"
alt="Results" target="_self">
<div class="navicon" align="center">
<i class="fa fa-3x fa-id-card-o"></i>
</div>
Results
</a>
</div>
</div>
</div>
</div>
<div class="collapse" id="fpslider">
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net">Rafiee.net</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/attendance">Attendance</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/dailybonus">Daily Bonus</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary" href="https://rafiee.net/q">Marcum Calculator</a>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
</div> Комментарии:
1. Спасибо за ваш ответ. Однако первый подход по-прежнему нацелен на другие элементы, которые я не хочу, чтобы они были включены. Мне нужно более конкретное. Учитывая второй подход, я не уверен, что это возможно, поскольку у меня нет доступа к основному коду. Я хочу добавить css в дополнительный раздел CSS моей темы, поэтому я не думаю, что смогу добавить дополнительный класс к существующему элементу, не так ли?
2. Я обновил код фрагментом. Какие дополнительные элементы получаются, которые вы не пытаетесь получить. Я думал, вам просто нужны «Панель мониторинга», «Посещаемость», «Маркум» и «Результаты». Первый способ, которым я это сделал, получает только эти элементы
3. Также вы можете добавить дополнительные классы к существующим элементам, если вы готовы использовать Javascript. Если вы пытаетесь строго использовать CSS и HTML, то нет, вы не можете добавлять элементы класса