php-将多个CSS类分组到另一个类

对于该人来自哪个城市或州,我的页面都有特定的样式.因此,如果他们来自新泽西州,则背景为红色.为此,我现在正在做类似的事情:

HTML / PHP

<div class="<?PHP echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top-Bar">Name</div>
    <div class="Bottom-Bar">Location</div>
  </div>
</div>

的CSS

.New.Jersey .Top-Bar, 
.New.Jersey .Bottom-Bar {
  background-color: red;
}

.Pennsylvania .Top-Bar, 
.Pennsylvania .Bottom-Bar {
  background-color: blue;
}

当我想向彩色页面添加新元素时,我必须走到每一行,并为每个位置添加.Pennsylvania .Middle-Bar之类的内容.

一个更好的方法吗?我知道我可以用颜色代码来做一些数据库,并以这种方式来做样式,但是我希望样式表上有尽可能多的表现.

解决方法:

为什么不写

<div class="<?PHP echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top Bar">Name</div>
    <div class="Bottom Bar">Location</div>
  </div>
</div>

.New.Jersey .Bar
  background-color: red;
}

.Pennsylvania .Bar
  background-color: blue;
}

然后,如果您想要另一个元素,可以写,说

<div class="Middle Bar">Population</div>

并且颜色样式将被自动选择.

如果您想要其他特定于中间条的样式(例如,字体粗细),而不是编写

.Pennsylvania .Middle-Bar
  font-weight: bold;
}

你会写

.Pennsylvania .Middle.Bar
  font-weight: bold;
}

相关文章

统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...
前言 之前做了微信登录,所以总结一下微信授权登录并获取用户...
FastAdmin是我第一个接触的后台管理系统框架。FastAdmin是一...
之前公司需要一个内部的通讯软件,就叫我做一个。通讯软件嘛...
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单,返...