Làm thế nào để chỉ định thứ tự của các lớp CSS?

113

Tôi hơi bối rối về CSS và classthuộc tính. Tôi luôn nghĩ, thứ tự mà tôi chỉ định nhiều lớp trong giá trị thuộc tính có một ý nghĩa. Lớp sau có thể / nên ghi đè các định nghĩa của lớp trước, nhưng điều này dường như không hoạt động. Đây là một ví dụ:

<html>
<head>
<style type="text/css">
    .extra {
        color: #00529B;
        border:1px solid #00529B; /* Blue */
        background-color: #BDE5F8;
    }

    .basic {
           border: 1px solid #ABABAB;
    }
</style>
</head>
<body>
    <input type="text" value="basic" class="basic"/>
    <input type="text" value="extra" class="extra"/>
    <input type="text" value="basic extra" class="basic extra"/>
    <input type="text" value="extra basic" class="extra basic"/>
</body>
</html>

Tôi mong đợi, ví dụ thứ ba với class="basic extra"phải có đường viền màu xanh lam, vì đường viền bổ sung được chỉ định sẽ ghi đè đường viền từ cơ bản.

Tôi đang sử dụng FF 3 trên ubuntu 9.04

html css

— Tim Büthe
nguồn

246

Thứ tự mà các thuộc tính bị ghi đè không được xác định bởi thứ tự các lớp được xác định trong classthuộc tính, mà thay vào đó là nơi chúng xuất hiện trong CSS.

.myClass1 {color:red;}
.myClass2 {color:green;}

<div class="myClass2 myClass1">Text goes here</div>

Mở rộng đoạn mã

Văn bản trong di divchúc xuất hiện green, và không red; vì .myClass2định nghĩa CSS nằm sâu hơn .myClass1. Nếu tôi hoán đổi thứ tự của các tên lớp trong classthuộc tính, thì sẽ không có gì thay đổi.

— Zoidberg
nguồn

14

Tôi không thể hiểu tại sao họ lại triển khai nó như thế này. Thật thú vị, đó cũng là ý kiến của tôi về hầu hết những thứ khác mà CSS có thể làm.

— byxor

@ bởi vì bởi vì các quy tắc là tầng . họ áp dụng biểu mẫu từ trên xuống dưới, từ trái sang phải. có ý nghĩa với tôi

— O-9

27

Thứ tự của các lớp trong thuộc tính là không liên quan. Tất cả các lớp trong classthuộc tính được áp dụng như nhau cho phần tử.

Câu hỏi đặt ra là: các quy tắc kiểu xuất hiện trong tệp .css của bạn theo thứ tự nào . Trong ví dụ của bạn, .basicxuất hiện sau .extrađể các .basicquy tắc sẽ được ưu tiên bất cứ khi nào có thể.

Nếu bạn muốn cung cấp khả năng thứ ba (ví dụ: đó là .basicnhưng các .extraquy tắc vẫn nên áp dụng), bạn sẽ cần phải phát minh ra một lớp khác, .basic-extracó lẽ, cung cấp rõ ràng cho điều đó.

— VoteyDisciple
nguồn

4

Điều này có thể được thực hiện, nhưng bạn phải sáng tạo một chút với bộ chọn của mình. Sử dụng bộ chọn thuộc tính, bạn có thể chỉ định những thứ như "bắt đầu bằng", "kết thúc bằng", "chứa", v.v. Hãy xem ví dụ bên dưới bằng cách sử dụng cùng một đánh dấu của bạn, nhưng với bộ chọn thuộc tính.

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

<input type="text" value="basic" class="basic"/>
<input type="text" value="extra" class="extra"/>
<input type="text" value="basic extra" class="basic extra"/>
<input type="text" value="extra basic" class="extra basic"/>

Mở rộng đoạn mã

— TravisV
nguồn