相关疑难解决方法(0)

我正在寻找一个选择器,如果它们有一个特定的子元素,它将选择所有元素.例如,选择<div>带孩子的全部<span>.

可能？

:has()当我在caniuse.com上检查CSS 选择器时，它告诉我自 Firefox103 以来，它已经

在 Firefox 中，layout.css.has-selector.enabled 标志后面支持。

那么如何找到这个标志并启用它呢？

是否有CSS选择器允许我根据HTML选择选项值选择元素？

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p>Display only if an option with value 1 is selected</p>

我正在寻找一种HTML/CSS方法,只显示选定数量的表单字段.我已经知道如何用Javascript做到这一点.

有没有办法做到这一点？

编辑:

问题标题可能会产生误导.我不是要尝试选择框的样式,这已经非常普遍并且已经有很多答案了.我实际上是在尝试<P>根据选中的值设置元素的样式<select>.

我真正想做的是根据选定的数值显示多个表单域:

<select name="number-of-stuffs">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="stuff-1">
     <input type="text" name="stuff-1-detail">
     <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
     <input type="text" name="stuff-2-detail">
     <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
     <input type="text" name="stuff-3-detail">
     <input type="text" name="stuff-4-detail2">
</div>

我想显示div.stuff-1和div.stuff-2当数的食料= 2且display div.stuff-1 div.stuff-2以及div.stuff-3当东西= 2的数.

像这样的 …

让我们说我有这样的标记:

<select>
    <option value="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>    
</select>

现在,我希望当值为空时,即当显示"选择"时,下拉列表仅以灰色显示.当用户选择其中一个选项时,它应该是黑色/默认颜色.

(这与我的页面上具有灰色占位符的文本框在视觉上是一致的).

我想完成这样的事情:

select[value=""] {
    color: gray;
}

但事实证明,select标签实际上没有值属性.

除了使用JavaScript之外,还有什么办法可以实现

鉴于这个简单的HTML,

<select id="ddl">
    <option style="background:#0f0">a</option>       
    <option style="background:#f00;">b</option>   
    <option>c</option>
</select>

(http://jsfiddle.net/DxK47/)您可以看到每个选项都有自己的背景颜色.

不幸的是,当选择任何选项(导致下拉列表"关闭")时,背景保持白色(或者无论页面默认是什么).

是否可以在选择完成后在下拉列表中显示所选项目的背景(理想情况下不使用javascript)

几个小时以来，我一直非常仔细地寻找这个问题的答案，但一直没有找到答案。

我有一个选择框，它根据所选选项的背景颜色更改背景颜色。此功能在 Chrome 中有效，但在 Firefox 中无效，无论您选择哪个选项，它都会变成蓝色并保持蓝色。所选选项的文本出现在选择中，但不出现在背景颜色中。

我已经尝试过使用 css 之类的::selected {}。我最接近的是使用不同的 StackOverflow 答案来创建阴影框或在焦点改变时改变颜色，但到目前为止还没有真正的运气。

这是我的代码：

CSS：

#WHITE  {background-color: white;}
#GRAY   {background-color: rgb(194,194,194);}
#PINK   {background-color: rgb(255,153,203);}
#YELLOW {background-color: rgb(254,255,153);}
#ORANGE {background-color: rgb(255,204,154);}

jQuery：

$(document).ready( function () {
    var color = $("option:selected", "#colorSlct").css("background-color");
    $("#colorSlct").css ("background-color", color);
});
$(document).on('change', '#colorSlct', function () {
    var color1 = $("option:selected", this).css("background-color");
    $("#colorSlct").css ("background-color", color1);
});

服务提供商：

<select id = "colorSlct" type = "select" class = "select2" style = "margin-left: 0;">
    <option id = "WHITE">  </option>
    <option …