Question

我是CSS的新手。我正在阅读一些代码，其中类定义如下：

.a.b .c.d li.e {
margin-top:none; }

.a.b .c.d sects.item {
border-top: 1px; }

我很困惑这是什么意思？如果我想在上面的情况下覆盖边框，我如何定义自己的类？

Answer 1

这些被称为CSS选择器，google“css选择器”以了解更多信息。

以下是w3：http://www.w3schools.com/cssref/css_selectors.asp

的参考资料

简而言之，

“”。用于选择一个类 “＃”用于通过其“id”属性选择唯一元素 .class1 .class2，选择class1的class2后代的元素 “，”是OR连词等

所以对于你的例子：

.a.b .c.d li.e {...}：将样式应用于＆lt; li＆gt; “e”类的元素，它们是“c”和“d”类元素的后代，它们又是“a”和“b”类元素的后代
.a.b .c.d sec.item {...}：将样式应用于元素＆lt; sec＆gt; class =“item”是class“c”和“d”的元素的后代，它们是“a”和“b”类元素的后代。

Answer 2

.a.b .c.d li.e {
margin-top:none; }

<div class="a b">
  <ul class="c d">
     <li class="e">
        This is the area being referred to in the CSS.
     </li>
   </ul>
</div>

选择包含课程a 和 b的元素，然后选择元素的子元素，但只选择类c < strong>和 d，然后选择 e。

_{我猜测那里有一个<ul>标记作为<li>的直接父级。对于有效的HTML，需要有。}

当CSS在两个选择器之间没有空格时，意味着两个选择器在同一个元素上使用，并且它们之间有空格。

.c.d指的是

<div class="c d"></div>

#c.d会参考

<div id="c" class="d"></div>

.c .d指的是

<div class="c">
<div class="d"></div>
</div>`

CSS中的空格意味着.d是.c的孩子。没有空格意味着在相同的元素上使用两个选择器。

以下类做同样的事情。但是它会选择一些被称为“sects”的东西，但这不是一个有效的标签，并且在它之前没有声明字符（＃或。）来表示ID或Class。然后只有类item的“sects”。所以...下面的有点坏了。（除非有人使用自定义HTML5标签）。

.a.b .c.d sects.item {
border-top: 1px; }

定义CSS类

2 个答案: