Question

我可以在CSS中使用多个选择器吗？

.name [class=nav]:last-child{
  border: 5px solid yellow;
}

<div class="name">
  <span src="klematis.jpg" class="nav" width="150" height="113">test00</span>
  <span src="img_flwr.gif" class="nav" width="224" height="162">test01</span>
  <span src="landscape.jpg" class="nav item" width="160" height="120">test02</span>
</div>

Answer 1

您可以像这样简单地编写

.name .nav:last-child{
  border: 5px solid yellow;
}

<div class="name">
  <span src="klematis.jpg" class="nav" width="150" height="113">test00</span>
  <span src="img_flwr.gif" class="nav" width="224" height="162">test01</span>
  <span src="landscape.jpg" class="nav item" width="160" height="120">test02</span>
</div>

Answer 2

您可以链接选择器。有这么多引导您完成最佳游览的地点可能是：

https://www.w3schools.com/cssref/css_selectors.asp

这突出显示了您可以执行的所有可能的选择器类型。

查看它们的用途（如果要搜索的是此类）。在您的情况下，您无需使用此[class = nav]即可使用简单的.nav。但是，我很感激您可能对此做了些愚蠢的操作，因此，如果您以尝试的方式进行操作，将会像这样：

span[class*="nav"]

需要注意的是：

首先，您需要在引号内指定要查找的值。

第二，使用*表示您正在搜索的任何属性（在示例类中）仅包含“”中指定的值。

还有其他一些符号可以代替*，例如^，它仅搜索类列表中的第一个类，而$仅搜索类列表中的最后一个值（可以将类列表替换为任何属性）。

第三，您可以链接类以增加权重，例如：

span.nav.item

它在跨度中搜索类为“ nav”的类，然后再次搜索类也为“ item”的类。在我看来，这不是最佳做法，因为它要慢一些（我已经做过零研究），因为它必须先检查所有范围，然后再检查这些范围的类列表，依此类推，而不是直接寻找课程导航

如果您想使用nth-of-type规则，则可以使用：nth-of-type（正则表达式/单个数字/ nth-of-type规则）

这里是很好的资源：

https://css-tricks.com/examples/nth-child-tester/

最后可能要讲的是，如果您使用：not类型请求，那么您希望将不希望它的值传递到：not（place-rule-here）中。因此，如果您想避免商品类别，您的商品就会看起来像这样。

.name span[class="nav"]:not(.item){}

无论如何，这现在有点麻烦了，如果您还有其他问题，请告诉我。

编辑：，您无法将所需的CSS的结构应用于此html，因为您无法将：last-of-type或类似的规则应用于.class。

您必须在要使用HTML或JS设置样式的区域中添加一个类

谢谢杰森。

如何在CSS中使用多重选择器？

2 个答案: