Question

我无法写出正确的问题，所以我会尝试解释我的问题。我使用的是jquery手风琴，我只想覆盖ui-icon类的两个值：

.ui-icon {
  height: auto;
  width: auto;
}

但只在一个地方：

    <div id="accordion" class="P-accordion">
        <h3>header 1</h3>

并且在我无法控制的路上有很多标记，所以我想找到以下行：P-accordion（这是我的风格）并在其下覆盖，班ui-icon。

这是我点击的元素的完整路径，我希望通过更改ui-icon

来查看效果

html > body > div.container-fluid > div.col-md-4.col-md-offset-1.P-col-md > div#accordion.P-accordion.ui-accordion.ui-widget.ui-helper-reset > h3#ui-id-1.ui-accordion-header.ui-state-default.ui-corner-all.ui-accordion-icons.ui-state-hover.ui-state-focus > span.ui-accordion-header-icon.ui-icon.fa.fa-arrow-circle-right

Answer 1

您可以使用nth-child选择器选择正确的元素，并覆盖它：

＆＃13;

$(".P-accordion:nth-child(2) .ui-icon").attr({
  "class": "new-ui-icon"
});

＆＃13;

.new-ui-icon {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="col-md-4 col-md-offset-1 P-col-md">
    <div id="accordion" class="P-accordion ui-accordion ui-widget ui-helper-reset">
      <h3 id="ui-id-1" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons ui-state-hover ui-state-focus"><span class="ui-accordion-header-icon ui-icon fa fa-arrow-circle-right">a</span></h3></div>
    <div id="accordion" class="P-accordion ui-accordion ui-widget ui-helper-reset">
      <h3 id="ui-id-1" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons ui-state-hover ui-state-focus"><span class="ui-accordion-header-icon ui-icon fa fa-arrow-circle-right">b</span></h3></div>
    <div id="accordion" class="P-accordion ui-accordion ui-widget ui-helper-reset">
      <h3 id="ui-id-1" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons ui-state-hover ui-state-focus"><span class="ui-accordion-header-icon ui-icon fa fa-arrow-circle-right">c</span></h3></div>
    <div id="accordion" class="P-accordion ui-accordion ui-widget ui-helper-reset">
      <h3 id="ui-id-1" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons ui-state-hover ui-state-focus"><span class="ui-accordion-header-icon ui-icon fa fa-arrow-circle-right">d</span></h3></div>
  </div>
</div>

＆＃13;

jquery为最近的div更改css attrbute

1 个答案: