<div>当a <input>或者<a>:focus'd(或任何其他动态伪类？)时,如何更改父级的背景？
例如
<div id="formspace">
<form>
<label for="question">
How do I select #formspace for the case when a child is active?</label>
<input type="text" id="question" name="answer"/></form></div>
这个CSS不起作用的原因是什么？
a[href^="http"]:after {
content:"";
width:10px;
height:10px;
display:inline-block;
background-color:red;
}
a[href^="http"] img ~ :after {
display:none;
}
..在这个HTML上？
<a href="http://google.com">Test</a>
<a href="http://google.com">
<img src="https://www.google.com/logos/classicplus.png">
</a>
想法是在匹配的锚标签上有一个伪元素.但我不希望它适用于包装图像的锚标签.而且由于我不能使用类似的东西来定位锚点a < img,我想通过找到一个它是兄弟的图像,我可以将目标定位在:after伪元素之后.
任何见解将不胜感激.
是否有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的数.
像这样的 …
我有一个表,有一行使用rowspan.所以,
<table>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
<tr>
<td rowspan="2">...</td><td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
我想使用nth-child伪类为每隔一行添加一个背景颜色,但是rowspan正在弄乱它; 它将行背景颜色添加到行下方的行中,实际上我希望它跳过该行,然后移动到下一行.
有没有办法让nth-child做一些聪明的事情,或者在选择器中使用[rowspan]来解决这个问题？所以在这种情况下,我希望背景颜色在第1行和第4行,但之后在6,8,10等等(因为这些都没有行间盘)？就像我看到一个rowspan一样,然后我希望nth-child将n加1,然后继续.
可能没有解决方案,但我想问:-)
我决定今晚第一次尝试Bootstrap 3.我注意到,为了获得默认的,漂亮的表单字段样式,你需要为form-control每个输入,textarea,select等添加一个类.这对那些动态生成表单的人来说很痛苦(例如,使用Django).Django允许您设置表单字段的属性,但要全局这样做需要一个令人讨厌的猴子补丁或非常非干的代码.
我有一个包含多个<tbody>元素的表格.在给定时间,仅<tbody>显示一个,或者显示所有这些.
我目前使用这个CSS3代码来条带化表:
table tr:nth-child(even) {
background: #efefef;
}
当显示单个<tbody>元素时,一切都(显然)很好,但是当显示多个<tbody>元素时,CSS规则分别应用于每个元素,并且每个元素<tbody>都有自己的"条带系统".根据行数的不同,条纹可能看起来也可能看起来不一致.
<tbody>
<tr> [ODD]
<tr> [EVEN]
<tr> [ODD]
</tbody>
<tbody>
<tr> [ODD]
<tr> [EVEN]
</tbody>
…
我是否必须使用JavaScript(... jQuery)来解决这个问题？还是有纯CSS解决方案？
我有能够反映不同的状态的元件,或者由用户(触发:hover,:focus等)或由服务器操作(data-status="finished",disabled等).
我可以定位具有已更改状态的元素,但我似乎找不到基于所讨论元素的状态来定位DOM中的其他元素的方法.
例:
<section>
<div>Element 1</div>
<div data-status="finished">Element 2</div>
<div>Element 3</div>
</section>
<section>
<div>Element 4</div>
<div class="blink">Element 5</div>
<div>Element 4</div>
<div>Element 4</div>
<div class="spin">Element 4</div>
...
</section>
或者只是使用服务器端的正确样式呈现元素.
是否有一个CSS选择器可以让我根据目标元素的状态指定应该选择哪些元素？
就像是:
div[data-status~=finished]:affect(.blink, .spin)
这将允许我也只针对 CSS 没有相同父级的元素？
我希望每个人都能听说过粘滞便笺.我想堆叠这样的东西.所以这就是我现在的方法.我不确定如何在不使用JavaScript的情况下使其适用于任何数量的胶粘物.
* {
font-family: 'Segoe UI';
}
.stickynote {
position: absolute;
background: #fc0;
border: 1px solid #f90;
border-radius: 5px;
padding: 10px;
width: 75px;
top: 10px;
left: 10px;
}
.stickynote + .stickynote {
top: 20px;
left: 20px;
}
.stickynote + .stickynote + .stickynote {
top: 30px;
left: 30px;
}<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>问题:
.stickynote + .stickynote + .stickynote为所有人添加.<ul>和<li>,但我想所有这些胶粘物是兄弟姐妹.在CSS中有没有办法选择一个具有给定类的子元素的元素？
我想将样式应用于<ul>具有<li>特定类的列表.
我正在努力强调目前正在徘徊<th>的<td>那个.
我可以突出第一个<tr>使用:
#sheet tr:hover td:first-child { color:#000; background:#EAEAEA; }
有没有办法做到这一点<th>？
注意 - 我正在使用范围<th>,像这样<th scope="col">,我可以使用它吗？
注2 - 或者,有没有办法获得当前列？