如何阅读以下css类

Question

我有以下CSS课程:

 #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{
     padding-right:2.5%;
     padding-left:0
 }

对于使用css类的所有HTML元素,将其解释是正确的menuAccordian,如果在此元素中有一个<H2>或<A>标记,它将应用在其中定义的填充{}？做什么.dir-rtl和.viewList参考？

另外,如果我在css的一行中都有以下代码:

 #secNav #showHideMenu a.fixed{
     position:fixed;
     top:0
 }

 .HomePage #content{
     min-height:300px
 } 

 #content{
     background-color:#FFF;
     min-height:600px;
     position:relative;
     z-index:0
 }

我是否可以假设每次看到a #,它都是新类的开始,我还可以假设这些类彼此不相关吗？我只是想了解为什么作者会将所有这些放在一行上.它不可读.但也许是因为它们是相关的.

谢谢.

Answer 1

首先,术语.一组花括号之前的部分称为选择器.可以有多个逗号分隔的选择器.在选择器中,您可以使用#name按id属性匹配元素,并按其属性.name进行匹配class.

一般而言,CSS选择器匹配列出的最后一项.

#menuAccordion h2 a

这匹配<a>元素内<h2>元素内部的元素id="menuAccordion".

.dir-rtl #menuAccordion .viewList

这匹配元素class="viewList"内部的元素与元素id="menuAccordion"内部class="dir-rtl".

viewList和dir-rtl类的含义取决于页面作者.它们没有固有的含义.

将所有内容放在一行不会改变CSS的含义.它可能只是一种节省空间的策略而牺牲了可读性.