Bagaimanakah saya boleh menggunakan gaya hanya pada elemen induk tanpa menjejaskan gaya elemen kanak-kanak?

Question

Dalam contoh ini, saya cuba menjadikan elemen induk lebih telus tanpa mengubah kelegapan elemen anak.

<div>
<div className="larger-box">
  <div className = "smaller-box">
 </div>
</div>

Ini adalah gaya CSS semasa saya:

.larger-box{
  width: 10rem;
  height: 10rem;
  background-color: red;
}
.smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1 !important;
}

Adakah mungkin untuk mencapai kesan ini dalam CSS?

Answer 1

Anda boleh menggunakan CSSnot.

.larger-box:not(.smaller-box) {
  width: 10rem;
  height: 10rem;
  background-color: red;
}

.smaller-box {
  width: 2rem;
  height: 2rem;
  background-color: green;
}

Answer 2

Kanak-kanak akan sentiasa dipengaruhi oleh kelegapan ibu bapa mereka, jadi cara paling mudah untuk memberi mereka kelegapan berbeza ialah menjadikan mereka elemen adik-beradik dan meletakkan elemen kedua secara mutlak di atas elemen pertama, justeru Beri setiap elemen kelegapannya sendiri. Sila ambil perhatian kedudukan: relatif kepada div pembalut induk.

Di sini saya mempunyai beberapa teks yang dipaparkan di belakang div merah dengan div hijau di atasnya, seolah-olah ia elemen kanak-kanak, tetapi sebenarnya ia adalah elemen adik beradik dan oleh itu tidak dipengaruhi oleh kelegapan div merah. Jadi teks ditunjukkan melalui div merah, tetapi bukan div hijau.

.wrapper{
  width: 10rem;
 height: 10rem;
 position: relative;
}

p { padding: 8px}

 .larger-box{
   position: absolute;
  top: 0;
  left:0;
  width: 10rem;
  height: 10rem;
  background-color: red;
  opacity: 0.3
}
 .smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
   <p>Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!</p>
  <div class="larger-box"></div>
  <div class = "smaller-box"></div>
</div>