如何更改主体颜色但不影响div？

问题描述 投票：0回答：2

最近撞墙。尝试过body：not（.wrapper .group）选择器，但它不会更改外部div颜色。

我找不到另一种不弄乱车身颜色的方法

这是我到目前为止的内容：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #8e44ad;
  color: white;
}

/*body:not(.wrapper .group) {
  background: white;
}*/

.wrapper {
  margin: 50px 20px 50px 20px;
  /* background-color: chartreuse; */
  border: 2px solid #fff;
  border-radius: 5px;
    /* background: #8e44ad;
    color: white; */
}

h1 {
  margin: 0 0 1em;
}

.group {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.newdiv {
  margin-top: 200px;
  display: flex;
  flex-direction: row;
}

.group1 {
  display: flex;
  flex-direction: column;
}

.group3 {
  display: flex;
  flex-direction: column;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  margin-right: 1em;
  padding-left: 2em;
  padding-right: 1em;
  line-height: 2;
  cursor: pointer;
}
label:before {
  box-sizing: border-box;
  content: " ";
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1.4em;
  height: 1.4em;
  border: 2px solid white;
  border-radius: 0.25em;
  z-index: -1;
}

input[type="radio"] + label::before {
  border-radius: 1em;
}

/* Checked */
input[type="checkbox"]:checked + label,
input[type="radio"]:checked + label {
  padding-left: 1em;
  color: #8e44ad;
}
input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
  top: 0;
  width: 100%;
  height: 2em;
  background: white;
}

/* Transition */
label,
label::before {
  -webkit-transition: 0.25s all ease;
  -o-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <h1>Pure CSS Fancy Checkbox/Radio</h1>

      <h2>Radio Buttons</h2>
      <div class="group">
        <input type="radio" name="rb" id="rb1" />
        <label for="rb1">Check this</label>
        <input type="radio" name="rb" id="rb2" />
        <label for="rb2">... or this...</label>
        <input type="radio" name="rb" id="rb3" />
        <label for="rb3">or maybe this</label>
      </div>

      <h2>Checkbox</h2>
      <div class="group">
        <input type="checkbox" name="cb" id="cb1" />
        <label for="cb1">Heart disease </label>
        <input type="checkbox" name="cb" id="cb2" />
        <label for="cb2">Anemia or other blood disease</label>
        <input type="checkbox" name="cb" id="cb3" />
        <label for="cb3">Severe headaches</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1d" />
        <label for="q1d">Neck pain</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1e" />
        <label for="q1e">High cholesterol</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1f" />
        <label for="q1f">Stomach disease</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1g" />
        <label for="q1g">Stroke</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1h" />
        <label for="q1h">Sleep apnea</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1i" />
        <label for="q1i">Diabetes</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1j" />
        <label for="q1j">Cancer (past or present) </label><br />
        <input type="checkbox" name="q1" value="a" id="q1k" />
        <label for="q1k">Depression</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1l" />
        <label for="q1l">High blood pressure</label>
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1m" />
        <label for="q1m" class="radio-inline">Thyroid disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1n" />
        <label for="q1n">Seizures</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1o" />
        <label for="q1o">Back pain</label> <br />
      </div>
      <div class="group">
        <input type="checkbox" name="q1" value="a" id="q1p" />
        <label for="q1p">Lung disease</label> <br />
        <input type="checkbox" name="q1" value="a" id="q1q" />
        <label for="q1q">Kidney, bladder or prostate disease</label>
        <br />
        <input type="checkbox" name="q1" value="a" id="q1r" />
        <label for="q1r">Blood clots</label> <br />
      </div>
      <div class="newdiv">
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1j" />
          <label for="q1j">Cancer (past or present) </label><br />
          <input type="checkbox" name="q1" value="a" id="q1k" />
          <label for="q1k">Depression</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1l" />
          <label for="q1l">High blood pressure</label>
        </div>
        <div class="group1">
          <input type="checkbox" name="q1" value="a" id="q1m" />
          <label for="q1m" class="radio-inline">Thyroid disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1n" />
          <label for="q1n">Seizures</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1o" />
          <label for="q1o">Back pain</label> <br />
        </div>
        <div class="group3">
          <input type="checkbox" name="q1" value="a" id="q1p" />
          <label for="q1p">Lung disease</label> <br />
          <input type="checkbox" name="q1" value="a" id="q1q" />
          <label for="q1q">Kidney, bladder or prostate disease</label>
          <br />
          <input type="checkbox" name="q1" value="a" id="q1r" />
          <label for="q1r">Blood clots</label> <br />
        </div>
      </div>
    </div>
  </body>
</html>
html css css-selectors
2个回答
0
投票

.wrapper元素默认情况下具有透明背景，因此它显示为紫色。

尝试设置适合您设计的背景色。

0
投票

默认情况下，所有属于body的元素（以及大多数其他元素）都继承其background属性。就像o.v.建议的那样，更改.wrapper元素的背景即可。请参阅下面的jsFiddle。

https://jsfiddle.net/us3fct9w/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.