css选择器——定义css类

Question

我是一个CSS新手。我正在阅读一些代码，其中类被定义为:

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

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

Answer 1

这些被称为CSS选择器，谷歌"CSS选择器"了解更多。

这是w3的参考:http://www.w3schools.com/cssref/css_selectors.asp

在短暂的

,

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

对于你的例子:

• 。。b . c。d。E{…}:将样式应用于<"e"类元素是"c"类和"d"类元素的后代，而"c"类和"d"类元素又是"a"类和"b"类元素的后代

• 。。b . c。D sec.item{…}:对元素

为class="item"的元素，它们是类"c"和类"d"元素的后代，而类"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 和 d类的子元素，然后选择该元素的列表项子元素，而仅具有e类的元素。

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

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

.c.d指

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

#c.d指

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

其中as .c .d指的是

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

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

下面的有点像做同样的事情。然而，它会选择一些被称为"sects"的东西，但这不是一个有效的标签，并且没有声明字符(#或。)以指示ID或Class。然后是item类的"教派"。所以…下面是有点像破碎。(除非有人使用自定义HTML5标签)。

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