css - sử dụng bộ chọn phổ biến '*' so với html hoặc bộ chọn cơ thể?

Áp dụng các kiểu cho thẻ body sẽ được áp dụng cho toàn bộ trang, vì vậy

body { font-family: Verdana }

sẽ được áp dụng cho toàn bộ trang. Điều này cũng có thể được thực hiện với

* {font-family: Verdana} 

mà sẽ áp dụng cho tất cả các yếu tố và do đó dường như có tác dụng tương tự.

Tôi hiểu nguyên tắc rằng trong trường hợp đầu tiên, kiểu được áp dụng cho một thẻ, thân cho toàn bộ trang trong khi trong ví dụ thứ hai, phông chữ được áp dụng cho từng thành phần html riêng lẻ. Những gì tôi đang hỏi là sự khác biệt thực tế trong việc làm điều đó là gì, ý nghĩa của nó là gì và lý do, tình huống hoặc thực tiễn tốt nhất dẫn đến việc sử dụng cái này hơn cái khác.

Một tác dụng phụ chắc chắn là tốc độ (+1 Rob). Tôi quan tâm nhất đến lý do thực tế để chọn cái này hơn cái kia về chức năng.

Sự khác biệt về chức năng giữa hai lựa chọn bộ chọn CSS này ... (tôi thực hiện)

thân hình

• Áp dụng các thuộc tính phong cách cho các yếu tố cơ thể.
• Các yếu tố trong cơ thể có thể kế thừa các giá trị tài sản. Một số thuộc tính mặc định là 'kế thừa'.
• Khai báo kiểu khớp với một phần tử trong cơ thể có thể ghi đè kiểu được kế thừa.

Bộ chọn phổ quát * (tất cả các yếu tố)

• Áp dụng các thuộc tính phong cách cho tất cả các yếu tố cá nhân.
• Thay thế các thuộc tính kiểu được kế thừa và mặc định 'giá trị ban đầu'. Khối thừa kế.
• Các bộ chọn css cụ thể khác phù hợp hơn với một phần tử sẽ thay thế các thuộc tính kiểu được áp dụng bởi *.

Gợi ý

1. Sử dụng phần thân cho các thuộc tính kiểu mặc định để kế thừa, chẳng hạn như phông chữ, màu sắc, để cung cấp giá trị mặc định hợp lý cho các phần tử, giảm nhu cầu mã hóa rõ ràng cho mọi trường hợp và duy trì khả năng cho các phần tử nằm ở mức thấp hơn bên dưới phần thân thừa hưởng từ cha mẹ của họ.
2. Có lẽ tốt hơn là không sử dụng Universal Selector * trong trường hợp này. Nó làm gián đoạn sự kế thừa giữa các yếu tố khác trong cơ thể và có thể buộc bạn phải viết thêm các quy tắc css để bù lại. Nó có thể là một yếu tố làm chậm hiển thị các trang. Điều này phụ thuộc vào kích thước và nội dung của trang và có bao nhiêu quy tắc css.

Hãy thử một cái gì đó như thế này

body { font-family: Verdana }
table { font-family: Arial }

chống lại

* { font-family: Verdana }
table { font-family: Arial }

Và xem những kiểu nào được áp dụng cho các ô của bảng.

Có một sự khác biệt giữa "áp dụng cho toàn bộ tài liệu" và "áp dụng cho mọi yếu tố của tài liệu" khi bạn đang xử lý các biểu định kiểu xếp tầng .

Áp dụng kiểu xếp tầng cho cơ thể sẽ áp dụng nó cho tất cả các thẻ trong cơ thể cho đến khi thẻ ghi đè lên nó. Sau đó, kiểu ghi đè được áp dụng cho tất cả các thẻ trong đó.

Tuy nhiên, có một số kiểu không xếp tầng, chẳng hạn như lề và phần đệm (thường là nơi không có ý nghĩa). Chúng chỉ có thể được áp dụng cho các thẻ cụ thể và đó là nơi ký tự đại diện có thể hữu ích (mặc dù hiếm khi).

Hầu hết các kiểu không xếp tầng cũng có giá trị kế thừa (ví dụ margin: inherit:), có nghĩa là "lấy giá trị của thẻ cha".

Tôi đã quên các chi tiết đầy đủ nhưng, với bộ chọn *, hiệu suất bị chậm lại vì mỗi phần tử được đánh giá khi trình duyệt phân tích cú pháp CSS và áp dụng kiểu. iirc, thiết lập phông chữ, trong trường hợp này, chỉ cha mẹ tạo một tham chiếu cho mỗi phần tử và công việc bổ sung là không cần thiết.

Cũng có một số vấn đề khác, nhưng, một lần nữa, tôi không nhớ lại tất cả và không sử dụng * trong nhiều năm.

Nguyên tắc chung cho thiết kế CSS tốt là càng cụ thể càng tốt, nhưng không nhiều hơn.

Vì vậy, trong ví dụ của bạn, áp dụng kiểu cho phần tử cơ thể sẽ càng cụ thể càng tốt và chắc chắn cụ thể hơn bộ chọn '*'.

Như những người khác đã đề cập, body { font-family: Verdana }sẽ chọn font Verdena để chỉ những yếu tố mà kế thừa các font-styletài sản từ cha mẹ mình như vậy mà tất cả các bậc cha mẹ của nó quá thừa kế tài sản eventualy hình thành bodyyếu tố, và * {font-family: Verdana}sẽ chọn font Verdena đến tất cả các yếu tố. Tôi muốn minh họa sự khác biệt bằng một ví dụ:

Sử dụng bộ chọn cơ thể:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Sử dụng selelctor phổ quát *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Sử dụng mã css và html của các ví dụ bạn sẽ nhận ra <input>phần tử đó hoàn toàn không kế thừa kiểu phông chữ và do đó, bất cứ điều gì bạn nhập vào biểu mẫu đều có kiểu phông chữ mặc định của biểu định kiểu tác nhân người dùng. Trong ví dụ thứ hai, bộ chọn phổ quát *đặt rõ ràng kiểu phông chữ cho mọi phần tử bao gồm inputphần tử.