我一直在努力做到这一点......基本上我有以下HTML设置:
<div class="box10">
<span class="label01">Name:</span>
<input class="tboxes" type="textbox" />
</div>
"span.label01"是一个内联元素,显示在文本框"input.tboxes"的左侧.当文本框获得焦点时,我正在尝试将一些样式附加到"span.label01"和"div.box10".
我尝试了以下CSS代码:
input.tboxes:focus span.label01 {
color:#FF9900;
...
}
但没有任何反应.我知道这是一个CSS选择器问题,但我似乎无法做到正确.我甚至尝试过相邻的兄弟选择器,什么都没有.有人能帮我一下吗？TIA!
我目前有以下 CSS 代码，可应用于div显示响应式图像的元素。
.my-img-container {
position: relative;
&:before {
display: block;
content: " ";
background: url("https://lorempixel.com/300/160/") no-repeat;
background-size: 100% 100%;
width: 100% !important;
padding-top: 56.25%;
}
>img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100% !important;
height: 100% !important;
}
}<div class="my-img-container">
<img srcset="https://lorempixel.com/540/304 540w, https://lorempixel.com/960/540 960w" sizes="(min-width: 576px) 540px, 100vw" src="https://lorempixel.com/300/160">
</div>我想要做的是在加载响应图像时在后台显示图像，因此content在 CSS 中，但它不起作用。知道为什么吗？
我想使用悬停,以便奇数div的底部边框是不同的颜色#75dcff.但是,.card:hover div:nth-child(odd)不起作用.我可以将psuedo类应用于nth-child元素吗？
.card {
margin: 30px;
padding: 20px 40px 40px;
max-width: 500px;
text-align: left;
background: #fff;
border-bottom: 4px solid #ccc;
border-radius: 6px;
}
.card:hover {
border-color: #75dcff;
}
.card:hover div:nth-child(odd) {
border-color: #ff7c5e;
}<div class="card"></div>
<div class="card"></div>
<div class="card"></div>下面是一个行为不像我期望的行为的例子 - 想知道行为或我的期望是否错误（很可能是我做了一些愚蠢的错误；）。
它能做什么：
getPseudoClassStates()，记录更改时的活动状态预期行为：通过鼠标/键盘与自定义按钮交互的通知（悬停、聚焦、武装......）
实际行为：如果未设置特殊状态，则与预期相同，设置一次特殊状态后没有通知
问题：
这个例子：
public class PseudoStateNotification extends Application {
private SpecialButton specialButton;
private SetChangeListener sl;
public static class SpecialButton extends Button {
private static PseudoClass SPECIAL = PseudoClass.getPseudoClass("special");
private BooleanProperty special = new SimpleBooleanProperty(this, "special", false) {
@Override
protected void invalidated() {
pseudoClassStateChanged(SPECIAL, get());
}
};
public SpecialButton(String text) {
super(text);
}
public void setSpecial(boolean sp) { …所以我正在做一些wiki编辑,遗憾的是Javascript没有启用.因此,我需要CSS大师的帮助!
我知道您可以添加如下自定义HTML属性:
<span id="some-id" custom_attr="no"></span>
你可以用custom_attr这样的样式元素:
span[custom_attrib] { /* styling here */ }
现在,有没有办法在CSS中编辑HTML属性？
示例(当然不起作用..):
<!------------- CSS ------------>
<style>
.some-class {
/* Original code here */
}
.some-class[custom_attr = "yes"] {
/* Change code here */
}
#some-id:hover ~ .some-class[custom_attr = "no"] {
custom_attr : "yes";
}
</style>
<!------------- HTML ------------>
<html>
...
<span id="some-id">...</span>
<span class="some-class" custom_attr="no">...</span>
...
</html>
所以我在html5中有这个表单.文本区域从一开始就是空的,并且边框作为标记,但是当输入某些内容时,通过在css3中使用有效来假设边框消失.这是我的代码.
HTML5:
<div>
<label for="caption">caption</label>
<textarea type="text" name="caption" id="caption"></textarea>
</div>
CSS3:
#caption {
float: right;
width: 450px;
height: 50;
border: 1px solid #D3D3D3;
resize: none;
font: 12px "lucida grande", tahoma, verdana, arial, sans-serif;
}
#caption:valid {
border: none;
}
问题是伪类有效"激活",即使它是空的,奇怪的是,这不会发生在表单中的任何其他元素.
我希望有一个人可以帮助我.提前谢谢:)
我有一个表,我想要为每个替换行着色,除了具有类" openingTimes" 的行.
这个开放时间行不应该是阴影,但是这一行之后的模式应该继续,就像这样(用粗体表示着色!):
[ 信息1 ] [信息2] [开放时间行] [ 信息3 ] [信息4] [ 信息5 ] [信息6]
我拥有的CSS是:
table tr:not(.openingTimes):nth-child(even)
{
background-color: #eeeeee;
}
但结果是:
[ 信息1 ] [信息2] [开放时间行] [信息3] [ 信息4 ] [信息5] [ 信息6 ]
我希望Info 3被遮蔽,并且模式将从那里继续.
我究竟做错了什么？谢谢!
编辑:好的,这是一个小提琴:http://jsfiddle.net/QWjnm/
我的HTML代码:
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</nav>
如果我写
nav ul li a:hover{}
它将hover为所有链接创建.
如何创建第一个链接"Link1"将有不同悬停的句子？
我正在使用SCSS,并想知道是否有更好的方法来写这个...
.nav li a:hover, .nav li a:active, .nav li a:visited, .nav li a:focus
如果有可能这样的话,我会很高兴...
.nav li a:hover:active:visited:focus