是p div.myclass一个有效的CSS选择器?我想选择div.myclass,但只有当它是p的后代时.
<body>
<div class="myclass">Do not select</div>
<p>
<any>...
<div class="myclass">Select this element to set background & border
<any>Other stuff may be here</any>
</div>
</any>
</p>
</div> <!-- added this after question was answered -->
</body>
Run Code Online (Sandbox Code Playgroud) 我遇到了一些麻烦,并且我敢肯定对于这个看似琐碎的问题有一个简单的解决方法。
我有如下的HTML页面设置:
<ul class="locations">
<li>
Georgia
<ul class="children">
<li>
Fulton County
<ul class="children">
<li>
Atlanta
</li>
</ul>
</li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我正在尝试以一种方式设置“父母”列表项的样式,以一种方式设置“子项”的样式,并以另一种方式设置“孙子项”的样式。
我尝试了以下方法:
ul li{
list-style: none;
margin: 0;
}
ul.locations li+ul.children li{
margin-left: 15px;
clear: both;
}
ul.locationsli+ul.children li+ul.children li{
float: left;
}
Run Code Online (Sandbox Code Playgroud)
在这种情况下,我希望“孙子孙女”彼此相邻漂浮的地方……无论我如何工作,clear:both;似乎都适用于“子孙子”和“孙子孙女”物品。我也尝试过>没有运气用作CSS选择器。
有什么解决办法吗?TIA
我正在尝试重新设计我的WP网站的注册表格.我还添加了一些exta字段.我增加<form>容器的宽度并将<input>字段的流量设置为left.但我想将手机字段(<form>元素的第三个孩子)的流量设置为无float: none;.我尝试这样做:form:nth-child(3) {float: none;}但它看起来不起作用.它选择形式而不是形式的第3个字段.怎么了?
这是我网站的注册页面.请帮忙.
我一定做错了什么,但我找不到原因.这是小提琴
为什么这样做:
#searchClubsForm input[type=text]:focus {
background: blue;
}
Run Code Online (Sandbox Code Playgroud)
但这不是吗?
#searchClubsForm input[type=text]:focus #searchClubsForm input[type=submit] {
background: blue;
}
Run Code Online (Sandbox Code Playgroud) 我想知道标签标签中的"for"是否可以通过CSS定位?我正在尝试通过Wordpress中的css设置插件样式,但无法访问HTML.
下面是一个示例代码,但是如果有一个带有'class'和'for'的标签标签......我可以使用'for'某种方式来定位这条特定的行吗?我之所以要问的原因是我需要单独定位线条并且仅使用标签和类别将不允许我.
我不是html/css中的佼佼者,所以我错了,但......
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
Run Code Online (Sandbox Code Playgroud) 如何选择下面的无序列表中的每个其他第3个元素?我有一个随机的数量,<li>但我需要每隔3个,所以例如第三个,第九个,第十五个等等在html或css或javascript中可能是这样的事情吗?
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
...
</ul>
Run Code Online (Sandbox Code Playgroud) 根据相邻兄弟选择器的定义,以下代码应该有效.但事实并非如此.我似乎没有发现任何错误.
<!DOCTYPE html>
<html>
<head>
<style>
#p2+h4{
color:red;
}
</style>
</head>
<body>
<p>
<p id="p2">This is the sibling of the selected para</p>
<p>
<h4>this should not be colored</h4>
</p>
<h4>this should be colored</h4>
</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) :)
为什么我的第一段没有红色背景?
HTML:
<div class="item">
<h1><a href="http://localhost/test">Test</a></h1>
<p>This is a new entry </p>
<p>This is a new entry</p>
</div>Run Code Online (Sandbox Code Playgroud)
CSS:
.item p:first-child {background:red}
演示: http ://jsfiddle.net/tv90yrbz/
非常感谢您对此的任何帮助.
我想悬停在a.bio改变背景.pic为绿色.
我尝试了一些方法,但没有成功.
我不理解它的逻辑~ 以及如何使其工作.
码
.executivo .pic::after {
background-color: #00845b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transition: .3s ease-in-out;
}
.equipe a.bio:hover ~ .pic::after {
opacity: 0.35;
}
.executivo .pic {
margin-bottom: 45px;
position: relative;
}
.executivo .pic img {
display: block;
}Run Code Online (Sandbox Code Playgroud)
<div class="executivo">
<div class="pic">
<img src="<?php echo $pic; ?>" alt="<?php echo $nome; ?>" />
</div>
<div class="title">
<h3><?php echo $nome; ?></h3>
</div>
<a class="bio" …Run Code Online (Sandbox Code Playgroud)当我执行以下操作时,只有"名人"这个词会变成红色.
body > p * {
background-color: red;
}Run Code Online (Sandbox Code Playgroud)
<body>
<p>I have met many <span>Celebrities</span> in my lifetime.
<p>They</p> all were rich! I have a list
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</p>
</body>Run Code Online (Sandbox Code Playgroud)
为什么,'名人',红色唯一的东西?
从我的后代选择的理解<span>,<ul>和<p>里面的第一个<p>应该是红色的,对不对?
如果我修改上面的内容如下,那么为什么呢?
body > div * {
background-color: red;
}Run Code Online (Sandbox Code Playgroud)
<div>I have met many <span>Celebrities</span> in my lifetime.
<p>They</p> all were rich! I have a list
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>Run Code Online (Sandbox Code Playgroud)