怎样同时定义多个元素的CSS样式？

html-css09

怎样同时定义多个元素的CSS样式？,第1张

按照样式定义：\x0d\x0a.div1,.div2,.div3,.div4 a:hover {}\x0d\x0a.div1,.div2,.div3,.div4 a:link {} \x0d\x0a\x0d\x0a如果你的div 的名字是div1~4,那么应该使用\x0d\x0a#div1,#div2,#div3,#div4

例如：

<div class="div1"><a>1</a></div>

<div class="div2"><a>1</a></div>

<div class="div3"><a>1</a></div>

<div class="div4"><a>1</a></div>

<style>

.div1,.div2,.div3,.div4 a:hover{color:red}

.div1,.div2,.div3,.div4 a:link{color:#ddd}

</style>

每一个都要加上点

css的类是可以被一个元素同时使用多个的，也就说某个元素可以同时使用多个class样式，但是如果发生了样式冲突会出现后者覆盖前者的现象。

工具原料：编辑器、浏览器

1、一个元素可以同使用多个class样式类，写法一般是class=“test1 test2”中间使用空格隔开即可，代码如下：

<body>

<style type="text/css">

.div1{

width: 200px

height: 200px

}

.div2{

background: #ccc

}

</style>

<div class="div1 div2"></div>

</body>

2、以上代码div同时使用了div1类和div2类的样式，最终的效果是一个宽高200像素背景是灰色的div，运行的结构如下：