css3类选择器之结合元素选择器和多类选择器用法

当需要选择具有多个类名的元素时，可以使用结合元素选择器和多类选择器的方法来实现。

当需要选择具有多个类名的元素时，可以使用结合元素选择器和多类选择器的方法来实现。

语法：element.class1.class2 {...}

表示同时包含class1和class2类名的element元素将会使用这个样式。下面是一些示例：

示例1：

html代码：

<div class="color red blue">Hello World!</div>

css代码：

div.color.red.blue {
  font-size: 24px;
  line-height: 1.2;
}

上面的代码表示同时含有color、red和blue这三个类名的div元素将会使用这个样式。效果为字体大小为24px，行高为1.2。

示例2：

html代码：

<ul>
  <li class="fruit apple">苹果</li>
  <li class="fruit pear">梨子</li>
  <li class="fruit banana">香蕉</li>
</ul>

css代码：

li.fruit {
  font-size: 20px;
  line-height: 1.5;
}

li.fruit.apple {
  color: red;
}

li.fruit.banana {
  color: yellow;
}

上面的代码表示所有含有fruit类名的li元素都会使用一个样式，包括字体大小为20px、行高为1.5；同时含有fruit和apple类名的li元素将会使用另外一个样式，文字颜色为红色；同时含有fruit和banana类名的li元素将会使用另外一个样式，文字颜色为黄色。

注意，结合元素选择器和多类选择器使用时，多个类名之间不需要空格进行分割，只需要直接连接在一起即可。同时，这种选择器的优先级比较高，需要慎重使用。