Cách rất tốt đề lý giải nó là bắt đầu với cùng 1 ví dụ đã làm bạn khó hiểu và hoàn toàn có thể đã chuyển động không giống như chúng ta hy vọng ngóng.Sau kia bọn họ đang để mắt tới kĩ hơn về cách tính giá trị sệt hiệu nhưng selector sẽ được ưu tiên.

Bạn đang xem: Sử dụng !important trong css

Đây là một trong menu dễ dàng và đơn giản cùng không tồn tại vật dụng tự:

ul id="summer-drinks"> li>Whiskey và Ginger Aleli> li>Wheat Beerli> li>Mint Julipli>ul>Bây giờ bạn có nhu cầu chỉ định một thức uống thành yêu thích trong list đồ uống của người tiêu dùng với đổi khác nó về style một không nhiều. Quý khách hàng đề xuất một hook cho vấn đề đó đề xuất các bạn sẽ vận dụng nó thông qua một class name cho nó.

ul id="summer-drinks"> li class="favorite">Whiskey and Ginger Aleli> li>Wheat Beerli> li>Mint Julipli>ul>Bây giờ đồng hồ bạn hãy mlàm việc tệp tin CSS của công ty và styling đến class mới:

.favorite color: red; font-weight: bold;Sau đó các bạn nhìn xem nó thao tác nắm nào, cơ mà nó không làm việc! Một loại nào đó vẫn tạo ra vụ việc ở đây.

Đi sâu hơn vào tệp tin CSS, các bạn sẽ thấy điều này:

ul#summer-drinks li font-weight: normal; font-size: 12px; color: black;Vấn đề nằm ở ngay kia. Hai CSS selectors không giống nhau sẽ nói đến đoạn text đó tất cả color cùng font-weight gì. Nhưng chỉ có một lệnh mang đến font-size yêu cầu cụ thể mẫu đó sẽ có hiệu lực thực thi hiện hành. Không bao gồm xung đột nhiên gì tại đây cả tuy thế trình chú ý bắt buộc quyết định một trong số những lệnh kia để vận dụng với hiển thị bọn chúng. Nó làm cho bằng cách theo đúng một bộ phép tắc tiêu chuẩn.

Tôi nghĩ rằng điều đó sẽ gây ra chút ít trở ngại cho những người new bước đầu bởi vì họ chưa trọn vẹn nhận ra vấn đề đó. Họ chắc rằng nghĩ về vị class .favorite ở sâu rộng vào CSS hoặc chính vì nó sát với chữ hơn trong HTML :v vẫn là người thành công.

Trong thực tiễn, đồ vật từ bỏ của những selectors trong CSS đã nhập vai trò bao gồm và nguyên tắc "từ bỏ trên xuống" sẽ được áp dụng Khi cực hiếm quánh hiệu là giống nhau. Cho ví dụ:

favorite color: red;.favorite color: black;Ở dây nó sẽ sở hữu color black... Nhưng chúng ta sẽ lạc đề :v

Vấn đề ở đấy là bọn họ ao ước nó rõ ràng nhằm nó tất cả ý nghĩa với mọi ví dụ mà lại họ tất cả. mặc khi cùng với ví dụ dễ dàng và đơn giản được trình bày sinh hoạt bên trên, Cuối thuộc chúng ta cũng sẽ thấy chỉ cần sử dụng class name nhằm cho tới phương châm "favorite drink" là không thay đổi hoặc sẽ không còn an toàn trong cả Khi nó vận động . Sẽ thông mình hơn ví như thực hiện điều đó :

ul#summer-drinks li.favorite color: red; font-weight: bold;Đó là mọi là mà lại tôi sẽ gọi là " rõ ràng nhằm nó bao gồm ý nghĩa". Quý khách hàng thực sự hoàn toàn có thể "cầm thể" rộng Lúc áp dụng thứ hạng dạng như vậy này:

html toàn thân div#pagewrap ul#summer-drinks li.favorite color: red; font-weight: bold;Nhưng nó đang là code Css của khách hàng khó khăn đọc với ko mang đến tiện ích thực tiễn. Một bí quyết khác nhằm tăng giá trị đặc hiệu đến class ".favorite" của khách hàng là áp dụng important!

.favorite color: red !important; font-weight: bold !important;Tôi đã từng nghe bảo rằng !important y hệt như một trò lừa về niềm tin vào css. Quả thực là như thế, với bạn có thể buộc ý chí của mình thừa qua các khó khăn trong css bằng cách thực hiện nó. Nhưng !important áp đặt rằng đã tăng mạng tính quánh hiệu bên trên selector với từ này sẽ vượt qua được những style không giống.

Xem thêm: If Applicable Là Gì - Nghĩa Của Từ Applicable

!important có thể dễ dãi thực hiện không nên nếu như hiểu nhầm. Nó là bí quyết giỏi để lưu lại mang đến code của công ty sạch mát hơn, trong số ví dụ nhưng mà bạn biết những elements cùng với các class selector rõ ràng buộc phải thực hiện style đồng bộ bất kỳ nó là gì. trái lại, tránh việc sử dụng trichồng để ghi đè lên trên style của một element nào kia gắng vị tìm ra phương pháp CSS được viết cùng hoạt đông theo tác giả ban sơ.

Một ví dụ kinh điển là:

last margin-right: 0 !important;Tôi hay thực hiện nó trong những tình huống có nhiều kân hận nối, đến khối hận ở đầu cuối bên đề nghị vào một row. Điều đó đảm bảo chắc chắn rằng khối hận cuối cùng không tồn tại bất cứ right margin làm sao điều đó sẽ giúp nó ở cạnh bên nài nỉ bắt buộc so với bố mẹ nó. Mỗi khối hận hoàn toàn có thể tất cả các Css selector ví dụ để thêm right margin cho cái đó, tuy thế !important vẫn phá vỡ lẽ điều đó cùng tạo nên class quan sát đơn giản và dễ dàng cùng clear hơn.

Tính quý hiếm đặc hiệu CSS

Tại sao cố gắng trước tiên của chúng ta nhằm biến hóa color cùng font-weight thất bại? Nhỏng chúng ta đã học, chính là bởi vì họ dễ dàng và đơn giản chỉ dụng class name có giá trị sệt hiệu phải chăng hơn selector không giống. Css áp dụng những trọng số quánh hiệu không giống đến id với class. Trong thực tiễn một Id có mức giá trị cao hơn nhiều! Vì vậy quan yếu một class rất có thể vượt qua được id.

Chúng ta hãy xem cách các con số thực thụ được tính toán:

*
Nói cách khác:

Nếu bộ phận bao gồm inline styling, tự động hóa này sẽ chiến hạ (1,0,0,0 điểm)Mỗi ID vận dụng (0,1,0,0 điểm)Mỗi class (hoặc pseudo-class hoặc attribute selector) vận dụng (0,0,1,0 điểm)Với từng tmê mẩn chiếu thẳng element gồm (0,0,0,1 điểm)

Nói thông thường, chúng ta cũng có thể đọc cực hiếm như các số lượng, như một,0,0,0 là "1000", Vì rứa nó rõ ràng đã thắng độ sệt hiệu 0,1,0,0 hoặc "100". Dấu phẩy ở chỗ này đích thực để thông báo bọn họ rằng nó chưa hẳn đích thực là "base 10". Về phương diện kĩ thuật bạn có nuốm có giá trị nhỏng 0,1,13,4 và "13" ko tràn ra nlỗi "base 10".

Xem thêm: "Address Someone Là Gì, Nghĩa Của Từ Someone, Address Someone Có Nghĩa Là Gì

Tính toán một phương pháp solo giản

*
*
*

Update: :not() sort-of-pseudo-class không thêm quý hiếm quánh hiệu vào bao gồm nó. Chỉ đều gì bên trong parent là được thêm giá trị đặc hiệu.

*
*

Chú ý quan liêu trọngSelector thông dụng (*) không có quý hiếm quánh hiệu (0,0,0,0)Pseudo-elements (e.g. :first-line) có mức giá trị (0,0,0,1) ko y như bạn bè của chúng psuedo-class có giá trị (0,0,1,0)pseudo-class :not() ko thêm tính đặc hiệu của nó, Chỉ cái gì bên trong vệt () mới đạt thêm tính sệt hiệu.Thêm !important vẫn làm cho nó auto win :v. Nó đã ghi đnai lưng trong cả inline style. Chỉ phải !important là có thể ghi đè cổ số đông thiết bị. !important được knhị báo sau trong CSS với cái giá trị bởi hoặc to hơn. Quý Khách rất có thể suy nghĩ nó vẫn thêm (1,0,0,0,0) cho tới quý giá đặc hiệu.Nguồn tđam mê khảo

css-tricks


Chuyên mục: ĐỊNH NGHĨA
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *