你能给我解释一下这两个CSS类语法的区别吗:
.element .symbol {}
and
.element.large .symbol {}
我不明白这两者之间的区别。第一行表示对两个不同的类应用相同的样式。但是关于第二点，‘是什么意思?大写的'是附着在'.element'后面的?
当前回答
使用
.element.large
引用包含两个类的元素:
<div class="element large"></div>
而不是元素的后代:
.element .large
意思是:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
正在接收样式。
基本上，被一个空间分隔意味着两个具有后代关系的元素。
其他回答
我认为你对第一个的意思有一点误解。
.element .symbol {}
意味着这些CSS设置被应用到包含类.element的元素中的任何带有类.symbol的HTML元素。
<div class="element">
<div class="symbol" />
</div>
在本例中，您的第一个CSS条目将影响中间的<div>标记。
第二个示例意味着第一个类需要两个类才能受到影响。除此之外，它等于第一个。
<div class="element large">
<div class="symbol" />
</div>
因此，如果HTML看起来像这样，CSS值将被应用到内部的<div>标签。
如果你想分别设置适用于多个类的CSS标签，那么你需要使用逗号将它们分开。它看起来是这样的:
.element, .symbol {}
编辑:通过请求链接到CSS选择器的文档。
你可以使用.element .symbol将一个元素放在另一个元素中。例如:
<div class="element">
<i class="symbol"></i>
</div>
如果你想要区分一些div，你可以添加一个额外的类来只针对那些不同的类，并以.element为目标。大.symbol。举个例子:
<div class="element large">
<i class="symbol"></i>
</div>
如果没有空格，选择器将更加特定。因为类可以在html dom中出现多次。但是在一个元素中有两个或多个类比较罕见，因此更加精确。
带有空格的选择器(。A1 .b2)，例如搜索类A1，并查看该元素中是否有类b2的子元素或子元素。
>选择器甚至可以达到更高的精度(。A1。b2 > span)。这说明只应该考虑span元素，它们是类.b2的直接子元素，位于类a1的元素中。
.a1 .b1 { 颜色:绿色; ｝ .a1。A2 .b1 { 颜色:红色; ｝ .a1。A2 .b2 { 字体样式:斜体; 粗细:大胆的; ｝ .a1。A2 .b2 > span { 颜色:橙色; ｝ < div class = " a1 " > <div class="b1">你好法国</div> <div class="b1">你好，西班牙</div> <div class="b2">你好，瑞典</div> < / div > <人力资源/ > <div class="a1 a2"> <div class="b1">再见法国</div> <div class="b1">再见西班牙</div> < div class = " b2”> 再见 < span > < / span >世界 < / div > < / div >
使用
.element.large
引用包含两个类的元素:
<div class="element large"></div>
而不是元素的后代:
.element .large
意思是:
<div class="element">
<div class="large"></div>
</div>
only
<div class="large"></div>
正在接收样式。
基本上，被一个空间分隔意味着两个具有后代关系的元素。
在第二个例子中，选择器的第一部分只是一个具有两个类的元素，如<span class="element large">或<span class="large element">。
通常，选择器的每个部分应用于一个HTML元素。
表(边界)。Clname表示带有border属性和Clname类的表，而table [border] . Clname表示带有Clname类的元素，位于带有border属性的元素中，位于表中。
(编辑:好吧，我说的是“一个HTML元素”，但当然你可以有多个适用于这个的表。你理解。)
