Hướng dẫn css remove style from child - css xóa kiểu khỏi con

Question

Tôi đã áp dụng độ mờ bằng cách sử dụng 'RGBA' trên Div cha mẹ và tôi không muốn kế thừa hiệu ứng này đối với DIV con .. Làm thế nào tôi có thể hạn chế kiểu RGBA từ phần tử con ... Tôi đã đăng hình ảnh cũng như để được hỗ trợ tốt hơn.

Nội dung chính Show

Làm thế nào để bạn xóa một phong cách trong CSS?
Làm thế nào để bạn ghi đè một phong cách trong CSS?
Làm thế nào để bạn loại bỏ thuộc tính kế thừa trong CSS?
Hoàn nguyên trong CSS là gì?

'http://imgur.com/a/yxipo' = (hình ảnh thực tế của mã của tôi)

'http://imgur.com/a/7ltda' = (những gì tôi muốn làm bằng CSS hoặc JS)

.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}

.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}

hỏi ngày 16 tháng 2 năm 2017 lúc 12:11Feb 16, 2017 at 12:11

MoizmoizMoiz

1011 huy hiệu vàng1 huy hiệu bạc10 huy hiệu đồng1 gold badge1 silver badge10 bronze badges

2

Bạn có thể sử dụng một cái bóng hộp, như thế này

.content {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(http://lorempizza.com/500/350/);
  background-size: cover;
}
.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
  /* background: rgba(0,0,0,0.5);     uncomment if you want a semi transparent
                                      opacity inside circle
  */
}

<div class="content">
  <div class="logo-circle"></div>
</div>

Đã trả lời ngày 16 tháng 2 năm 2017 lúc 13:04Feb 16, 2017 at 13:04

AsonsasonsAsons

82.7K12 Huy hiệu vàng100 Huy hiệu bạc147 Huy hiệu đồng12 gold badges100 silver badges147 bronze badges

1

Bạn có thể xem xét cách tiếp cận ví dụ sau:

.content {
  height: 200px;
  width: 200px;
  position: relative;
}

.banner-inner {
  background-color: rgba(0, 0, 0, 0.2);
  padding: 3%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.logo-circle {
  width: 1em;
  border: 7px solid #fff;
  border-radius: 50%;
  padding: 1em;
  z-index: 2;
  height: 1em;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  left: 50%;
  margin-left: -1.5em;
}

<div class="content">
  <div class="banner-inner"></div>
  <div class="logo-circle"></div>
</div>

Đã trả lời ngày 16 tháng 2 năm 2017 lúc 12:29Feb 16, 2017 at 12:29

CEZARY TOMCZYKCEZARY TOMCZYKCezary Tomczyk

4961 Huy hiệu vàng7 Huy hiệu bạc13 Huy hiệu đồng1 gold badge7 silver badges13 bronze badges

1

Đối với nền trong vòng tròn sử dụng RGBA

.logo-circle {
  background: rgba(0, 0, 0, 0.2);
  width: 15%;
  border: 7px solid #fff;
  border-radius: 50%;
  padding: 16px;
}

Đã trả lời ngày 16 tháng 2 năm 2017 lúc 12:35Feb 16, 2017 at 12:35

Grinmaxgrinmaxgrinmax

1.8211 huy hiệu vàng9 Huy hiệu bạc13 Huy hiệu đồng1 gold badge9 silver badges13 bronze badges

Bạn có thể sử dụng cùng một hình ảnh (như được thấy trong nền) làm nền trong .logo-circle. Và đặt vị trí của hình ảnh như thế này: background-position: center;

or:

Sử dụng một trình bao bọc div cho .logo-circle với cùng kích thước của hình ảnh và đặt

.content {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(http://lorempizza.com/500/350/);
  background-size: cover;
}
.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
  /* background: rgba(0,0,0,0.5);     uncomment if you want a semi transparent
                                      opacity inside circle
  */
}

1. Đối với .logo-circle đặt một cái bóng rất lớn, như

.content {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(http://lorempizza.com/500/350/);
  background-size: cover;
}
.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
  /* background: rgba(0,0,0,0.5);     uncomment if you want a semi transparent
                                      opacity inside circle
  */
}

3

Đã trả lời ngày 16 tháng 2 năm 2017 lúc 12:30Feb 16, 2017 at 12:30

2

Có một số kiểu trong chủ đề cha mẹ của tôi rằng tôi chỉ cần loại bỏ khỏi bảng kiểu nếu tôi không sử dụng chủ đề con. Rõ ràng, tôi không muốn loại bỏ chúng khỏi CSS cha mẹ, nhưng có cách nào để "loại bỏ" các kiểu sử dụng chủ đề con tôi không?

Đã hỏi ngày 20 tháng 5 năm 2014 lúc 22:01May 20, 2014 at 22:01

1

Cách duy nhất để "loại bỏ" các kiểu khỏi chủ đề cha mẹ là ghi đè chúng trong CSS của chủ đề con bạn.

Ví dụ: nếu bạn có tuyên bố sau trong chủ đề cha mẹ của bạn:

.someclass{
    width: 200px;
    float: left;
 }

Bạn có thể ghi đè chiều rộng và phao nổi bằng cách khai báo những điều sau trong chủ đề con của bạn:

.someclass{
    width: auto;
    float: none;
}

Đã trả lời ngày 21 tháng 5 năm 2014 lúc 2:17May 21, 2014 at 2:17

Rennyrennyrenny

Huy hiệu đồng 3211 Bạc4 Huy hiệu Đồng1 silver badge4 bronze badges

Tôi biết điều này là cũ nhưng tôi đã nghĩ về nó gần đây. Tôi có cùng một vấn đề, nếu tôi thấy mình rất sửa đổi bảng kiểu cha mẹ, nó có thể đến điểm mà tôi đang tải một số lượng lớn các kiểu, chỉ đơn giản là để ghi đè chúng trong chủ đề con.

Khi tôi xử lý loại dự án này, thường là trường hợp tôi đang sửa đổi nhiều hơn so với CSS so với PHP. Tôi muốn sử dụng một chủ đề trẻ em cho cấu trúc PHP và HTML nhưng CSS thực sự là của riêng tôi. Đối với loại dự án đó, thay vì giới thiệu các CSS cha mẹ, tôi sao chép nó vào bảng kiểu chủ đề con và sau đó sửa đổi nó, để các phần duy nhất của CSS cha mẹ mà tôi giữ lại là những phần mà tôi đã chọn cụ thể để sử dụng lại.

Bạn không phải sử dụng CSS của chủ đề cha mẹ. Bạn có thể tùy chỉnh viết tất cả các CSS, nếu bạn muốn và chỉ sử dụng các mẫu PHP từ cha mẹ của bạn.

PHP có nhiều khả năng có vấn đề bảo mật hơn CSS, đây chỉ là một hệ thống định dạng, vì vậy bạn có thể dựa vào một bộ PHP /HTML được thử nghiệm và cập nhật và chỉ tự định dạng.

Đã trả lời ngày 19 tháng 1 năm 2016 lúc 14:06Jan 19, 2016 at 14:06

VictoriavictoriaVictoria

2201 Huy hiệu vàng3 Huy hiệu bạc13 Huy hiệu đồng1 gold badge3 silver badges13 bronze badges

1

Hiệu quả, có. Trừ khi tôi hiểu sai câu hỏi của bạn, đây chỉ là tính đặc hiệu của CSS cơ bản. Tôi cho rằng bạn đang muốn sử dụng hầu hết các CSS từ chủ đề cha, nhưng chỉ một số trong số đó không muốn, vì CSS không, theo mặc định, được tải từ chủ đề cha.

Tất cả các quy tắc bình thường của việc ghi đè hoặc tăng tính cụ thể áp dụng. Phương pháp đơn giản nhất (nhưng hầu hết các vũ lực) là chỉ tạo các quy tắc sử dụng

.content {
  height: 200px;
  width: 300px;
  position: relative;
  background: url(http://lorempizza.com/500/350/);
  background-size: cover;
}
.logo-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  border: 7px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
  /* background: rgba(0,0,0,0.5);     uncomment if you want a semi transparent
                                      opacity inside circle
  */
}

4 để ghi đè các quy tắc bạn không muốn. Nếu không, bạn chỉ nên dựa vào tầng quy tắc và tính cụ thể để nhắm mục tiêu đúng những thứ bạn muốn và đặt các kiểu bạn muốn.

Không có gì được tích hợp vào WordPress để lọc, cắt, xóa hoặc loại bỏ các bit CSS khỏi chủ đề cha mẹ, nếu đó là những gì bạn đang hỏi.

Đã trả lời ngày 20 tháng 5 năm 2014 lúc 23:01May 20, 2014 at 23:01

Totelstotelstotels

1.7319 huy hiệu bạc11 huy hiệu đồng9 silver badges11 bronze badges

Tôi không nghĩ có một cách, chỉ có cách giải quyết.

Edit:

Giải thích: Bằng cách tạo một chủ đề con, theo định nghĩa, bạn đang tải CSS của chủ đề cha. Do đó, tôi không thấy cách bạn có thể loại trừ một số phần của CSS đó. Cách hiệu quả duy nhất sẽ là ghi đè nó. Cách đơn giản nhất sẽ là sử dụng các bộ chọn và quy tắc bạn muốn ghi đè và đặt chúng thành các giá trị mới hoặc mặc định. Vì chủ đề con CSS thấp hơn trong các phong cách "Cascade" so với CSS cha mẹ, nên không cần phải có những câu lệnh "!! Quan trọng" và như vậy.

Đã trả lời ngày 20 tháng 5 năm 2014 lúc 23:13May 20, 2014 at 23:13

PimpimPim

1.1121 Huy hiệu vàng10 Huy hiệu bạc26 Huy hiệu đồng1 gold badge10 silver badges26 bronze badges

0

Làm thế nào để bạn xóa một phong cách trong CSS?

Bạn có thể xóa các thuộc tính kiểu CSS khỏi một phần tử bằng cách đặt thuộc tính thành giá trị null, ví dụ:hộp.Phong cách.rentoundColor = null;.Khi thuộc tính CSS của phần tử được đặt thành NULL, thuộc tính sẽ bị xóa khỏi phần tử.setting the property to a null value, e.g. box. style. backgroundColor = null; . When an element's CSS property is set to null , the property is removed from the element.

Làm thế nào để bạn ghi đè một phong cách trong CSS?

Để ghi đè các thuộc tính CSS của một lớp bằng cách sử dụng một lớp khác, chúng ta có thể sử dụng! Chỉ thị quan trọng.Trong CSS,!Có nghĩa là có nghĩa là điều này rất quan trọng, và cặp tài sản: giá trị có chỉ thị này luôn được áp dụng ngay cả khi phần tử khác có độ đặc hiệu cao hơn.use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

Làm thế nào để bạn loại bỏ thuộc tính kế thừa trong CSS?

Từ khóa CSS Untet đặt lại một thuộc tính về giá trị được kế thừa của nó nếu thuộc tính tự nhiên kế thừa từ cha mẹ của nó và giá trị ban đầu của nó nếu không. resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Hoàn nguyên trong CSS là gì?

Từ khóa CSS hoàn nguyên trở lại giá trị xếp tầng của thuộc tính từ giá trị hiện tại của nó thành giá trị mà tài sản sẽ có nếu không có thay đổi nào được thực hiện bởi nguồn gốc kiểu hiện tại đối với phần tử hiện tại.reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

programming css Not style CSS CSS disable style Clear inherited css