标签: css-selectors

鉴于我有一个弹出窗口，ID 为“popup”，其中有两个按钮，一个在左侧，一个在右侧，类为“popupbutton”，这些 css 规则中的哪一个最有效：

#popup a.popupbutton

#popup .popupbutton

a.popupbutton

.popupbutton

我有以下代码：

div:nth-child(1) {
    background-color: red;  
}

<h1>Boxes</h1>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

我希望选择div内容1st，但事实并非如此。但是，如果我删除了该h1元素，则它会按预期工作。为什么？

我有一个图形元素，我想将它放置在另一个元素的顶部。因为我不想为那些没有重用的人创建 css 选择器，所以我应用了 psuedo 类。:first-element应该坐在另一个之上的那个被另一个元素隐藏了。

这是我的 JS BIN

HTML

<div class="wrapper">
    <div></div>
    <div></div>
</div> 

CSS

.wrapper {
  position: relative;
}
.wrapper:first-child {
  position: absolute;
  width:50px;
  height:50px;
  top:25px;
  left: 25px; 
  background: red;
  z-index: 100;
}
.wrapper:last-child {
  position: relative;
  width:100px;
  height:100px;
  background: orange;
}

添加

感谢您的输入。现在我明白我哪里出错了（伪类应用于子元素）

我已经编写了示例来隔离我的问题，但我实际上是在为<img>一个<img>位于另一个之上<img> 并且 html 结构是

<div class="brand">
    <a href="#"><img src=""/></a>
    <a href="#"><img src=""/></a>
</div>

css是

.brand img:last-child {
    position: relative;
}
.brand img:first-child {  
    position: absolute;
    top:10px;
    left:15px;
} …

所以这是情况，当导航在底部时，拳头代码显示类......

<div id="navigation" class="attached-to-bottom">
 <ul>
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>

当我向下滚动（使用 jquery 等）后，当我的导航保持在顶部时显示，但是当我触发类“附加到顶部”时，我需要将导航 ID 高度更改为不同）我可以只使用 CSS 还是?

 <div id="navigation" class="attached-to-top">
     <ul>
      <li></li>
      <li></li>
      <li></li>
     </ul>
    </div>

如果我没有获得该 HTML 元素的 id 或名称或类，如何在 Selenium Python 中使用 CSS 选择器？与 XPath 相比，更喜欢 CSS 怎么样？

在下面的代码中，我试图获取作为.node元素的直接子元素的所有.row元素。目前，我的代码将查找与element中的.node类匹配的任何给定.row元素。

我如何.row > .node在纯JavaScript中获得直接节点（例如，在CSS中看起来像这样：）？

let rows = document.getElementsByClassName("row");
var nodes = [];

for (let i = 0; i < rows.length; i++) {
  console.log(rows[i].getElementsByClassName("node"));
}

.node {
  border-radius: 50%;
  border: 1px solid #000;
}

.node,
.empty {
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
}

.d-none {
  display: none;
}

<div class="row">
  <div class="node">
    Foo
  </div>
  <div class="node d-none">
    Foo
  </div>
  <div class="row">
    <div class="empty">
      &nbsp;
    </div>
    <div …

我有3个p标签，

<p> hi </p>
<p>hello</P>
<p>bye</P>

我想p仅通过使用纯CSS（不使用任何javascript）将第二个标签着色为红色。在不使用任何内联样式和类的情况下，我该如何实现？

<p> hi </p>
<p>hello</P>
<p>bye</P>

在以下标记中：

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<div class="dynamic-div">Just a text</div>
<h3>A Header</h3>

<h3>A Header</h3>

<h3>A Header</h3>

我只想将h3标头的颜色更改为红色，除非它紧接在带有dynamic-div类的div之后。

如何使用CSS做到这一点？

我尝试使用浏览器扩展笔来为phpmyadmin创建新样式。

如何选择按名称选择：

<select name="criteriaTables[]" multiple="">

我这样尝试过：

form#db_search_form select[name=criteriaTables] {
    min-height: 400px;
}

...但是它不起作用。

form#db_search_form select[name=criteriaTables[]] {
    min-height: 400px;
}

...也不起作用。

在以下情况下，

<h2 class='first'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='second'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='third'>h2</h2>

我只想在h2.first和h2.second之间选择p。我尝试了选择同级，但是它选择了所有元素。