标签: css-selectors

CSS:"p div.myclass"是一个有效的选择器吗?

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)

css css-selectors

-1
推荐指数
1
解决办法
323
查看次数

CSS直接后代选择器

我遇到了一些麻烦,并且我敢肯定对于这个看似琐碎的问题有一个简单的解决方法。

我有如下的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

css css-selectors

-1
推荐指数
1
解决办法
1637
查看次数

CSS - 如何选择表单元素的nth-child?

我正在尝试重新设计我的WP网站的注册表格.我还添加了一些exta字段.我增加<form>容器的宽度并将<input>字段的流量设置为left.但我想将手机字段(<form>元素的第三个孩子)的流量设置为无float: none;.我尝试这样做:form:nth-child(3) {float: none;}但它看起来不起作用.它选择形式而不是形式的第3个字段.怎么了?

是我网站的注册页面.请帮忙.

css css-selectors

-1
推荐指数
1
解决办法
5767
查看次数

在输入类型文本焦点上应用样式以提交按钮

我一定做错了什么,但我找不到原因.这是小提琴

为什么这样做:

#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)

css css-selectors

-1
推荐指数
1
解决办法
2838
查看次数

标签中的"for"是否可以通过CSS定位?

我想知道标签标签中的"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)

css label css-selectors

-1
推荐指数
1
解决办法
90
查看次数

选择除少数之外的每个第三个元素(在无序列表中)

如何选择下面的无序列表中的每个其他第3个元素?我有一个随机的数量,<li>但我需要每隔3个,所以例如第三个,第九个,第十五个等等在html或css或javascript中可能是这样的事情吗?

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>
Run Code Online (Sandbox Code Playgroud)

html css css-selectors

-1
推荐指数
1
解决办法
112
查看次数

为什么相邻的兄弟选择器不起作用?

根据相邻兄弟选择器的定义,以下代码应该有效.但事实并非如此.我似乎没有发现任何错误.

<!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 css css-selectors

-1
推荐指数
1
解决办法
3377
查看次数

CSS中的第一个孩子问题

:)

为什么我的第一段没有红色背景?

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/

非常感谢您对此的任何帮助.

html css css-selectors

-1
推荐指数
1
解决办法
62
查看次数

更改接下来的CSS元素

我想悬停在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)

html css css-selectors css3

-1
推荐指数
1
解决办法
164
查看次数

定位段落<p>元素的后代

当我执行以下操作时,只有"名人"这个词会变成红色.

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)

html css css-selectors

-1
推荐指数
2
解决办法
158
查看次数

标签 统计

css ×10

css-selectors ×10

html ×5

css3 ×1

label ×1