Question

我有2个弹出窗口，第一个是打开新页面时，第二个是用户点击链接时。尝试使用first-child将一些css添加到div1中的所有按钮，但它也添加到div2。我想按A，B，C，D添加宽度50％，我该如何解决？

$（＆＃34; .ui-dialog-buttonpane：first-child .button＆＃34;）。width（50％）;

Div1：

<div class="ui-dialog-buttonpane">
 <div class="ui-dialog-buttonset" >
 <button type="button" class="ui-button"  role="button">A</button>
 <button type="button" class="ui-button"  role="button">B</button>
 <button type="button" class="ui-button"  role="button">C</button>
 <button type="button" class="ui-button"  role="button">D</button>
 </div>
</div>

DIV 2：

<div class="ui-dialog-buttonpane">
 <div class="ui-dialog-buttonset" >
 <button type="button" class="ui-button"  role="button">E</button>
 <button type="button" class="ui-button"  role="button">F</button>
 </div>
</div>

Answer 1

:first-child将定位他们父母的第一个孩子的所有.ui-dialog-buttonpane。你想在页面上首先定位.ui-dialog-buttonpane。请使用:first或:eq(0)代替:first-child：

$(".ui-dialog-buttonpane:first .ui-button").width(50%);

Answer 2

小修正，您正在为user_avg_rating应用宽度，但类名为.button。请尝试以下任何代码，以便查询。

.ui-button

OR

$(".ui-dialog-buttonpane:first .ui-button").css("width","50%");

Answer 3

在CSS中它就像

一样简单

.ui-dialog-buttonpane:first-child .ui-button{
   width:50%;
}

Working JSBin

在jQuery中

$(".ui-dialog-buttonpane:first-child .ui-button").width('50%');

Working JSBin

Answer 4

在纯CSS中，如果.ui-dialog-buttonpane是兄弟姐妹，则可以使用：

＆＃13;

.ui-dialog-buttonpane .ui-button {
  width: 50%;
}

.ui-dialog-buttonpane ~ .ui-dialog-buttonpane .ui-button {
  width: auto;
}

＆＃13;

<span>something else</span>
<div class="ui-dialog-buttonpane">
  <div class="ui-dialog-buttonset">
    <button type="button" class="ui-button" role="button">A</button>
    <button type="button" class="ui-button" role="button">B</button>
    <button type="button" class="ui-button" role="button">C</button>
    <button type="button" class="ui-button" role="button">D</button>
  </div>
</div>
<div class="ui-dialog-buttonpane">
  <div class="ui-dialog-buttonset">
    <button type="button" class="ui-button" role="button">E</button>
    <button type="button" class="ui-button" role="button">F</button>
  </div>
</div>

＆＃13;

当css具有相同的div时，将css添加到第一个div？

4 个答案: