Как выбрать дочерние элементы с общим базовым классом и дополнительным классом?
Каждый раз, когда вы устанавливаете соединение, обязательно закройте его после завершения работы. Он работал для меня, как если вы используете
Connection con = null;
PreparedStatement pst = con.prepareStatement("...query... ");
/*
do some stuff
*/
pst.executeQuery();
pst.close();
con.close();
3 ответа
Вы можете думать об этом по-разному и нацеливаться на все элементы, а затем сбросить стиль, в котором присутствует только класс banner, но вам нужно обратить внимание на пробелы в атрибуте класса:
.banner {
color:red;
}
[class="banner"] {
color:blue;
}<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>
<div class="banner "><p>I will be red!!!</p></div> Чтобы избежать проблемы пробелов, вы можете рассмотреть некоторые JS и использовать функцию trim(). Вот еще один ответ, где я использовал тот же трюк: https://stackoverflow.com/a/52557233/8620333
Вы также можете комбинировать это с :not()
.banner:not([class="banner"]) {
color:red;
}<div class="banner"><p>Header</p></div>
<div class="banner customer-service"><p>Specific Header</p></div>
<div class="banner early-talent"><p>Other Specific Header</p></div>
<div class="banner "><p>I will be red!!!</p></div>
Если у всех ваших дополнительных 12 классов есть дефис, вы можете назначить их с помощью селектора атрибутов с подстановочными знаками , примененного к классу .banner, например:
.banner[class*="-"] p
Демо :
.banner[class*="-"] p {
color: red;
}<div class="banner"><p>Unstyled Header</p></div>
<div class="banner customer-service"><p>Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner early-talent"><p>Other Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner other-class"><p>Another Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div>
<div class="banner another-class"><p>One More Styled Header</p></div>
<div class="banner"><p>Unstyled Header</p></div> Вы также можете использовать .banner[class*=" "] p, но это будет «неудачно» технически и применимо к любому ситуации, когда у вас есть class="banner " (например, исходный класс banner, за которым следует пробел) ... в случае, если вы можете динамически добавлять или удалять классы с помощью JavaScript, PHP или чего-то еще.
Если между 12 классами нет общего символа, вам может потребоваться использовать JavaScript для их выбора или применить третий класс к элементам, которые имеют по крайней мере .banner и еще один класс, и просто выбрать этим классом. Перестройка HTML может быть лучшим решением, так что вы можете сделать свой CSS простым.
Вы можете использовать .banner > p {} или .banner p {}, если ваши абзацы не обязательно являются прямыми детьми.
РЕДАКТИРОВАТЬ
Моя цель - применять стилизацию ТОЛЬКО к элементам, которые имеют .banner.other-class p, а не базовый .banner p.
Есть ли способ сделать это без написания отдельных стилей CSS для каждого из 12 классов?
Вы можете определить свои правила для пользовательского класса, например так:
[110 ], а затем вы можете убедиться, что добавили этот класс в баннер. Другой возможностью является создание класса, который не должен применяться, например:
.banner:not(.my-other-custom-class) p { /*Your rules*/ }, а затем вы можете добавить этот класс в теги, где вы не хотите, чтобы ваши стили применялись. Если вам нужны дополнительные настройки, вы можете рассмотреть возможность настройки с помощью Javascript или предоставления нам дополнительной информации о ваших классах. Конечно, самое простое - создать правила для каждого класса, например
.banner.myclass1 p, .banner.myclass2 p, banner.myclass3 p { /*Your rules*/ }