Có thể trùng lặp: Làm thế nào để tôi ngăn chặn sự kế thừa CSS?
How do I prevent CSS inheritance?
Có cách nào để khai báo thuộc tính CSS của một yếu tố sao cho nó sẽ không ảnh hưởng đến bất kỳ con nào của nó hay có cách nào để tuyên bố CSS của một yếu tố để thực hiện chỉ là kiểu được chỉ định và không kế thừa bất kỳ kiểu nào ?
Một ví dụ nhanh chóng
HTML:
Content of the paragraph
Content of the span
CSS:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
Trong các trường hợp bình thường, người ta sẽ mong đợi khối văn bản "nội dung của đoạn" và "nội dung của nhịp" sẽ là 12px và in đậm.
Có một thuộc tính nào được đưa vào CSS ở trên trong khối "div.Content" sẽ ngăn chặn nó kế thừa khai báo trong khối "#container form div" để giới hạn phong cách chỉ là "nội dung của đoạn" và dự phòng " Nội dung của khoảng thời gian "bao gồm bất kỳ đứa trẻ nào khác div?
Nếu bạn đang tự hỏi tại sao, tốt, tôi đã tạo một tệp CSS cụ thể mang lại cho tất cả các biểu mẫu trong dự án của tôi một cảm giác cụ thể và các yếu tố
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 dưới biểu mẫu tất cả đều thừa hưởng cảm giác. Không vấn đề gì. Nhưng bên trong hình thức tôi muốn sử dụng flexigrid nhưng flexigrid kế thừa phong cách và nó trông vô dụng. Nếu tôi sử dụng flexigrid bên ngoài biểu mẫu và nó sẽ không kế thừa các biểu mẫu CSS, thì nó trông rất tuyệt. Nếu không thì nó trông thật khủng khiếp. 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? */
}
4 được truyền lại cho một yếu tố trẻ em. Nếu một yếu tố là màu xanh lá cây, tất cả trẻ em của nó chuyển sang màu xanh lá cây.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
5 là gì?form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ }
6form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ }
7form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ }
8form div {font-size: 12px; font-weight: bold;} div.content { /* Can anything go here? */ }
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ì?#div1 { color: red; }Parent DivChild Div 1Child 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? */
}
9 để có màu văn bản màu đỏ, nhưng quy tắc CSS đã được áp dụng cho hai đứa con của nó form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3Elements: #div1 { color: red; }1 vàParent DivChild Div 1Child Div 2
#div1 { color: red; }2. Hai phần tửParent DivChild Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 không có quy tắc CSS của #div1 { color: red; }4 đặt trên chúng.Parent DivChild Div 1Child Div 2
#div1 { color: red; } #div1Child { color: green; }Parent DivChild Div 1Child Child Div 1Child 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? */
}
3 được thừa hưởng #div1 { color: red; }4 từ cha mẹ của chúng,Parent DivChild Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
9. #div1 { color: red; }4 không được chỉ định trên trẻParent DivChild Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 nên chúng được thừa hưởng nó từ yếu tố cha mẹ của chúng, form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
9.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ì?#div1 { height: 100px; color: red; } #div1Child { height: inherit; }
2Parent DivChild Div 1Child Div 2#div1 { height: 100px; color: red; } #div1Child { height: inherit; }
3Parent DivChild Div 1Child Div 2#div1 { height: 100px; color: red; } #div1Child { height: inherit; }
4Parent DivChild Div 1Child 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:We can enable inheritance on noninheritable CSS properties by using the
5
value.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ì?
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
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:
#div1 { height: 100px; color: red; } #div1Child { height: inherit; }Parent DivChild Div 1Child Div 2
Chúng tôi chỉ đặt
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
9 để có màu văn bản màu đỏ, nhưng quy tắc CSS đã được áp dụng cho hai đứa con của nó form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3Elements: #div1 { color: red; }1 vàParent DivChild Div 1Child Div 2
#div1 { color: red; }2. Hai phần tửParent DivChild Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 không có quy tắc CSS của #div1 { color: red; }4 đặt trên chúng.Parent DivChild Div 1Child Div 2
#div1 { color: red; } #div1Child { color: green; }4, mặt khác, có thuộc tính chiều cao được đặt thànhParent DivChild Div 1Child Child Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5. Điều này sẽ làm cho nó kế thừa giá trị của chiều cao của nó từ phần tử cha của nó, #div1 { color: red; } #div1Child { color: green; }7. Vì vậy, chiều cao củaParent DivChild Div 1Child Child Div 1Child Div 2
#div1 { color: red; } #div1Child { color: green; }4 sẽ làParent DivChild Div 1Child Child Div 1Child Div 2
#div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }5.Parent DivChild Div 1Child Child Div 1Child Div 2
Giá trị
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5 cho phép kế thừa trên tất cả các thuộc tính CSS. Với form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5, phần tử được chỉ định sẽ lấy giá trị của thuộc tính được chỉ định từ phần tử cha của nó.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? */
}
5 nếu thuộc tính CSS được đặt bởi phần tử cha mẹ của phần tử. Điều này là để đảm bảo rằng thuộc tính CSS được thừa kế là một tài sản có thể thừa kế.Đây là một ví dụ:
#div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }Parent DivChild Div 1Child Child Div 1Child Div 2
#div1 { color: red; } #div1Child { color: green; }7 có chiều cao được đặt thànhParent DivChild Div 1Child Child Div 1Child Div 2
#div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }5.Parent DivChild Div 1Child Child Div 1Child Div 2
.div { padding: 50px; background-color: orange; }9. Một đứa cháu củaHello
#div1 { color: red; } #div1Child { color: green; }7 [một yếu tố con củaParent DivChild Div 1Child Child Div 1Child Div 2
#div1 { color: red; } #div1Child { color: green; }7 nhưng không phải là một đứa trẻ trực tiếp] có thuộc tính chiều cao của nó được đặt thànhParent DivChild Div 1Child Child Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5. CSS sẽ cố gắng nhận giá trị từ cha mẹ của ____ ____ 69 [#div1 { color: red; } #div1Child { color: green; }4], nhưng nó không có thuộc tínhParent DivChild Div 1Child Child Div 1Child Div 2
#div1 { height: 100px; color: red; } #div1Child { height: inherit; }6. Vì vậy, CSS sẽ dùng đến giá trị ban đầu của nó.Parent DivChild Div 1Child Div 2
CSS đã giành được du lịch lên
.div { padding: 50px; background-color: orange; }9 Chuỗi cha mẹ [ông bà, ông cố, ông cố, v.v.] để kiểm tra xem có bất kỳ tài sản nào có tài sảnHello
#div1 { height: 100px; color: red; } #div1Child { height: inherit; }6 được đặt choParent DivChild Div 1Child Div 2
.div { padding: 50px; background-color: orange; }9 không. Vì vậy,Hello
.div { padding: 50px; background-color: orange; }9 won có chiều caoHello
#div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }5; Thay vào đó, nó sẽ dùng đến chiều cao của trình duyệt.Parent DivChild Div 1Child Child Div 1Child Div 2
So
.div { padding: 50px; background-color: orange; }9 won’t have a height ofHello
#div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }5; instead, it will resort to its browser computed height.Parent DivChild Div 1Child Child Div 1Child Div 2
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? */
}
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? */
}
6 là giá trị thuộc tính CSS được sử dụng để đặt giá trị ban đầu của thuộc tính CSS của một phần tử. Điều này trở thành giá trị mặc định của thuộc tính CSS. Mỗi thuộc tính CSS có giá trị mặc định khi không có giá trị được gán rõ ràng cho nó.Ví dụ: giá trị ban đầu của thuộc tính
.div { padding: 50px; background-color: orange; color: green; }3 CSS làHello
.div { padding: 50px; background-color: orange; color: green; }4. Có những gì được gọi là kiểu trình duyệt của người dùng, đó là kiểu dáng mà trình duyệt cung cấp cho các phần tử HTML. Chúng không liên quan gì đến các giá trị ban đầu của các thuộc tính CSS.Hello
A
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 đi kèm với một thuộc tính .div { padding: 50px; background-color: orange; color: green; }3 được đặt thànhHello
.div { padding: 50px; background-color: orange; color: green; }7. Điều này đến từ các phong cách trình duyệt. Đặt thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3 thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6 và phần tử form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 sẽ chuyển đổi thành phần tử .div { padding: 50px; background-color: orange; color: green; }4.Hello
Ở đây, một ví dụ mà không có
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6:.div { padding: 50px; background-color: orange; }Hello
Phần tử
.div { padding: 50px; background-color: orange; color: initial; }3 là một phần tử khối. Bây giờ, hãy để Lừa đặt thuộc tínhHello
.div { padding: 50px; background-color: orange; color: initial; }3 phần tử ____ ____833 thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6.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? */
}
6;.div { padding: 50px; background-color: orange; display: initial; }Hello
CSS
.div { padding: 50px; background-color: orange; color: green; }3 được đặt trên phần tửHello
.div { padding: 50px; background-color: orange; color: initial; }3 với giá trịHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6. Điều này làm cho phần tử .div { padding: 50px; background-color: orange; color: initial; }3 lấy giá trị ban đầu của thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3, đó làHello
.div { padding: 50px; background-color: orange; color: green; }4. Vì vậy,Hello
.div { padding: 50px; background-color: orange; color: initial; }3 trở thành một yếu tố nội tuyến.Hello
Giá trị
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6 của thuộc tính form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 CSS là màu đen. Nếu thuộc tính form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 không được chỉ định, màu của nút văn bản phần tử trở thành màu đen.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? */
}
4:.div { padding: 50px; background-color: orange; color: green; }Hello
Giá trị thuộc tính
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 của phần tử .div { padding: 50px; background-color: orange; color: initial; }3 được đặt thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
11, do đó màu văn bản sẽ có màu xanh lá cây.Ở đây, một ví dụ với
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
12form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6:.div { padding: 50px; background-color: orange; color: initial; }Hello
Thuộc tính
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 của phần tử .div { padding: 50px; background-color: orange; color: initial; }3 được đặt thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
6, do đó thuộc tính form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 sẽ lấy giá trị mặc định [màu đen]. Nút văn bản form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
18 trong phần tử .div { padding: 50px; background-color: orange; color: initial; }3 sẽ có màu đen.Hello
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? */
}
Tài sản
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 hoạt động trên cả bản chất di truyền và không được sử dụng của các thuộc tính CSS.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? */
}
4, #div1 { height: 100px; color: red; } #div1Child { height: inherit; }2,Parent DivChild Div 1Child Div 2
#div1 { height: 100px; color: red; } #div1Child { height: inherit; }3, v.v.Parent DivChild Div 1Child 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? */
}
25 thành màu xanh lá cây, nó sẽ xếp xuống tất cả trẻ em của yếu tố form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
25 để toàn bộ trang sẽ có màu văn bản màu xanh lá cây.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? */
}
7 hoạt động khác nhau trên các thuộc tính CSS được kế thừa và không được tính năng. Khi giá trị form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 được đặt trên một thuộc tính được kế thừa, nó đặt lại giá trị thuộc tính thành giá trị được kế thừa của nó. Giá trị form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 đặt lại một thuộc tính không được điều chỉnh theo giá trị ban đầu của nó.Dưới đây là một ví dụ về
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 trong một thuộc tính di truyền:form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
0Phần tử
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 có thuộc tính form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 được đặt thành form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
11, form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
25 có thuộc tính form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 được đặt thành #div1 { color: red; height: 100px; } #div1ChildChild { height: inherit; }6 và thuộc tính ________ 93 củaParent DivChild Div 1Child Child Div 1Child Div 2
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
4 được đặt thành form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7. Thuộc tính màu là thuộc tính CSS được kế thừa, do đó form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 sẽ đặt lại màu của ________ 93 cho màu của cha mẹ của nó [form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
25], màu đỏ.Phần tử
.div { padding: 50px; background-color: orange; color: initial; }3 nên có màu xanh lá cây nhưng vì giá trịHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7, màu sắc được lấy từ cha mẹ của nó, form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
25.Chúng tôi thấy rằng
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 hoạt động trên các thuộc tính được kế thừa giống như từ khóa form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5. Chúng tôi có thể đã đặt form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
5 thành thuộc tính màu của ________ 93 và nó sẽ hoạt động giống như sử dụng form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7.Dưới đây, một ví dụ về
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 về các thuộc tính không có mặt:form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
1Thô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
.div { padding: 50px; background-color: orange; color: green; }3 được đặt thànhHello
.div { padding: 50px; background-color: orange; color: green; }7. Đó không phải là giá trị mặc định của thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3; Giá trị mặc định của nó làHello
.div { padding: 50px; background-color: orange; color: green; }4.Hello
Trong mã trên,
.div { padding: 50px; background-color: orange; color: initial; }3 có thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3 được đặt thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7. .div { padding: 50px; background-color: orange; color: initial; }3 này đáng lẽ phải là một yếu tốHello
.div { padding: 50px; background-color: orange; color: green; }7, nhưng vì giá trịHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 trong thuộc tính .div { padding: 50px; background-color: orange; color: green; }3 của nó, nó được đặt lại thànhHello
.div { padding: 50px; background-color: orange; color: green; }4.Hello
Vì vậy, giá trị
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
7 hoạt động trên các thuộc tính không được tính năng giống như giá trị 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? */
}
8
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
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
.div { padding: 50px; background-color: orange; color: green; }3 có giá trị cơ sở CSS, đó làHello
.div { padding: 50px; background-color: orange; color: green; }4. Đây là giá trị tự nhiên của nó từ động cơ CSS. Bây giờ, trình duyệt đặt lại thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3 thànhHello
.div { padding: 50px; background-color: orange; color: green; }7.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? */
}
72 của riêng mình mang mã của nó. Từ khóa form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
8, đảo ngược các giá trị mặc định của CSS với các kiểu tác nhân người dùng trình duyệt.Đây là một ví dụ:
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
2Ở đây, các yếu tố
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
3 được đặt là form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
75. Lưu ý rằng giá trị tác nhân người dùng của trình duyệt ____ 83 là .div { padding: 50px; background-color: orange; color: green; }7. Thuộc tínhHello
.div { padding: 50px; background-color: orange; color: green; }3 của ____ 93 được đặt thànhHello
form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
8. Điều này sẽ đặt lại thuộc tính .div { padding: 50px; background-color: orange; color: green; }3 của yếu tốHello
.div { padding: 50px; background-color: orange; color: initial; }3 thànhHello
.div { padding: 50px; background-color: orange; color: green; }7.Hello
.div { padding: 50px; background-color: orange; color: initial; }3 sẽ là một yếu tốHello
.div { padding: 50px; background-color: orange; color: green; }7.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? */
}
5, 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 và form div {font-size: 12px; font-weight: bold;}
div.content
{
/* Can anything go here? */
}
8.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. //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í.