Question

我知道通过element>elements我们可以使用CSS选择器来选择父elements内的所有element。

购买如果有几个同类型的element个容器，我们只想选择特定父级element中的元素，有没有办法做到这一点？

我尝试了#elementID>elements和.elementClass>elements，但都没有效果。

简化代码：

<div id="id" class = "class">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>
</div>

CSS无效：#id > button{}，.class >button，#form >button{}，.c >button{}

如果我div > button{}它有效，但我有几个div容器，其中包含button元素，我希望它们具有不同的CSS效果。

整个图片在这里：https://jsfiddle.net/j9b7mhLp/1/

具体来说，我的目标是“注册”和“取消”模式中的两个按钮。

Answer 1

如果您对使用JavaScript更改按钮感兴趣，可以考虑以下代码：

var buts = document.forms["form"].querySelectorAll("button");
buts[0].style.background="green";
buts[1].style.background="blue";

直播demo

Answer 2

试试这个

#id > button:nth-of-type(1) {/*place your css here*/}
#id > button:nth-of-type(2) {/*place your css here*/}

Answer 3

你可以这样使用

from itertools 
import dropwhile 
import csv 
fname = "file1.csv"

with open(fname) as fin:
    start = dropwhile(lambda L: L.lower().lstrip().startswith('#'), fin)
    for row in csv.DictReader(start, delimiter='\t'):
        print row

请参阅此链接：First and nth Child

Answer 4

我假设您有更多相同形式的按钮，如下所示：

<div id="id" class = "class">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>
</div>

你能为那些div添加一个特定的类吗？

<div id="id" class = "class">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
    <button class="test specific">foo</button>
    <button class="test specific">foo</button>
  </form>
</div>

你可以使用这个css代码：

#id > .test.specific { //whatever }

Answer 5

这似乎对我有用。请检查您的自定义CSS是否覆盖了这一点。

＆＃13;

#One > form > button {
  color: red;
  background: purple;
}

#Two > form > button {
  color: red;
  background: purple;
}

＆＃13;

<div id="One" class="class">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>  
</div>

<div id="Two" class="class1">
  <form id = "form" class = "c">
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>  
</div>

＆＃13;

Answer 6

#form button {
//your css here
}

按钮在表单内部，您可以像这样选择它们。

Answer 7

您有语法错误，请修复它们。在HTML中定义属性时，不应使用空格。在这种情况下ids和classes。

<div id="id" class="class">
  <form id="form" class="c">
    <button class="test">foo</button>
    <button class="test">foo</button>
  </form>
</div>

现在，要在这个确切示例中选择按钮，有几种方法。如果他们只有一个班级＆＃39;测试＆＃39;那么您只需使用类选择器选择它们：

.test {}

如果没有，你也可以这样做：

form#id > button {}

或者，根据班级进行更合适的定位：

form#id > .test

如果您只想在表单中选择两个按钮而不选择其他按钮，即使这样也可以使用：

form#id > button:first-child, form#id > button:nth-child(2) {}

但是，您的问题是语法HTML错误。

Answer 8

你的方法太模糊了。只需在元素上放置一个ID，然后选择它即可。

后代选择器使用（简称）form button（而不是form > button）

选择特定容器（div或表单）中的元素

8 个答案: