nối chuỗi trong css

Question

Tôi muốn đạt được những điều sau đây trong css. Làm cách nào để tôi thực hiện theo cách thức hoạt động trong IE8 +

url('../img/icons/' + attr('type') + '_10.png') 

Answer 1

Bạn không thể làm suy chuỗi động theo cách mà bạn đang đề xuất, nhưng nếu bạn có một số giới hạn các giá trị có thể cho thuộc tính [type], bạn có thể tạo phong cách cho mỗi người:

.your .selector[type="foo"] { 
    background-image: url('../img/icons/foo_10.png'); 
} 
.your .selector[type="bar"] { 
    background-image: url('../img/icons/bar_10.png'); 
} 
.your .selector[type="baz"] { 
    background-image: url('../img/icons/baz_10.png'); 
} 

Nếu bạn có một số loại không hợp lý, thì có thể bạn sẽ cần đến một giải pháp tốt hơn so với những gì tôi đã liệt kê ở đây.

Answer 2

Tôi không nghĩ bạn có thể làm được. Trong thuộc tính content, bạn có thể "ghép nối" chỉ bằng cách tách biệt với một khoảng trắng, nhưng ở những nơi khác, tôi không nghĩ có một tính năng như vậy. Đó là một sự xấu hổ.

Có thể bạn sẽ tốt nhất không chỉ định kiểu này trong thuộc tính style bất cứ khi nào thuộc tính type được sử dụng.

Answer 3

Sử dụng string interpolation js thư viện

Answer 4

Không, bạn không thể làm điều này trong CSS đơn giản bởi vì ngôn ngữ CSS đã không kiểm soát cấu trúc hoặc bất cứ điều gì như Mà đó sẽ cho phép bạn dinamically tạo mã CSS.

Thay vào đó, bạn có thể sử dụng giải pháp javascript hoặc giải pháp dựa trên biến CSS được mã hóa bằng PHP.

Answer 5

chỉ cần sử dụng này:

url('../img/icons/' attr('type') '_10.png')