Как управлять (избегать) стилей вложенных элементов html при использовании jQuery, если классы не являются опцией?

Question

Я работаю над реализацией функциональности динамического стиля в Wordpress, используя jQuery. Меня оспаривает тот факт, что jQuery использует встроенный стиль, который может влиять на то, что вложенные элементы могут быть нацелены на селектор, даже если тот же селектор не действует в правилах CSS. Чтобы проиллюстрировать, что я имею в виду, пожалуйста, взгляните на это JSFiddle.

HTML:

<p> 
    This is normal text 
    <br> 
    <br> 
    <em>This is italic text</em> 
    <br> 
    <br> 
    <strong>This is bold text</strong> 
    <br> 
    <br> 
    <strong><em>This is bold italic text</em></strong> 
    <br> 
    <br> 
    <em><strong>This is also bold italic text</strong></em> 
    <br> 
    <br> 
</p> 

<button> 
    Style it! 
</button> 

CSS:

p em strong, 
p strong em { 
     color: red; 
    } 

p strong { 
    color: blue; 
} 

JQuery:

(function($) { 
    $('button').on('click', function() { 
    $('p strong').css('color', 'turquoise'); 
    }); 
})(jQuery); 

Как показано, CSS стиль смелого текста действует только на жирный текст, как и ожидалось, но с jQuery - с использованием того же селектора, экземпляр жирного курсивного текста, который имеет тег в качестве вложенного тега, также является ffected.

Возможно ли сделать выбор jQuery, который не включает вложенные элементы, как в примере? Очевидно, если бы я мог использовать классы, решение было бы простым, но в этом случае я не могу.

Если я добавлю важный параметр к элементам, которые первоначально были красными, я получаю то, что хочу, но мне бы очень хотелось избежать этого, если это вообще возможно. Спасибо.

Answer 1

Если вам нужно решить конкретный случай, вы можете использовать метод JQuery .not() исключить отрывки из избранных. Для этого случая:

$('p strong').not('p em strong').css('color', 'turquoise'); 

Это не решает общую проблему, JQuery .css() метод редактирует атрибут style элемента, который добавляет порядок специфичности к стилю, когда браузер определяет, какой стиль применить ,

Один из альтернатив - создать функцию JavaScript, которая добавит новый стиль CSS в DOM. Функция выборки может выглядеть следующим образом:

var createCSSStyle = (function() { 
    var styleSheet = null; 
    return function(selector, cssOptions) { 
     if (styleSheet == null) { 
      styleSheet = document.createElement('style'); 
      styleSheet.type = 'text/css'; 
      document.getElementsByTagName('head')[0].appendChild(styleSheet); 
     } 

     var text = " " + selector + " {"; 
     for(var prop in cssOptions) 
      text += prop + ":" + cssOptions[prop] + ";"; 
     text += "}"; 

     styleSheet.innerHTML += text; 
    }; 
})(); 

И использовать его:

createCSSStyle('p strong', { 'color' : 'turquoise' }); 

Вот update of your Fiddle с ним в действии.

Примечание: здесь я использовал функцию самоисполнения, чтобы сохранить таблицу стилей в локальной переменной. Я не хотел создавать новую таблицу стилей каждый раз при вызове метода. Только в первый раз.

Answer 2

Если я не понял проблему, вы можете использовать непосредственный дочерний селектор.

$('p > strong').css('color', 'turquoise'); 

Answer 3

Пробовал этот селектор :nth-child.?
Вот пример
https://jsfiddle.net/3pc98j7u/1/

Answer 4

Это добавит тег стиля в голову, а затем напишет стили в нем. Тогда у вас нет встроенных стилей.

(function($) { 
    var styles = []; 
    function styler(style){ 
     styles.push(style); 
     $("#styler").html(styles.join("\n")); 
    } 
    $('button').on('click', function() { 
     styler("p strong {color: turquoise;}") 
    }); 

    $("head").append("<style id='styler'></style>") 
})(jQuery);