Thuộc tính bắt đầu bằng dấu sao có nghĩa là gì trong CSS?

Question 1

Hôm nay tôi đang xem tệp css và tìm thấy bộ quy tắc sau:

div.with-some-class {
    display:block;                   
    margin:0;
    padding:2px 0 0 0;
    *padding:1px 0 0 0;
    font-size:11px;   
    font-weight:normal;
    *line-height:13px;
    color:#3D9AD0;
}

Ngôi sao trong * padding và * line-height có ý nghĩa gì?

Cảm ơn.

Question 2

Đây là "hack tài sản ngôi sao" cùng dòng với "hack gạch dưới." Nó bao gồm rác trước thuộc tính mà IE bỏ qua (* hoạt động với IE 7, _ lên đến IE 6).

Question 3

Trong CSS? Không có gì; nó là một lỗi.

Do một số lỗi trong một số phiên bản của Internet Explorer, chúng sẽ không bỏ qua chính xác tên thuộc tính không hợp lệ, vì vậy đây là một cách cung cấp CSS dành riêng cho các trình duyệt đó.

Mặc dù vậy, sử dụng bình luận có điều kiện rõ ràng hơn và an toàn hơn.

Question 4

Ký tự asteriks là một ký tự đại diện hợp lệ trong CSS. Chỉ sử dụng nó có nghĩa là các thuộc tính CSS sau đây sẽ được sử dụng chống lại tất cả các nút phần tử trong DOM. Thí dụ:

*{color:#000;}

Thuộc tính trên sẽ được áp dụng cho tất cả các phần tử DOM, do đó đánh bại cách xếp tầng tự nhiên trong CSS. Nó chỉ có thể được ghi đè bằng cách nhắm mục tiêu cụ thể các phần tử DOM mà việc nhắm mục tiêu đó bắt đầu tham chiếu số nhận dạng duy nhất. Thí dụ:

#uniqueValue div strong{color:#f00;}

Thuộc tính trên sẽ ghi đè ký tự đại diện và làm cho văn bản của tất cả các phần tử mạnh xuất hiện trong một div bên trong một phần tử có giá trị thuộc tính id là "uniqueValue".

Sử dụng ký tự đại diện được áp dụng phổ biến, chẳng hạn như ví dụ đầu tiên, có thể là một phương pháp nhanh chóng và tiện lợi để viết biểu định kiểu đặt lại. Nó nhanh chóng và bẩn thỉu vì định nghĩa chi tiết của bản trình bày sau ký tự đại diện có thể sẽ tạo ra một biểu định kiểu cực kỳ cồng kềnh. Nếu bạn định sử dụng ký tự đại diện, tôi khuyên bạn nên sử dụng nó cụ thể hơn, chẳng hạn như:

* strong{color:#f00;}

Ví dụ trên sẽ làm cho văn bản của tất cả các phần tử mạnh có màu đỏ bất kể các thuộc tính CSS khác không được chỉ định bằng số nhận dạng duy nhất. Điều này được coi là an toàn hơn nhiều so với việc sử dụng khai báo "! Important" vì khai báo đó được biết là gây ra sự can thiệp vào chức năng tự nhiên của các hành vi dự kiến và là một cơn ác mộng về bảo trì.

Các tiểu hành tinh trong ví dụ của bạn ở sai vị trí vì chúng dường như xuất hiện bên trong các khai báo thuộc tính, mã nằm bên trong dấu ngoặc nhọn và điều đó có thể sẽ gây ra lỗi.

Question 5

Đây là một bản hack cho IE7.

Nếu bạn viết điều này:

.test {
    z-index: 1;
    *z-index: 2;
}

trên tất cả các bộ điều hướng tuân theo Tiêu chuẩn W3C <div class="test"></div>HTMLElement có một z-index: 1nhưng đối với IE7, phần tử này có một z-index: 2.

Đây không phải là tiêu chuẩn.

Để đạt được điều tương tự với Tiêu chuẩn W3C, hãy làm theo các bước sau:

Thêm một số Nhận xét có điều kiện của Internet Explorer (đây là một Nhận xét HTML đơn giản cho tất cả các điều hướng khác, vì vậy, đó là một cách tiêu chuẩn).

<! - [if IE 7]> <html lang = "fr" class = "ie7"> <! [endif] ->

<! - [if gt IE 7]> <! -> <html lang = "fr"> <! - <! [endif] ->

Và sử dụng các quy tắc trước đó như sau:

.test {
    z-index: 1;
}
.ie7 .test {
    z-index: 2;
}