Nội dung
- Tổng quan về Bộ chọn CSS - Bộ chọn CSS và “Trọng lượng” của chúng - Vấn đề với các bộ chọn cạnh tranh - Tương tự công ty cho tính đặc hiệu của CSS - ! quan trọng là CEO - Bộ chọn đa năng và bộ kết hợp - Liên kết hữu ích

Thứ ba, 03/09/2019 | 00:00 GMT+7

Hiểu tính cụ thể trong CSS

Tính cụ thể trong CSS đề cập đến cách trình duyệt xác định tầm quan trọng, mức độ liên quan và “thâm niên” của các kiểu CSS. Ở đây, ta sẽ xem xét tất cả các kiểu tạo kiểu CSS và sử dụng phép tương tự của công ty để hiểu cách giải quyết các kiểu cạnh tranh.

Tổng quan về Bộ chọn CSS

Có nhiều cách để chọn các phần tử bạn đang cố gắng tạo kiểu trong CSS. Hãy bắt đầu bằng cách xem xét tất cả các tùy chọn.

Loại Bộ chọn : Chọn phần tử bạn muốn bằng cách sử dụng loại phần tử của nó. Ví dụ: để chọn tất cả các <p> bạn, hãy sử dụng p trong biểu định kiểu CSS của bạn.
Pseudo-Elements : Như tên cho thấy, bản thân các phần tử giả không phải là các phần tử nhưng cho phép bạn chọn một phần HTML của bạn so với một bộ chọn khác. Ví dụ: chọn chữ cái đầu tiên của mỗi đoạn với p::first-letter .
Bộ chọn lớp : Các phần tử có thể có nhiều lớp được đặt trên chúng để được chọn trong biểu định kiểu CSS của bạn. Ví dụ: <h1 class='header'> có thể được chọn với .header . Nhiều phần tử có thể có cùng một lớp được áp dụng cho chúng.
Bộ chọn thuộc tính : Chọn các phần tử có một loại thuộc tính cụ thể được áp dụng cho chúng. Ví dụ: chọn đầu vào chỉ chấp nhận số với input[type='number'] .
Pseudo-Classes : Chọn các phần tử dựa trên trạng thái CSS mà chúng đang ở. Ví dụ: tạo kiểu cho trạng thái button:hover của một nút bằng button:hover . Hãy xem các hướng dẫn trước đây về : target ,: hover và: các lớp giả hoạt động để tìm hiểu thêm.
Bộ chọn ID : Chọn một phần tử cụ thể với ID duy nhất của nó. Chỉ có thể có một phần tử với mỗi ID, trong khi các lớp có thể được áp dụng cho nhiều phần tử. Ví dụ: chọn <h1 id='mainHeader'> với #mainHeader .
Kiểu nội tuyến : Kiểu nội tuyến được áp dụng trực tiếp cho các phần tử có thuộc tính style nên bạn không thực sự sử dụng bất kỳ bộ chọn CSS nào. Ví dụ: bạn có thể đặt màu phông chữ tiêu đề của bạn thành màu xanh lam trực tiếp với <h1 style='color: blue;'>

Bộ chọn CSS và “Trọng lượng” của chúng

Mỗi loại bộ chọn được liệt kê ở trên có một trọng số. Tất cả những điều này có thể được chia thành bốn group chính:

trọng lượng thấp nhất : bộ chọn loại và phần tử giả
trọng số thấp : bộ chọn lớp, thuộc tính và lớp giả
trọng lượng trung bình : Bộ chọn ID
trọng lượng cao : tạo kiểu nội tuyến

Nếu các kiểu có trọng lượng khác nhau được áp dụng cho cùng một phần tử, thì kiểu có trọng lượng cao hơn sẽ được áp dụng. Nếu các kiểu có trọng số chẵn được áp dụng, các kiểu đứng sau cùng (gần nhất với phần cuối của bảng kiểu của bạn) sẽ được áp dụng. Điều này là do hiệu ứng "xếp tầng" của CSS (Cascading Style Sheets).

Đối với bất kỳ phần tử nào đang được tạo kiểu, khối tạo kiểu áp dụng cuối cùng có trọng số cao nhất sẽ được áp dụng cho phần tử của bạn. Tuy nhiên, kiểu nội tuyến sẽ vượt trội hơn kiểu của bộ chọn CSS. 💅

Khi hai bộ chọn có cùng trọng lượng được áp dụng cho một phần tử, nó được tính là gấp đôi trọng lượng. Vì vậy, ví dụ: một phần tử được chọn với hai lớp sẽ có trọng số cao hơn chỉ một trong CSS của bạn.

.gator.cayman { // two classes
  color: purple;
}

.gator { // one class
  color: purple;
}

Vấn đề chính mà hầu hết các nhà phát triển web ta sẽ phải đối mặt vào một thời điểm nào đó là có nhiều phong cách ảnh hưởng lẫn nhau. Nếu bạn sử dụng khung CSS, chẳng hạn như Material UI , bạn có thể đang cố overrides một số kiểu mặc định. Ngoài ra, bạn có thể có một file styles.css cũ (và vô tổ chức 🙈) nơi bạn tiếp tục phải tăng tính cụ thể vì không rõ tại sao các kiểu của bạn không được áp dụng như mong đợi.

Giống như bất cứ điều gì trong phát triển web, hiểu rõ các công cụ của bạn sẽ dẫn đến việc chúng được sử dụng chính xác hơn. Hãy cùng xem các cách kết hợp khác nhau của các bộ chọn ảnh hưởng đến tính cụ thể và một số thủ thuật để áp dụng các kiểu của bạn như dự định. 🤓

Vấn đề với các bộ chọn cạnh tranh

Hiểu rằng các bộ chọn khác nhau có trọng số khác nhau là rất quan trọng để tổ chức CSS của bạn. Nhưng nếu không rõ thứ gì có trọng lượng cao hơn?

Giả sử ta có một đoạn văn có hai khối CSS hoàn chỉnh: một khối có ba lớp đối sánh và khối khác có thuộc tính kiểu và hai lớp đối sánh.

Ví dụ, hãy lấy đầu vào này với ba lớp và một thuộc tính kiểu number được áp dụng cho nó.

<input type='number' class='gator cayman reptile'>

Nếu ta áp dụng các bộ chọn cạnh tranh này (ba lớp phù hợp so với hai lớp phù hợp và một thuộc tính), cái nào sẽ được áp dụng?

.gator.cayman.reptile {
  color: purple;
}

[type='number'].gator.cayman {
  color: green;
}

Trong trường hợp này, "trọng lượng" của cả hai khối là hoàn toàn bằng nhau. Bộ chọn thuộc tính và bộ chọn lớp có cùng trọng số và mỗi khối có tổng cộng ba trong số chúng. Vì chúng đồng đều nên ta dựa vào hiệu ứng xếp tầng của CSS. Cái cuối cùng được áp dụng và màu phông chữ đầu vào sẽ là màu xanh lục.🐊

Tuy nhiên, điều này sẽ phức tạp hơn một chút khi bạn có các bộ chọn có trọng lượng khác nhau bị trộn lẫn.

Hãy cập nhật thông tin đầu vào của ta để có một ID, ID này có trọng số cao hơn các lớp và thuộc tính.

<input
  type='number'
  id='gatorInput'
  class='gator cayman reptile'>

Nếu ta có các kiểu cạnh tranh và sử dụng ID cho một và các lớp / thuộc tính cho khác, thì cái nào sẽ được áp dụng?

#gatorInput {
  color: purple;
}

[type='number'].gator.cayman.reptile {
  color: green;
}

Trong khối đầu tiên, chỉ một ID đang được sử dụng để áp dụng kiểu. Trong khối thứ hai có ba lớp và một bộ chọn thuộc tính, và nó đứng sau cùng. Mặc dù có nhiều bộ chọn hơn trong khối thứ hai, bộ chọn ID có trọng số cao hơn và văn bản sẽ có màu tím! 💥

Bộ chọn có trọng lượng cao hơn sẽ luôn vượt trội so với bộ chọn có trọng lượng nhỏ hơn, ngay cả khi có nhiều bộ chọn có trọng lượng thấp hơn. 🏋

Thủ thuật trọng lượng bộ chọn

Một mẹo (được thôi, hack 💩) trong CSS khi bạn chỉ cần thêm một chút trọng lượng là lặp lại một lớp trong cùng một khối CSS.

input.gator.gator {
  color: purple;
}

input.gator {
  color: green;
}

Có thể bạn sẽ ngạc nhiên khi biết rằng khối đầu tiên có trọng lượng là hai lớp và khối thứ hai có trọng lượng là một lớp, mặc dù khối đầu tiên chỉ lặp lại lớp .gator . Bởi vì hai lớp có trọng số lớn hơn một, văn bản đầu vào sẽ có màu tím! 🚀

Bạn không bao giờ cần phải sử dụng thủ thuật này trong mã cấp production bởi vì nó là một chỉ báo cho thấy bạn có các kiểu trọng lượng rất giống nhau đang cạnh tranh. Tốt nhất, bạn nên giải quyết các phong cách đó để được xác định rõ ràng hơn. Tuy nhiên, đây là một công cụ tuyệt vời trong hộp công cụ CSS của bạn khi bạn đang ở chế độ “chỉ làm cho nó hoạt động”. ✨

Tương tự công ty cho tính đặc hiệu của CSS

Tính cụ thể đôi khi có thể phản trực giác, đặc biệt nếu bạn đang mắc kẹt trong vòng xoáy đi xuống của việc thêm ngày càng nhiều bộ chọn vào CSS của bạn . Một cách tôi thấy hữu ích khi nghĩ về tính cụ thể là nghĩ về một công ty có mức thâm niên rõ ràng.

Dưới đây là các role của công ty ta theo thứ tự thâm niên (thấp đến cao):

nhân viên
những người quản lý
đạo diễn
VPs
một giám đốc điều hành ( ta sẽ quay lại với giám đốc điều hành sau một chút)

Bây giờ, hãy ánh xạ các role này cho các bộ chọn của ta :

nhân viên : bộ chọn loại và phần tử giả
quản lý : bộ chọn lớp, thuộc tính và lớp giả
giám đốc : bộ chọn ID
VP : kiểu nội tuyến

Hãy xem một ví dụ mới. Trong trường hợp này, ta có một đoạn văn với hai lớp và một ID.

<p id='gatorParagraph' class='gator reptile'>
  blah blah blah
</p>

#gatorParagraph {
  color: purple;
}

p.gator.reptile {
  color: green;
}

Ta có một khối chỉ sử dụng ID và một khối khác sử dụng loại phần tử ( <p> ) và hai lớp. Thoạt nhìn, khó có thể biết cái nào sẽ được áp dụng.

Nếu ta sử dụng phép loại suy về công ty của bạn , ta có một giám đốc nói rằng hãy làm cho văn bản có màu tím. Mặt khác, ta có một nhân viên và hai quản lý nói rằng hãy làm cho nó xanh. Bởi vì giám đốc có thâm niên cao nhất, cô ấy có thể lấn át ý kiến của nhân viên và người quản lý. Vì vậy, văn bản phải có màu tím!

(Không có comment nào về việc liệu đây có phải là cách các quyết định nên được đưa ra tại công ty hay không 😉).

Hãy xem mỗi mức tạ là một cách để đưa ra quyết định áp dụng kiểu nào. Nếu nó không thể được quyết định bởi những người chọn cùng cấp, thì việc leo thang sẽ đưa ra quyết định cho người chọn có thâm niên cao hơn.

Theo nguyên tắc chung, tốt nhất bạn nên viết CSS đủ cụ thể để bạn không phải tìm cách tiếp tục leo thang. Hãy lưu ý khi bạn giới thiệu một cấp độ thâm niên mới, chẳng hạn như ID, bạn cũng có thể vô tình overrides các kiểu khác.

! quan trọng là CEO

Lúc này, ta vẫn chưa thảo luận về việc Giám đốc điều hành của công ty ta là ai trong trường hợp tương tự về tính đặc thù của CSS. Điều gì cao hơn so với kiểu nội tuyến? Luật !important !

Sử dụng ví dụ tương tự như trước đây, hãy thêm !important vào khối mà trước đó có trọng số / thâm niên thấp hơn.

#gatorParagraph {
  color: purple;
}

p.gator.reptile {
  color: green !important;
}

Thêm !important sẽ luôn nâng cao thâm niên lên mức cao nhất có thể. Tương tự như công ty của ta , ta hiện có một giám đốc so với một nhân viên, hai người quản lý và giám đốc điều hành. Ngay sau khi CEO được giới thiệu, cô ấy có thể vượt qua bất cứ điều gì khác được đề xuất. 💣

Vui lòng không sử dụng! Quan trọng

Luật !important Important là một độ dốc trơn và việc nhìn thấy nó trong các kiểu CSS của bạn nói chung là một dấu hiệu đỏ cho thấy tính cụ thể cần được tổ chức lại. Rất hiếm khi có một phần tử chỉ có thể được tạo kiểu bằng cách tạo điểm số cho phần còn lại của các luật CSS của bạn mà nếu không sẽ được áp dụng.

Khi bạn giới thiệu !important , nó thường dẫn đến việc bị lạm dụng như trong ví dụ dưới đây. Các !important s triệt tiêu lẫn nhau và bạn quay lại việc phải hiểu trọng lượng và hiệu ứng xếp tầng của mỗi khối.

#gatorParagraph {
  color: purple !important;
}

p.gator.reptile {
  color: green !important;
}

Thay vì sử dụng luật !important Important, hãy thử mở các công cụ dành cho nhà phát triển của bạn trong trình duyệt để hiểu rõ hơn về những phong cách nào đang can thiệp vào những phong cách mới của bạn.

Khi bạn biết kiểu nào đang gây rắc rối cho bạn, bạn có thể thêm các bộ chọn bổ sung có cùng mức trọng lượng hoặc cập nhật đánh dấu của bạn để sử dụng các bộ chọn khác nhau. 🌈

Việc sử dụng! Important thường chắc chắn sẽ dẫn đến việc có các kiểu CSS cạnh tranh mà cả hai đều sử dụng! Important. 🙈

Bộ chọn đa năng và bộ kết hợp

Bộ chọn đa năng ( * ) và bộ tổ hợp không ảnh hưởng đến trọng lượng của bộ chọn của bạn. Bộ kết hợp bao gồm bộ chọn con ( > ), bộ chọn anh chị em chung ( ~ ) và bộ chọn anh chị em kế cận ( + ).

Ví dụ: nếu ta có một đoạn văn có hai nhịp, việc sử dụng một tổ hợp con sẽ không làm tăng tính cụ thể so với việc không sử dụng nó:

<p id='gatorParagraph'>
  <span class='reptile'>eggs</span>
  <span class='reptile'>nest</span>
</p>

#gatorParagraph > .reptile {
  color: purple;
}

#gatorParagraph .reptile{
  color: green;
}

Các khối CSS này có cùng tính đặc hiệu - bộ tổ hợp con không tạo ra sự khác biệt - vì vậy văn bản sẽ có màu xanh lục.

Liên kết hữu ích

Một trong những hình ảnh tốt nhất để hiểu tính cụ thể của CSS được gọi là specifishity , bởi Estelle Weyl . Kiểm tra nó ra! 🤓

Ngoài ra, nếu bạn không quan tâm đến việc tự cộng các trọng số độ cụ thể, có một máy tính độ cụ thể sẽ làm phép toán cho bạn. 🥳

Tags:

Các tin liên quan

CSS sẽ thay đổi Thuộc tính: Khi nào và Không sử dụng Nó
2019-08-26
Trình xử lý nhấp chuột chỉ dành cho CSS sử dụng: target Pseudo-Class (Không có JavaScript)
2019-08-22
Giới thiệu về Tailwind CSS
2019-08-13
Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21