Question

除了最后一个具有类test的div之外，需要将CSS应用于类名称为test的div。

在以下情况下- 前2个div.test应该有保证金，但第3个div.test应该没有保证金。

<div class="parent">
   <div class="test">
      <div>The first paragraph.</div>
   </div>
   <div class="test">The second paragraph.</div>
   <div class="test">The third paragraph.</div>
   <div class="test">The fourth paragraph.</div>
   <div class="test-1">The firth paragraph</div>
</div>

div.test-1不应应用任何内容

Answer 1

使用.test:nth-last-child(-n+2)选择.test的最后一个孩子

.test:nth-last-child(-n+2){
color:red;
}

<div class="parent">
   <div class="test">
      <div>The first paragraph.</div>
   </div>
   <div class="test">The second paragraph.</div>
   <div class="test">The third paragraph.</div>
   <div class="test">The fourth paragraph.</div>
   <div class="test-1">The fourth paragraph.</div>
</div>

Answer 2

要选择特定的孩子，可以使用nth-child（number）属性：

        div:nth-child(2) {
          color:red
        }

<div class="parent">
  <div class="test">
     <div>The first paragraph.</div>
  </div>
  <div class="test">The second paragraph.</div>
  <div class="test">The third paragraph.</div>
  <div class="test">The fourth paragraph.</div>
  <div class="test-1">The firth paragraph.</div>
</div>

Answer 3

尝试一下

使用@לבנימלכה

的建议的示例

import * as React from 'react';

interface InputProps {
    name:string,
    //This is the hook im trying to pass
    setHook:(hookValue:string) => void,
    placeholder:string,
    value:string,
    type:string,
    validationErrorParams:[],
    textArea:boolean
}
const Input: React.FunctionComponent<InputProps> = () => {
  return ;
};

export default Input;

.parent .test:not(:nth-child(4)) {
  background:red;
}

如何在css中选择tspecific类的最后一个孩子

3 个答案: