Question

因此，如果我有一个名为“class-name”的CSS类，以下是什么意思？

.class-name {
  margin: 0;
}

为什么，如果我有以下HTML

<div id="some-id">
    <ul>
        <li class="class-name">
    ...

选择器

#some-id .class-name ul li

不存在？

Answer 1

.class_name表示选择具有该类的元素。

#some-id .class-name ul li表示“在名为'some-id'的元素的内部html中选择属于'class_name'类的元素内的ul元素内的li元素”

Answer 2

第一个意味着您可能认为它意味着什么：任何具有类class-name的HTML元素将具有0宽度的边距（对于每一边，即顶部，底部，左侧和右侧）。

第二个问题有点微妙。这个选择器

#some-id .class-name ul li

仅适用于li下的ul，该class-name位于some-id类的元素下，位于ID为#some-id ul li.class-name的元素下。< / p>

你必须使用这样的选择器来应用你上面的HTML：

li

请注意，该选择器中的.class-name和li.class-name之间没有空格。指定li表示“class-name 类名li .class-name”，而class-name（带空格）则表示“带有类{的元素{1}}找到以下 li“。

Answer 3

#some-id ul li.class-name

是您需要的......

#some-id .class-name ul li

指定＃some-id

下类名的ul后代的li后代

Answer 4

因为class-name上的li不是li包裹的元素。

澄清：

<div id="some-id">
   <div class="class-name">
     <ul>
       <li>

会匹配你提到的选择器字符串。

Answer 5

.class-name指定具有类class-name的元素。选择器#some-id .class-name ul li指定一个li，它是[{1}}的后代，它是某个元素的后代，其中ul类是class-name的后代。要指定具有类#some-id的特定类型的元素，您可以执行class-name - 例如tag.class-name。

Answer 6

该选择器需要ul和li在.class-name的元素下。您的HTML结构与以下选择器匹配

#some-id ul li.class-name

Answer 7

你的选择器乱序，要选择“类名”类的li：

#some-id ul li.class-name

Answer 8

在大多数情况下，只是跳过使用选择器。它使css更容易编写读取和使用。也是你的程序员。是的，您可以使用它们来应用CSS，但是用于ID的类是脚本查找元素并替换它们或其他程序以从中查找信息等。

通过使用CSS的ID，你现在或将来都可以搞砸了。

.class-name是什么意思作为CSS选择器？

8 个答案: