Css important! là gì? sử dụng như thế nào cho đúng

Cách tốt nhất có thể đề giải thích nó là ban đầu với cùng 1 ví dụ đang làm cho các bạn nặng nề hiểu cùng rất có thể đã hoạt động không giống như chúng ta muốn hóng.Sau đó bọn họ đã cẩn thận kĩ rộng về cách tính cực hiếm quánh hiệu mà selector sẽ được ưu tiên.

Bạn đang xem: Css important! là gì? sử dụng như thế nào cho đúng

Đây là một trong những list đơn giản dễ dàng và không có thứ 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 hướng dẫn và chỉ định một đồ uống thành mến mộ vào danh sách thức uống của chúng ta với biến đổi nó về style một ít. quý khách hàng cần một hook mang lại điều này bắt buộc bạn sẽ áp dụng nó thông sang 1 class name cho nó.

ul id="summer-drinks"> li class="favorite">Whiskey & Ginger Aleli> li>Wheat Beerli> li>Mint Julipli>ul>Bây tiếng bạn hãy msinh sống file CSS của khách hàng với styling mang lại class mới:

.favorite color: red; font-weight: bold;Sau đó chúng ta chú ý coi nó làm việc nắm nào, nhưng nó không có tác dụng việc! Một loại gì đấy đã tạo ra vụ việc tại chỗ này.

Đi sâu rộng vào file 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 tại vị trí ngay lập tức đó. Hai CSS selectors không giống nhau sẽ nói đến đoạn text kia có color với font-weight gì. Nhưng chỉ có một lệnh cho font-size cần ví dụ loại đó sẽ sở hữu hiệu lực thực thi hiện hành. Không có xung bất chợt gì tại đây cả nhưng lại trình xem xét buộc phải quyết định một giữa những lệnh đó nhằm áp dụng và hiển thị bọn chúng. Nó làm cho bằng phương pháp theo đúng một bộ quy tắc tiêu chuẩn.

Tôi cho rằng điều đó sẽ gây ra chút trở ngại cho những người mới bước đầu chính vì chúng ta không hoàn toàn nhận biết điều đó. Họ chắc rằng nghĩ do class .favorite nằm sâu hơn vào CSS hoặc bởi vì nó ngay sát cùng với chữ hơn vào HTML :v đã là người thắng lợi.

Trong thực tế, lắp thêm tự của những selectors trong CSS sẽ vào vai trò thiết yếu với nguyên tắc "trường đoản cú bên trên xuống" sẽ được vận dụng Lúc cực hiếm sệt hiệu là như là nhau. Cho ví dụ:

favorite color: red;.favorite color: black;Tại dây nó sẽ có màu blaông xã... Nhưng họ đã lạc đề :v

Vấn đề sống đây là bọn họ hy vọng nó cụ thể nhằm nó tất cả ý nghĩa với mọi ví dụ nhưng mà bọn họ bao gồm. Ngay cả 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 cùng chúng ta cũng sẽ thấy chỉ cần áp dụng class name nhằm mục đích tới phương châm "favorite drink" là ko biến hóa hoặc sẽ không còn an toàn ngay cả khi nó vận động . Sẽ thông bản thân rộng trường hợp thực hiện điều đó :

ul#summer-drinks li.favorite color: red; font-weight: bold;Đó là hồ hết là cơ mà tôi đã Call là " rõ ràng để nó bao gồm ý nghĩa". quý khách hàng thực thụ rất có thể "thế thể" rộng Khi sử dụng hình dáng dạng như thế này:

html body toàn thân div#pagewrap ul#summer-drinks li.favorite color: red; font-weight: bold;Nhưng nó đã là code Css của chúng ta cực nhọc phát âm với không đem lại ích lợi thực tiễn. Một bí quyết khác nhằm tăng giá trị sệt hiệu mang lại class ".favorite" của doanh nghiệp 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ững điều đó, cùng bạn cũng có thể buộc ý chí của chính bản thân mình vượt qua các khó khăn vào css bằng phương pháp thực hiện nó. Nhưng !important áp đặt rằng sẽ tăng mạng tính quánh hiệu trên selector với trường đoản cú này sẽ quá qua được các style khác.

Xem thêm: Pedigree: Windwhirl Give Me Game Gambo Cn, Pedigree: Windwhirl Give Me Game Gambo

!important có thể thuận lợi áp dụng không đúng giả dụ đọc nhầm. Nó là giải pháp xuất sắc để giữ mang lại code của người sử dụng không bẩn hơn, trong các ví dụ mà lại bạn biết những elements với những class selector rõ ràng nên thực hiện style đồng nhất bất kỳ nó là gì. trái lại, không nên thực hiện trick để ghi đè lên style của một element nào kia cố kỉnh vị tìm thấy bí quyết CSS được viết và hoạt đông theo tác giả thuở đầu.

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

last margin-right: 0 !important;Tôi thường sử dụng nó trong các tình huống có tương đối nhiều khối nối, đến khối sau cùng bên buộc phải vào một row. Điều đó đảm bảo chắc chắn kăn năn sau cùng không tồn tại bất kì right margin như thế nào vấn đề này để giúp đỡ nó nằm giáp nài phải đối với phụ huynh nó. Mỗi kân hận có thể bao gồm những Css selector ví dụ nhằm thêm right margin cho cái đó, tuy vậy !important sẽ phá tan vỡ điều này với làm cho class quan sát đơn giản với clear hơn.

Tính quý giá sệt hiệu CSS

Tại sao nỗ lực thứ nhất của chúng ta nhằm thay đổi color với font-weight thất bại? Như bọn họ sẽ học tập, đó là bởi vì họ dễ dàng và đơn giản chỉ dụng class name có giá trị đặc hiệu rẻ rộng selector không giống. Css vận dụng những trọng số đặc hiệu khác mang lại idclass. Trong thực tiễn một Id có giá trị cao hơn nữa nhiều! Vì vậy cấp thiết một class có thể thừa qua được id.

Chúng ta hãy coi phương pháp các số lượng đích thực được tính toán:

*
Nói giải pháp khác:

Nếu thành phần gồm inline styling, auto đó sẽ win (1,0,0,0 điểm)Mỗi ID áp dụng (0,1,0,0 điểm)Mỗi class (hoặc pseudo-class hoặc attribute selector) áp dụng (0,0,1,0 điểm)Với từng tmê man chiếu trực tiếp element tất cả (0,0,0,1 điểm)

Nói bình thường, chúng ta cũng có thể đọc quý giá nlỗi những con số, như 1,0,0,0 là "1000", Vì nuốm nó cụ thể đang thắng độ quánh hiệu 0,1,0,0 hoặc "100". Dấu phẩy tại đây thực thụ để nhắc nhở họ rằng nó chưa phải thực thụ là "base 10". Về mặt kĩ thuật chúng ta gồm cố có mức giá trị nhỏng 0,1,13,4 cùng "13" ko tràn ra như "base 10".

Xem thêm: Alien Shooter 2 Reloaded (Pc) Cheats For Pc, Official Site Of Sigma Team Company

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

*
*
*

Update: :not() sort-of-pseudo-class ko thêm quý hiếm đặc hiệu vào chủ yếu nó. Chỉ hồ hết gì phía bên trong parent là được thêm quý hiếm quánh hiệu.

*
*

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

css-tricks


Chuyên mục: Công Nghệ