相关疑难解决方法(0)

在CSS(任何版本)中,是否有像:has()jQuery中的选择器那样的任何其他方式？

jQuery(':has(selector)')

描述:选择包含至少一个与指定选择器匹配的元素的元素.

http://api.jquery.com/has-selector/

当选择单选按钮时,有没有办法为单选按钮的颜色变化设置标签？

我希望标签与hover状态上的绿色相同,但我似乎无法弄清楚如何实现这一目标？

label.btn span {
  font-size: 16px;
}
i.fa {
  font-size: 24px;
}
i.fa.fa-dot-circle-o {
  font-size: 24px;
}
label input[type="radio"] {
  color: #c8c8c8;
  display: inline;
}
label input[type="radio"] ~ i.fa.fa-dot-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-circle-o {
  display: none;
}
label input[type="radio"]:checked ~ i.fa.fa-dot-circle-o {
  color: #78a025;
  display: inline;
  font-size: 24px;
}
label:hover input[type="radio"] ~ i.fa {
  color: #78A025;
}
label input[type="checkbox"] ~ i.fa.fa-square-o {
  color: #c8c8c8;
  display: inline;
}
label input[type="checkbox"] ~ i.fa.fa-check-square-o {
  display: …

假设我有一个基本网页:

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

现在让我们说我希望标签文本在未选中时为红色,在选中时为蓝色.我该怎么做？我想要一些基本的东西,如下所示.在这里,我使用一个假设的运算符" <",这意味着"有孩子",但当然它不起作用,因为没有这样的运算符:

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

除了理论" <" 之外的所有东西都是有效的CSS,这让我想知道是否有一种实现这种行为的真正方法.有没有人知道有效的CSS 3(或更低版本)方式根据其复选框的状态设置标签样式,而不使用JavaScript？

如果我想在这样的列表上做一个CSS选择器:

<ul>
    <li></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

我只想对包含标签li:hover的lis 做一个效果<a>,有没有办法在CSS中指定？if li:hover contains <a> then li:hover effect = X?

我有这个LESS设置:

.wrapper {
    .parent {
       height: 100px;

       .children {
          //some style;

          &:hover {

              .parent & {
                 height: 150px;
              }
          }
       }
    }
}

我需要通过将鼠标悬停在其中的某个子节点来更改父元素的某个高度.这段代码不起作用,有没有可能做到这一点？很多请求帮助.

我有一些特定类.box的div,我想为它设置交替的背景颜色.但是,一些div放在另一个div .inner-container中:

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="inner-container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

所以使用nth-of-type(偶数)或nth-child(偶数)来改变每秒的颜色.box在这里不起作用.是否有可能只使用CSS实现交替背景？

注意:我不知道有多少盒子是.container的直接子节点,有多少盒子会在.inner-container中.

的jsfiddle

我试图在单击输入后更改输入支架的背景颜色我使用了这些

<div class="name"> <input type="text" class="input-name"></div>

CSS

.input-name:focus + .name{
background:#f00;
}

通常是这样的

这就是我想要的焦点

但它不会工作

在如下所示的嵌套列表中,如何在joe不事先知道实际深度的情况下将ul包含在目标中？

<ul>
    <li>foo
        <ul>
            <li>bar
                <ul>
                    <li>baz
                        <ul>
                            <li>joe</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

http://jsbin.com/fiqowuhate/1/edit?html,css,output

在以下示例中：

<div class="section">
  <div class="row">...</div>
  <div class="row"> <- bottom margin here needs to be 0 ->
    <div class="section">
      <div class="row">...</div>
      <div class="row">...</div>
    </div>
  </div>
</div>

.row {
  margin-bottom:10px;
}

如果div .row是div .section的父级，则将下边距重置为0。

我可以用jquery做到这一点，但是有没有办法在CSS中做到这一点？

我想在选中复选框时向我的复选框容器添加边框。

目前，我有这个：

<label
  htmlFor="choose-me"
  className=
    'flex w-fit items-center justify-evely p-3 border-2 border-grey-4 text-grey-8 
     peer-checked:bg-light-indigo peer-checked:text-medium-indigo peer-checked:border-medium-indigo'>
  <input type="checkbox" id="choose-me" className="peer mr-3 " />
  Check me
</label>

我想要类似下面的东西：

但是，当我将输入放入标签中时，我无法更改标签样式。