[分享]css几个div共用属性

CSS中很多情况下需要多个div元素共用一些样式属性，这时可以使用“类选择器”来实现。

 .common{
    font-size: 16px;
    color: #333;
    border: 1px solid #ccc;
  } 

上面的代码定义了一个名为common的类选择器，它包含了font-size、color和border三个属性。接下来在html代码中将需要共用这些样式属性的div元素的class属性设置为common即可。

 <div class="common">内容1</div>
  <div class="common">内容2</div>
  <div class="common">内容3</div> 

这里html中的div元素都使用了class="common"，因此它们都会共用默认的样式属性，即font-size为16px，color为#333，border为1px solid #ccc。

如果需要对共用样式属性中的某个元素做一些定制化的修改，可以单独定义该元素的样式属性。

 .common{
    font-size: 16px;
    color: #333;
    border: 1px solid #ccc;
  }

  #special{
    font-size: 20px;
  } 

上面代码中，我们新增了一个ID为special的元素，它需要特殊的样式属性，因此针对它单独定义了font-size样式属性。

 <div class="common">内容1</div>
  <div class="common">内容2</div>
  <div class="common" id="special">特殊内容</div>
  <div class="common">内容3</div> 

在html中，ID为special的元素的class属性仍然是common，因此它会共用common的三个样式属性。但由于ID具有最高优先级，此时其font-size属性会被单独定义的样式属性覆盖，即此处font-size为20px。

通过类选择器和ID选择器，可以很方便地管理大量的html代码和样式属性，除此之外还有一些选择器也值得学习掌握，这些选择器包括标签选择器、属性选择器、伪类选择器等，它们的使用可以有效地优化网页的代码和样式结构。