Question

我想使用css选择器：nth-child（）选择 img 列表的第n个元素，但它不能工作，就像标记一样 a 。但是当我尝试标记 p 时，它确实有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        img:nth-child (1) {
            position: absolute;
        }

        a:nth-child(2) {

            background-color: red;
        }

        p:nth-child(1) {
            background-color: red;
        }

    </style>
</head>
<body>
<div class="box">
    <p>abc</p>
    <p>abc</p>
    <p>abc</p>
    <a style="background-color: #FF7E00">adwddw</a>
    <a>qwer</a>
    <a>qwer</a>
    <a>qwer</a>
    <img src="4.jpg" alt="">
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <img src="3.jpeg" alt="">
</div>
</body>
</html>

Answer 1

class EventPage extends Component {
  constructor(props) {
    super(props);    
  }   

handleSaveExit(e) {
    e.preventDefault();
    this.props.onhandleCloseModal();      
  }

  render() {
    return (
      <div>
        ...
        <a href='#' role='button' onClick={this.handleSaveExit}>
          Save
        </a>
      </div>
    );
  }
}

此操作不起作用，因为元素不在您指定的位置，请参见现在。

Answer 2

您可以将其更改为n型。第n个子类型与第n个类型的区别在于，n个类型选择特定类型的数字n。在此处https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type

了解更多

nth-child（）用于img之类的标签，并且在CSS中不起作用

2 个答案: