在CSS|SASS中选择多HTML元素的教程

这是一个关于如何用CSS选择多类HTML元素的简短教程。

我们可以使用类选择器或ID选择器来选择，但有时我们想强制使用类选择器，这个例子解释了如何在CSS/HTML中选择多个类。

我们有一个具有多个CSS类名的div类

如下例所示，div标签有多个用空格分隔的类名。

<div class="container left">
This is Left container
</div>
<div class="container right content">
This is Right container
</div>

假设你想把这个右边的div的颜色更新为红色和粗体，那么我们必须使用CSS选择器从DOM中选择右边的div。

选择三个类的CSS示例

如果DIV包含class="container"、class="right "和class="content"，则该DIV被选中。

CSS选择器是用. ，所以多个类被并排添加，没有空格。

CSS代码：

.container.right.content{
    color:blue;
    font-weight:700
}

选择两个类的CSS代码

代码：

.container.left{
    color:blue;
    font-weight:700
}

让我们看一个带有class和id的多个选择器的例子

要用id选择器选择div，我们必须使用#符号

<div id="first">
<span class="block">first span<span>
<span class="block second">second span<span>
</div>

并使用id选择第二个跨段

#first .block.second{
    font-weight:700;

}
#first .block{
    font-size:14px;

}

SASS/SCSS代码在同一项目中选择多个选择器类

在SCSS中，父选择器和符号被使用。这个&将在CSS编译后被并列解决。

.container{
    &.right{
        &.content{
             color:blue;
             font-weight:700
        }
    }
}

SASS代码为上述html代码提供多个id和class选择器。

#first{
    & .block{
            font-size:14px;
        &.second{
            font-weight:700;

        }
    }
}

浏览器支持

此语法支持最新的浏览器，包括IE7版本。