Tôi có thể áp dụng 2 lớp cho một div hoặc span hoặc bất kỳ phần tử html nào không? Ví dụ:
<a class="c1" class="c2">aa</a>Tôi đã thử và trong trường hợp của tôi, c2 không được áp dụng. Làm thế nào tôi có thể áp dụng cả hai lớp cùng một lúc?
Câu trả lời:
Bao gồm cả hai chuỗi lớp trong một giá trị thuộc tính lớp duy nhất, với một khoảng trắng ở giữa.
<a class="c1 c2" > aa </a>Như những người khác đã chỉ ra, bạn chỉ cần phân cách chúng bằng một khoảng trắng.
Tuy nhiên, biết cách hoạt động của bộ chọn cũng rất hữu ích.
Hãy xem xét đoạn HTML này ...
<div class="a"></div>
<div class="b"></div>
<div class="a b"></div>Sử dụng .a { ... }như một bộ chọn sẽ chọn thứ nhất và thứ ba. Tuy nhiên, nếu bạn muốn chọn một cái có cả hai avà b, bạn có thể sử dụng bộ chọn .a.b { ... }. Lưu ý rằng điều này sẽ không hoạt động trong IE6, nó sẽ chỉ cần chọn .b(cái cuối cùng).
<a class="c1 c2">aa</a>Điều này rất rõ ràng rằng để thêm hai lớp trong một div, trước tiên bạn phải tạo các lớp và sau đó kết hợp chúng. Quá trình này được sử dụng để thực hiện các thay đổi và giảm bớt số không. của các lớp. Những người làm trang web từ đầu hầu hết đã sử dụng loại phương pháp này. chúng tạo ra hai lớp đầu tiên là lớp màu và lớp thứ hai là để thiết lập chiều rộng, chiều cao, kiểu phông chữ, v.v. Khi chúng ta kết hợp cả hai lớp thì lớp thứ nhất và lớp thứ hai đều có hiệu lực.
.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}<div class="box color">orderlist</div>Tách chúng ra bằng một khoảng trắng.
<div class="c1 c2"></div>.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}<div class="box color">orderlist</div>.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}<div class="box color">orderlist</div>.color
{background-color:#21B286;}
.box
{
width:"100%";
height:"100px";
font-size: 16px;
text-align:center;
line-height:1.19em;
}
.box.color
{
width:"100%";
height:"100px";
font-size:16px;
color:#000000;
text-align:center;
}<div class="box color">orderlist</div>