Question

当使用css选择器选择电话号码时，我遇到了一个有空格的课程。至少有十个选择器，我可以实现我的目标。我的问题是我应该选择哪一个？为什么？提前谢谢。

班级所在的元素：

<div itemprop="telephone" class="phones phone primary">(310) 443-8911</div>

我上面谈过的选择器：

div.phones
div .phones 
div.phones.phone
div .phones.phone    
div.phone.primary
div .phone.primary   
div.primary
div .primary  
div.phones.phone.primary
div .phones.phone.primary

Answer 1

类之间的空格表示单独的类名，而不是单个名。例如，class="phones phone primary"表示该元素有三个类：phone，phone和primary。

您可以使用任何这些类选择此元素。例如：

div.phones
div.phones.phone
div.phone.primary
div.primary
div.phones.phone.primary

但以下情况不起作用：

div .phones 
div .phones.phone    
div .phone.primary   
div .primary  
div .phones.phone.primary

选择元素<div itemprop="telephone" class="phones phone primary">(310) 443-8911</div>（除非它恰好是另一个div的后代），因为div和列出的类之间的空格表示后代关系。换句话说，引入空格意味着选择具有列出的类的元素（例如.phones.phone），这是div的后代。

对于您应该使用的哪个有效选择器完全取决于您和您的需求。上面的第一组在选择你想要的内容时都是有效的，但是他们specificity相对于其他选择器以及你拥有的其他规则可以考虑他们如何渲染。

Answer 2

更喜欢哪个是基于您想要实现的目标。其他人表示，每个级别的空间分开。您可以在CSS中使用类的组合来共享元素之间的样式，同时也针对特定的类。

例如，如果您的HTML看起来像：

<div itemprop="telephone" class="phone primary">Phone: (310) 443-8911</div>
<div itemprop="telephone" class="phone">Cell: (310) 443-1234</div>
<div itemprop="telephone" class="phone">Fax: (310) 443-4321</div>

您可能希望同样设置所有电话号码的样式，但有一些变化：

/* For all phone numbers */
div.phone {
     font-weight: bold;
     font-size: 18px;
     cursor: default;
     display: block;
     color: black;
}

/* Just the primary phone */
div.phone.primary {
     color: red;
}

这样，主要电话号码可能看起来像其他所有电话号码，除了它是红色而不是黑色。

你的元素“手机”和“手机”对我来说似乎没什么用。

Answer 3

这不是带空格的类，这是一个有三个类的div。

对于您的选择器，一旦您了解了不同部分如何协同工作，就会变得轻松

div是元素类型选择器，它只匹配html类型为div的元素
.xyz是一个类选择器，它只匹配xyz作为其中一个类的元素（如果除xyz之外还有其他类，它们仍会匹配）< / LI>
如果你将两个选择器粘合在一起，就像这个div.xyz一样，选择器只匹配与两个部分匹配的元素，所以这个只匹配至少xyz作为一个类的div（并且它是好吧，如果他们有其他课程）
您还可以将两个类选择器粘贴在一起，例如，div.abc.xyz只匹配同时包含div和abc

xyz

如果在两个选择器之间放置一个空格，则会得到一个后代选择器。例如，div .xyz将匹配具有xyz作为其中一个类的元素，这些元素可以是子元素，也可以是孙子元素，也可以是div的更远距离后代。例如，选择器将匹配h1中的<div><h1 class='xyz'>bla</h1></div>，但它与位于文档根目录的<div class='xyz'>bla</div>不匹配（因为它不是div的后代{1}}）

在您列出的选择器中，保证以下选项符合您的元素：

div.phones
div.phones.phone
div.phone.primary
div.primary
div.phones.phone.primary

以下选择器仅与您的元素匹配，如果它直接或间接在另一个div

中

div .phones
div .phones.phone
div .phone.primary
div .primary
div .phones.phone.primary

您使用的选择器取决于您希望的具体程度，即您想要匹配的页面的其他元素。例如，div.phones.phone.primary比div.phones更具体，这意味着它可能会匹配您网页中较少的其他元素。

如果您想阅读有关系统选择选择器和类的特定学科，您应该阅读有关OOCSS，Atomic CSS，BEM和朋友的信息。您可以阅读this article开始使用。

Css选择器 - 当有空间的类时，哪一个更喜欢？

3 个答案: