css - 在变量容器中获取类的每个偶数子级

<分区>

目前正在设计一个 React 应用程序的样式，我需要为以下元素创建样式，但似乎无法找到正确执行此操作的选择器。

    .FORM__field--50:nth-of-type(even) {
    	background-color: red;
    }

<div class='SECTION'>
	<div class='SECTION__title'>Some title</div>
	<div class="FORM__field FORM__field--50">Content</div>
	<div class="FORM__field FORM__field--50">Select this</div>
	<div class="FORM__field FORM__field--50">Content</div>
	<div class="FORM__field FORM__field--50">Select this</div>
	<!-- can go on forever -->
</div>

<div class='SECTION'>
	<div class="FORM__field FORM__field--50">Content</div>
	<div class="FORM__field FORM__field--50">Select this</div>
	<!-- can go on forever -->
</div>

<div class="SECTION">
    <div class='SECTION__title'>some subtitle</div>
	<div class="FORM__field">
		<div class="FORM__field--50">Content</div>
		<div class="FORM__field--50">Select this</div>
		<div class="FORM__field--50">Content</div>
		<div class="FORM__field--50">Select this</div>
		<div class="FORM__field--50">Content</div>
		<div class="FORM__field--50">Select this</div>
		<!-- can go on forever -->
	</div>
</div>

尝试了以下 css，但是在第一种情况下出于某种原因它选择了错误的(奇数)FORM__field--50 类。

最佳答案

x:nth-of-type(n)选择每个 <x>第 n 个元素 <x>其父元素。所以有了标题，第一个 FORM__field FORM__field--50成为第 2 个 child 。你可以只包装 FORM__field FORM__field--50在另一个里面 div解决这个问题，如果你只是想要一个 css 修复。

.FORM__field--50:nth-of-type(even) {
  background-color: red;
}

<div class='SECTION'>
  <div class='SECTION__title'>Some title</div>
  <div class="container">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class='SECTION'>
  <div class="container">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class="SECTION">
  <div class='SECTION__title'>some subtitle</div>
  <div class="FORM__field">
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <!-- can go on forever -->
  </div>
</div>

注意:由于您的第三组有一个 FORM__field div，如果不引入其他样式，您可以对上述所有内容使用相同的样式。

.FORM__field--50:nth-of-type(even) {
  background-color: red;
}

<div class='SECTION'>
  <div class='SECTION__title'>Some title</div>
  <div class="FORM__field">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class='SECTION'>
  <div class="FORM__field">
    <div class="FORM__field FORM__field--50">Content</div>
    <div class="FORM__field FORM__field--50">Select this</div>
  </div>
  <!-- can go on forever -->
</div>

<div class="SECTION">
  <div class='SECTION__title'>some subtitle</div>
  <div class="FORM__field">
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <div class="FORM__field--50">Content</div>
    <div class="FORM__field--50">Select this</div>
    <!-- can go on forever -->
  </div>
</div>

关于css - 在变量容器中获取类的每个偶数子级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43945806/

上一篇：css - 选择器 nth-child 在 CSS 中产生奇怪的结果

下一篇：javascript - 旋转木马在 Bootstrap 上没有响应

相关文章：

javascript - 我只需要将复选框的名称转移到某些像素顶部而不是复选框

html - 如何在使用 CSS 的文本之前在文本区域内保留一些具有特定尺寸的空间？

css - 定位所有以开头的数据属性

css - 是否有 CSS 父级选择器？

jquery - 如何从项目列表中获取特定的 jQuery 项目？

html - CSS 问题

html - 何时在 Django 中使用 as_hidden，为什么不只显示 : none; in CSS?

html - 如何创建类似于 medium.com 的响应式背景图片

CSS :not() selector not working with universal selector (*)

css - 在程式化的复选框下设置标签