如何在 CSS 中选择具有多个特定属性的 HTML 元素？

通过多个属性匹配优化 CSS 选择器

在 CSS 中，属性选择器可以根据 HTML 元素的属性精确选择它们。处理多个属性时，可能会出现以下查询：

问： 如何选择同时具有特定属性名称和值的 HTML 元素？例如，我想使用“name=Sex”和“value=M”来定位输入元素。

A: 要匹配 CSS 选择器中的多个属性，只需将属性选择器附加为他们想要的名称和值对。在您的示例中，正确的语法是：

input[name=Sex][value=M]

此选择器将选择具有“name=Sex”和“value=M”属性的输入元素。其他具有不同属性的输入元素，例如“name=Sex”和“value=F”将不会被选择。

W3C 标准对多个属性选择器进行了进一步阐述：“多个属性选择器可用于引用一个元素的多个属性，甚至多次引用同一属性。”

例如，此选择器针对 SPAN 元素，其中“hello”属性等于“Cleveland”，并且"goodbye" 属性等于 "Columbus":

span[hello="Cleveland"][goodbye="Columbus"]

请注意，如果属性值不是有效标识符，则需要在属性值两边加上引号。

总而言之，使用多个属性选择器可以让您通过将元素与特定属性组合相匹配来精确细化 CSS 选择器。

以上是如何在 CSS 中选择具有多个特定属性的 HTML 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！