Hướng dẫn css stop inheritance from parent - css ngừng kế thừa từ cha mẹ

Thừa kế xảy ra trong cuộc sống thực. Trẻ em thừa hưởng các đặc điểm của cha mẹ: cha mẹ cao có khả năng có con cao và ngược lại. Trẻ em cũng thừa hưởng sự giàu có và tài sản của cha mẹ.

Kế thừa trong phát triển phần mềm hoạt động theo cùng một cách. Trong các ngôn ngữ OOP, các lớp kế thừa các thuộc tính và phương thức của lớp cha. Điều này được thực hiện để ngăn chặn mã lặp lại.

Còn trong CSS, ngôn ngữ thiết kế của web thì sao? Thừa kế cũng xảy ra ở đó. Nếu bạn đặt một thuộc tính trong phần tử cha, con cái theo mặc định kế thừa các thuộc tính và giá trị của chúng mà không xác định rõ ràng thuộc tính. Một tài sản như

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Trong hướng dẫn này, chúng tôi sẽ tập trung vào kế thừa trong CSS. Chúng tôi sẽ chứng minh cách thức kế thừa hoạt động trong CSS và xem xét một số thuộc tính CSS bạn có thể sử dụng để chuyển các thuộc tính di truyền cho các yếu tố trẻ em.

Ở đây, những gì chúng tôi bao gồm:

• Kế thừa CSS là gì?
• Những thuộc tính CSS nào được kế thừa?
• CSS

  form div {font-size: 12px; font-weight: bold;}
  div.content
  {
   /* Can anything go here? */
  }
  

  5 là gì?

• form div {font-size: 12px; font-weight: bold;}
  div.content
  {
   /* Can anything go here? */
  }
  

  6

• form div {font-size: 12px; font-weight: bold;}
  div.content
  {
   /* Can anything go here? */
  }
  

  7

• form div {font-size: 12px; font-weight: bold;}
  div.content
  {
   /* Can anything go here? */
  }
  

  8

Kế thừa CSS là gì?

Những thuộc tính CSS nào được kế thừa?

CSS

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

CSS Quy tắc xếp tầng xuống phân cấp CSS từ người chọn phụ huynh đến người chọn con cái của họ. Các quy tắc CSS này được kế thừa từ các bộ chọn cha mẹ của họ.

Phần tử con sẽ tự nhiên kế thừa thuộc tính CSS với giá trị của nó từ phần tử cha nếu thuộc tính CSS không được chỉ định.

Đầu ra trông như thế này:

Chúng tôi chỉ đặt

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

  Parent Div
  
Child Div 1
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

Chuyện gì đã xảy ra thế? Đứa trẻ

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Những thuộc tính CSS nào được kế thừa?

CSS

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

• 
  
  
    Parent Div
    
  Child Div 1
    
  Child Div 2
  
  

  2

• 
  
  
    Parent Div
    
  Child Div 1
    
  Child Div 2
  
  

  3

• 
  
  
    Parent Div
    
  Child Div 1
    
  Child Div 2
  
  

  4

CSS Quy tắc xếp tầng xuống phân cấp CSS từ người chọn phụ huynh đến người chọn con cái của họ. Các quy tắc CSS này được kế thừa từ các bộ chọn cha mẹ của họ.

Phần tử con sẽ tự nhiên kế thừa thuộc tính CSS với giá trị của nó từ phần tử cha nếu thuộc tính CSS không được chỉ định.

Đầu ra trông như thế này:We can enable inheritance on noninheritable CSS properties by using the

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

CSS form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ } 5 là gì?

CSS Quy tắc xếp tầng xuống phân cấp CSS từ người chọn phụ huynh đến người chọn con cái của họ. Các quy tắc CSS này được kế thừa từ các bộ chọn cha mẹ của họ.

Phần tử con sẽ tự nhiên kế thừa thuộc tính CSS với giá trị của nó từ phần tử cha nếu thuộc tính CSS không được chỉ định.

Đầu ra trông như thế này:

  Parent Div
  
Child Div 1
  
Child Div 2

Chúng tôi chỉ đặt

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

  Parent Div
  
Child Div 1
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

Giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Chỉ các phần tử con trực tiếp mới có thể kế thừa thuộc tính CSS từ phần tử cha của nó bằng cách sử dụng giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Đây là một ví dụ:

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  
  
    
Hello
  

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  Parent Div
  
Child Div 1
  
Child Div 2

CSS đã giành được du lịch lên

  
  
    
Hello
  

  Parent Div
  
Child Div 1
  
Child Div 2

  
  
    
Hello
  

  
  
    
Hello
  

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

  
  
    
Hello
  

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ } 6

Theo MDN:

Ban đầu đặt giá trị thuộc tính được áp dụng cho một phần tử đã chọn giống như giá trị được đặt cho thuộc tính đó trên phần tử đó trong bảng kiểu mặc định của trình duyệt. Nếu không có giá trị nào được đặt bởi bảng kiểu mặc định của trình duyệt và thuộc tính được kế thừa một cách tự nhiên, thì giá trị thuộc tính được đặt thành kế thừa thay thế. Sets the property value applied to a selected element to be the same as the value set for that property on that element in the browser’s default style sheet. If no value is set by the browser’s default style sheet and the property is naturally inherited, then the property value is set to inherit instead.

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Ví dụ: giá trị ban đầu của thuộc tính

  
  
    
Hello
  

  
  
    
Hello
  

A

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

Ở đây, một ví dụ mà không có

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

Phần tử

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Nhiều bài viết tuyệt vời hơn từ Logrocket:

• Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
• Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của nút
• Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
• Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
• So sánh NestJS so với Express.js

Dưới đây là một ví dụ với

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

CSS

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

Giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Dưới đây là một ví dụ với giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

Giá trị thuộc tính

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Ở đây, một ví dụ với

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

Thuộc tính

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ } 7

Tài sản

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Tài sản kế thừa

Đây là các thuộc tính được tính toán từ phần tử cha theo mặc định. Các thuộc tính thừa kế ảnh hưởng đến trẻ em của yếu tố. Hầu hết các thuộc tính CSS ảnh hưởng đến nút văn bản là các thuộc tính được kế thừa, chẳng hạn như

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  
Child Div 1
  
Child Div 2

  Parent Div
  
Child Div 1
  
Child Div 2

Nếu chúng ta đặt màu trên phần tử

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Các thuộc tính không có tính năng

Đây là những thuộc tính không được kế thừa hoặc tính toán từ phần tử cha mẹ. Giá trị của nó được thiết lập rõ ràng hoặc theo giá trị ban đầu của nó. Hầu hết các thuộc tính CSS ảnh hưởng đến nút phần tử là các thuộc tính không được tính năng

Giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Dưới đây là một ví dụ về

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Phần tử

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  Parent Div
  

    Child Div 1
    
Child Child Div 1
  
  
Child Div 2

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Phần tử

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Chúng tôi thấy rằng

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Dưới đây, một ví dụ về

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Thông thường, trình duyệt tải các trang với kiểu trang của nó. Theo mặc định, thuộc tính ____ 13 của

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

Trong mã trên,

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

Vì vậy, giá trị

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ } 8

Chúng tôi đã thảo luận về các kiểu cơ sở CSS và phong cách tác nhân người dùng trình duyệt. Kiểu cơ sở CSS là giá trị mặc định của các thuộc tính CSS. Đây là những giá trị mặc định tự nhiên đi kèm với các thuộc tính. Phong cách tác nhân người dùng trình duyệt là các giá trị được đặt bởi trình duyệt. Khi tải trang, trình duyệt có kiểu dáng cho một số thuộc tính CSS.
Browser user-agent styles are the values set by the browser. When a page loads, the browser has its styling for some CSS properties.

Ví dụ: thuộc tính

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

Kiểu trình duyệt chỉ là nó thêm các tệp

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Đây là một ví dụ:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Ở đây, các yếu tố

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

  
  
    
Hello
  

Sự kết luận

Trong hướng dẫn này, chúng tôi đã tìm hiểu tất cả về kế thừa CSS và khám phá bốn từ khóa chính trong CSS mà bạn có thể sử dụng để chuyển đổi kế thừa:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Frontend của bạn có phải là CPU của người dùng của bạn không?

Khi các mặt tiền web ngày càng phức tạp, các tính năng tài nguyên-tài nguyên đòi hỏi ngày càng nhiều từ trình duyệt. Nếu bạn quan tâm đến việc theo dõi và theo dõi việc sử dụng CPU phía máy khách, sử dụng bộ nhớ và nhiều hơn nữa cho tất cả người dùng của bạn trong sản xuất, hãy thử logrocket.https: //logrocket.com/signup/

Logrocket giống như một DVR cho các ứng dụng web và di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán tại sao các vấn đề xảy ra, bạn có thể tổng hợp và báo cáo về các số liệu hiệu suất chính, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, yêu cầu mạng nhật ký và tự động bề mặt tất cả các lỗi.

Hiện đại hóa cách bạn gỡ lỗi các ứng dụng web và di động - bắt đầu giám sát miễn phí.