如果类不是一个选项，在使用 jQuery 时如何控制（避免）嵌套 html 元素的样式？

Question

我正在使用 jQuery 在 Wordpress 主题中实现动态样式功能。我对 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 - 使用相同的选择器，粗体斜体文本的实例具有作为嵌套标签的标签也会受到影响。

是否可以像示例中那样做出不包含嵌套元素的 jQuery 选择？显然，如果我可以使用类，解决方案会很简单，但在这种情况下我不能。

如果我将 !important 选项添加到最初样式为红色的元素，我得到了我想要的，但我真的很想尽可能避免这种情况。谢谢。

Answer 1

除非我误解了问题，否则您可以使用直接子选择器。

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

Answer 2

试过这个选择器 :nth-child .?
这是一个例子
https://jsfiddle.net/3pc98j7u/1/

Answer 3

如果您需要解决特定情况，可以使用 jQuery .not() 方法从 select 中排除 select 离子。对于这种情况：

$('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 的实际效果。

注意：我在这里使用了一个自执行函数，这样我就可以将样式 sheet 保存到局部变量中。我不想在每次调用该方法时都创建一个新样式 sheet。只是第一次。

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);

如果类不是一个选项，在使用 jQuery 时如何控制（避免）嵌套 html 元素的样式？

How to control (avoid) styling of nested html elements when using jQuery if classes are not an option?

html

javascript

css

jquery

jquery-selectors

如果 类 不是一个选项，在使用 jQuery 时如何控制（避免）嵌套 html 元素的样式？

How to control (avoid) styling of nested html elements when using jQuery if classes are not an option?

html

javascript

css

jquery

jquery-selectors

如果类不是一个选项，在使用 jQuery 时如何控制（避免）嵌套 html 元素的样式？