Question

不确定标题是否有意义，但这是我正在尝试做的事情。

<div class="mystyle">
    <select name="somename" id="somename">
       <option value="Value1">
       <option value="Value2">
    </select>
</div>
<div class="myotherstyle">
     <select name="somename" id="somename">
       <option value="Value1">
       <option value="Value2">
    </select>
</div>

是否可以使用类“mystlye”设置div中select元素的样式而不在select上设置类？我希望select元素只有在包含在具有“mystyle”类的div中才能设置样式。

这样的事情：

div.mystyle {
    border: 1px solid #ff0000;
    background-color: #ffeeee;  
}

div.mystyle.select {
    margin: 0px 5px 10px 0px;
}

Answer 1

将点更改为div.mystyle.select选择器中的空格。 select是一个标签，而不是一个类。

div.mystyle {
    border: 1px solid #ff0000;
    background-color: #ffeeee;  
}

div.mystyle select {
  margin: 0px 5px 10px 0px;
}

演示：http://jsfiddle.net/LftRc/

Answer 2

使用空格说它必须是一个孩子。

.mystyle select { }

使用>运算符表示直接子项（例如..，而不是.mystyle中div内div的.select。）

.mystyle > select { }

您还可以在父级上使用“伪元素”和“伪类”。

.mystyle:hover select { /* The .select element when .mystyle is hovered over */ }

如果使用得当，会产生一些有趣的结果。

样式选择元素，但仅当它在使用某种样式的div中时

2 个答案: