不一样的class如何使用相同的css
时间: 2023-12-18 19:05:16 浏览: 26
可以使用CSS中的通配符来实现不同的class使用相同的CSS样式。
例如,我们有两个button,分别有不同的class:`.my-button`和`.different-button`,但是它们的样式是相同的。那么我们可以这样写CSS代码:
```css
/* 通配符样式 */
.my-button, .different-button {
background-color: #4CAF50; /* 设置背景颜色 */
border: none; /* 去掉边框 */
color: white; /* 设置文字颜色 */
padding: 10px 20px; /* 设置内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 去掉下划线 */
display: inline-block; /* 设置为行内块级元素 */
font-size: 16px; /* 设置字体大小 */
border-radius: 5px; /* 圆角 */
transition-duration: 0.4s; /* 过渡动画时间 */
cursor: pointer; /* 设置为手型光标 */
}
/* 特定样式 */
.my-button:hover {
background-color: #3e8e41; /* 鼠标悬停时的背景颜色 */
}
.different-button:hover {
color: #3e8e41; /* 鼠标悬停时的字体颜色 */
}
```
这样,我们可以通过通配符样式`.my-button, .different-button`同时为这两个button添加相同的样式,而通过特定样式`.my-button:hover`和`.different-button:hover`为它们添加不同的鼠标悬停时的样式。这样既能保证样式的一致性,又能保证不同的button有不同的特殊样式。