Hướng dẫn how do you overwrite background color in css? - làm thế nào để bạn ghi đè màu nền trong css?

Giả sử cơ thể của tôi là đây trong tệp HTML của tôi:

  

    
Hello!
  
  

  
  

Và đây là tệp CSS của tôi:

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

Tại sao màu nền trong quy tắc * ghi đè lên màu nền trong quy tắc div? Không phải quy tắc div cụ thể hơn? Nếu tôi đặt màu nền từ quy tắc * vào quy tắc

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

0, nó hoạt động như tôi mong đợi.

Paul Roub

36.1k27 Huy hiệu vàng81 Huy hiệu bạc88 Huy hiệu đồng27 gold badges81 silver badges88 bronze badges

Đã hỏi ngày 25 tháng 11 năm 2014 lúc 21:23Nov 25, 2014 at 21:23

4

Div hàng đầu được điền hoàn toàn bởi

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

1, có nền * được áp dụng. Div thấp hơn trống rỗng, vì vậy không có nền tảng để lấp đầy.

Thêm nội dung vào Div thấp hơn để xem nền của nó:

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

    
Hello!

foo

Đã trả lời ngày 25 tháng 11 năm 2014 lúc 21:28Nov 25, 2014 at 21:28

Paul Roubpaul RoubPaul Roub

36.1k27 Huy hiệu vàng81 Huy hiệu bạc88 Huy hiệu đồng27 gold badges81 silver badges88 bronze badges

Đã hỏi ngày 25 tháng 11 năm 2014 lúc 21:23

Div hàng đầu được điền hoàn toàn bởi

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

1, có nền * được áp dụng. Div thấp hơn trống rỗng, vì vậy không có nền tảng để lấp đầy.

Thêm nội dung vào Div thấp hơn để xem nền của nó:

Đã trả lời ngày 25 tháng 11 năm 2014 lúc 21:28

Paul Roubpaul Roub

Màu nền không được ghi đè.Nov 25, 2014 at 21:29

Bạn có 2 vấn đề ở đây:Fabian S.

1) Các div trống mà không có chiều cao và chiều rộng được cho là sụp đổ và do đó không được hiển thị.2 gold badges25 silver badges33 bronze badges

2) H2 của bạn có

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

3 và do đó chồng chéo nền tảng của div.

Xem Fiddle này (nền trong suốt trên H2, nền đỏ trên Div's): http://jsfiddle.net/ammxmckz/

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

h2 {
    margin-left:100px;
}

     
Hello!

Đã trả lời ngày 25 tháng 11 năm 2014 lúc 21:28Nov 25, 2014 at 21:28

j08691j08691j08691

Paul Roubpaul Roub31 gold badges254 silver badges268 bronze badges

Màu nền không được ghi đè.

• Bạn có 2 vấn đề ở đây:
• 1) Các div trống mà không có chiều cao và chiều rộng được cho là sụp đổ và do đó không được hiển thị.

2) H2 của bạn có

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

3 và do đó chồng chéo nền tảng của div.Nov 25, 2014 at 21:30

Xem Fiddle này (nền trong suốt trên H2, nền đỏ trên Div's): http://jsfiddle.net/ammxmckz/Oriol

Đã trả lời ngày 25 tháng 11 năm 2014 lúc 21:2957 gold badges412 silver badges494 bronze badges

Fabian S.Fabian S.any CSS declarations that directly involve styling, ala

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

3. The only use-case of today that's progressively using the universal selector is for declarations such as

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

4.

2.4032 huy hiệu vàng25 Huy hiệu bạc33 Huy hiệu đồng

Màu nền của bộ chọn phổ quát đang được áp dụng cho tất cả các yếu tố, bao gồm cả phần tử

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

4 tiêu đề. Vì vậy, trong khi Div tiêu đề có một nền khác, tiêu đề

* {
    margin:0px;
    padding:0px;
    background-color:#F6F6F1;
}

body {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}

div {
    background-color:#F00;
}

4 đang che đậy nó.any UI styling. It's dangerous, dirty, muddy and worst of all, scary. Think of it as Freddie Krueger. Stay away from it. ;)

Ví dụ: ném một số lề vào tiêu đề và bạn sẽ thấy nền của Div nhìn ra từ phía sau nó:Nov 25, 2014 at 21:34

Làm thế nào để bạn ghi đè màu nền trong CSS?