Không phải theo nghĩa truyền thống, nhưng bạn có thể sử dụng các lớp cho việc này, nếu bạn có quyền truy cập vào HTML. Xem xét điều này:
<p class="normal">Text</p>
<p class="active">Text</p>
và trong tệp CSS của bạn:
p.normal {
background-position : 150px 8px;
}
p.active {
background-position : 4px 8px;
}
Đó là cách CSS để làm điều đó.
Sau đó là các bộ tiền xử lý CSS như Sass . Bạn có thể sử dụng các điều kiện ở đó, trông giống như sau:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
Nhược điểm là bạn bị ràng buộc phải xử lý trước các bảng định kiểu của mình và điều kiện được đánh giá tại thời điểm biên dịch, không phải thời gian chạy.
Một tính năng mới hơn của CSS phù hợp là các thuộc tính tùy chỉnh (hay còn gọi là biến CSS). Chúng được đánh giá tại thời gian chạy (trong các trình duyệt hỗ trợ chúng).
Với họ, bạn có thể làm điều gì đó dọc theo dòng:
:root {
--main-bg-color: brown;
}
.one {
background-color: var(--main-bg-color);
}
.two {
background-color: black;
}
Cuối cùng, bạn có thể xử lý trước biểu định kiểu của mình bằng ngôn ngữ phía máy chủ yêu thích của bạn. Nếu bạn đang sử dụng PHP, hãy cung cấp một style.css.phptệp có dạng như sau:
p {
background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
Trong trường hợp này, tuy nhiên, bạn sẽ có tác động đến hiệu suất, vì việc lưu vào bộ nhớ đệm một biểu định kiểu như vậy sẽ rất khó khăn.