CSS - стилизация дочернего элемента, если родительский элемент имеет :: before
Я вызываю и оформляю ссылку с помощью класса myCheckboxLink следующим образом:
css:
table.table-custom tbody td a.myCheckboxLink {
/* styling */
}
html:
<table id = "custom" class = "display table-custom dataTable">
<thead></thead>
<tbody>
<tr id = "row_33" role = "row" class = "odd">
<td class = " dt-checkbox" tabindex = "0">
<a class = "myCheckboxLink" tabindex = "0">
<span class = "myCheckboxSpan">
<i class = "fa fa-check fa-check-checkbox" aria-hidden = "true"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
Если td.dt-checkbox имеет :: before ... Мне нужен другой стиль для myCheckboxLink:
приставка:
<table id = "custom" class = "display table-custom dataTable">
<thead></thead>
<tbody>
<tr id = "row_33" role = "row" class = "odd">
<td class = " dt-checkbox" tabindex = "0">
::before
<a class = "myCheckboxLink" tabindex = "0">
<span class = "myCheckboxSpan">
<i class = "fa fa-check fa-check-checkbox" aria-hidden = "true"></i>
</span>
</a>
</td>
</tr>
</tbody>
</table>
Но это не работает:
css:
table.table-custom tbody td::before a.myCheckboxLink {
display: none;
}
Как мне изменить стиль, если td.dt-checkbox имеет :: before?
Вы хотите переключать стили при нажатии на ссылку?
У меня есть флажок в первом столбце ... и когда на мобильной ширине таблица сворачивается, а затем я хочу скрыть этот флажок, так как вместо этого я получаю кнопку переключения, как здесь datatables.net/extensions/responsive/examples/initialisation /…
Вы знаете, что именно сворачивает стол? Медиа-запрос? matchMedia? JS / jQ?
Взгляните сюда: datatables.net/extensions/responsive/examples/initialisation /…
Это довольно широкое объяснение, вы ожидаете, что я прочту всю страницу?
Я не уверен, что именно сворачивает таблицу ... но я использую DataTable, и в приведенном примере вы можете видеть, что в адаптивном режиме таблица сворачивается и добавляет эту кнопку переключения
Ответы 1
::before в CSS - это не состояние, подобное :hover или :visited. Вместо этого ::before относится к другому элементу внутри элемента, который использовался ранее - псевдоэлементу.
Например, этот код меняет фон для div, пока он завис:
div:hover{background: Red}
Однако этот код стилизует псевдоэлемент внутри div, но помещается перед всеми его дочерними элементами:
div::before{background: Red; content: "I'm red."}
Вот почему существует ни за что, чтобы узнать, есть ли псевдоэлемент с CSS. Потому что это CSS, создающий псевдоэлементы.
Решение:
Когда вы определяете псевдоэлемент для td, также определите стиль для его дочерних элементов.
посмотрите на проблему по-другому, и вы получите ответ --->
:beforeдобавлен только с CSS ----> так что есть стиль, примененный к классу или чему-то еще -> поэтому используйте этот класс, чтобы применить стиль к вашему элементу