是否可以链接：first-child和：last-child伪类选择器？

问题描述

我想使用:first-child和:last-child使段落标记中的内容变为红色。我们可以通过将两者结合起来实现这一目标吗？我试图这样做，但是我没有得到输出！

p :first-child:last-child{
    color:red;
}

<html>
<head>
    <title>Webpage</title>
    </head>
<link rel="stylesheet" href="style.css">
<body>
    <div>
        <p>
            List of Car Brands
        </p>
        <ul>
            <li>Honda</li>
            <li>Tesla</li>
            <li>Kia</li>

        </ul>
        <p>
            which one do you prefer?
        </p>
    </div>
       
        </body>

</html>

解决方法

您可以使用逗号将样式应用于多个选择器。

但是您需要删除p和:first-child之间的空格，并使用p:first-child,p:last-child

p:first-child,p:last-child {
  color: red;
}

<div>
  <p>
    List of Car Brands
  </p>
  <ul>
    <li>Honda</li>
    <li>Tesla</li>
    <li>Kia</li>

  </ul>
  <p>
    which one do you prefer?
  </p>
</div>

我认为不能。您可以改写

p:first-child,p:last-child {
  color: red;
}

html