我构建了一个交互式条形图作为工作申请的一部分。他们回到我身边后得到了全面的积极反馈，并邀请他们参加最后阶段的面试。但是，我真的想尝试解决他们提交给我的反馈意见。
<body>
<div class="container">
<h1>CSS Project</h1>
<h2>Choose your level of risk</h2>
<p id="description">Read the definitions and choose the risk level that best suits you.</p>
<h3>Potential Return</h3>
<div id="graph-wrapper">
<div id="left-float">
<p>Low Risk</p>
<p>Lower potential return</p>
</div>
<div id="right-float">
<p>High Risk</p>
<p>Higher potential return</p>
</div>
<input type="checkbox" style="display: none" id="defensive-checkbox">
<label id="defensive-label" for="defensive-checkbox">Defensive</label>
<input type="checkbox" style="display: none" id="cautious-checkbox">
<label id="cautious-label" for="cautious-checkbox">Cautious</label>
<input type="checkbox" style="display: none" id="balanced-checkbox">
<label id="balanced-label" for="balanced-checkbox">Balanced</label>
<input type="checkbox" style="display: none" id="growth-checkbox">
<label id="growth-label" for="growth-checkbox">Captial Growth</label>
<input type="checkbox" style="display: none" id="aggressive-checkbox">
<label id="aggressive-label" for="aggressive-checkbox">Aggressive</label>
<div id="defensive-bar" class="bar"></div>
<div id="cautious-bar" class="bar"></div>
<div id="balanced-bar" class="bar"></div>
<div id="growth-bar" class="bar"></div>
<div id="aggressive-bar" class="bar"></div>
<div id="defensive-info" class="info">
<h4>Defensive</h4>
<p>The Defensive investor may be very sensitive to short-term losses. A Defensive investor's potential aversion to short-term losses could compel them to sell their investment and hold a zero risk investment instead if losses occur.</p>
<p>Defensive investors would possibly accept lower long-term return in exchange for smaller and less frequent changes in portfolio value. Analysing the risk-return choices available, a Defensive investor is usually willing to accept a lower return
in order to assure the safety of his or her investment.</p>
</div>
<div id="cautious-info" class="info">
<h4>Cautious</h4>
<p>The Cautious investor may be sensitive to short-term losses. A Cautious investor's potential aversion to losses could compel them to shift into a more stable investment if significant short-term losses occur.</p>
<p>Analysing the risk-return choices available, a Cautious investor is usually willing to accept somewhat lower returns in order to assure greater safety of his or her investment.</p>
</div>
<div id="balanced-info" class="info">
<h4>Balanced</h4>
<p>The Balanced investor may be somewhat concerned with short-term losses and may shift to a more stable option in the event of significant losses. The safeties of investment and return are typically of equal importance to the Balanced investor.</p>
</div>
<div id="growth-info" class="info">
<h4>Captial Growth</h4>
<p>The Captial Growth investor may be willing to accept high risk and chance of loss in order to achieve higher returns on his or her investment. Significant losses over an extended period may prompt the Captal Growth Investor to shift to a less
risky investment.</p>
</div>
<div id="aggressive-info" class="info">
<h4>Aggressive</h4>
<p>The Aggressive investor usually aims to maxmise long-term expected returns rather than minimise possible short-term losses. An Aggressive investor values high returns relatively more and can tolerate both large and frequent fluctuations through
time in portfolio value in exchange for a higher return over the long term.</p>
</div>
</div>
</div>
</body>
这是CSS：
$purple: #7f3f98;
$dark-purple: #1D1060;
$light-purple: #a576b1;
$green: #7cc14c;
$white: #ffffff;
$black: #000000;
$alt-purple: #592a6b;
body {
background-color: $purple;
color: $white;
font-family: 'Open Sans', sans-serif;
box-sizing: content-box;
width: 100%;
h1 {
margin: 1em;
text-align: center;
}
h2, h3 {
margin-bottom: 1em;
}
#description {
margin-bottom: 2em;
}
}
body {
animation: pulse 5s infinite;
}
@keyframes pulse {
0% {
background-color: $purple;
}
50% {
background-color: $alt-purple;
}
100% {
background-color: $purple;
}
}
#graph-wrapper {
width: 100%;
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 300px auto 1fr;
grid-gap: 10px;
}
#left-float, #right-float {
position: absolute;
top: 150px;
p {
margin-bottom: 0;
}
}
#left-float {
left: 0.5em;
}
#right-float {
text-align: right;
right: 0.5em;
}
// Bar Styles
.bar {
grid-row: 1 / 2;
align-self: end;
width: 100%;
background-color: $light-purple;
border-top: 5px solid $light-purple;
border-radius: 5px;
}
#defensive-bar {
grid-column: 1 / span 1;
height: 15px;
}
#cautious-bar {
grid-column: 2 / span 1;
height: 50px;
}
#balanced-bar {
grid-column: 3 / span 1;
height: 80px;
}
#growth-bar {
grid-column: 4 / span 1;
height: 140px;
}
#aggressive-bar {
grid-column: 5 / span 1;
height: 200px;
}
// Button Styles
label {
grid-row: 2 / 3;
display: inline-block;
text-align: center;
border: none;
border-radius: 5px;
padding: 0.5em;
background-color: $dark-purple;
color: $white;
cursor: pointer;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
#defensive-checkbox:checked ~ #defensive-label {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#defensive-checkbox:checked ~ #defensive-bar {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#cautious-checkbox:checked ~ #cautious-label {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#cautious-checkbox:checked ~ #cautious-bar {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#balanced-checkbox:checked ~ #balanced-label {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#balanced-checkbox:checked ~ #balanced-bar {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#growth-checkbox:checked ~ #growth-label {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#growth-checkbox:checked ~ #growth-bar {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#aggressive-checkbox:checked ~ #aggressive-label {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#aggressive-checkbox:checked ~ #aggressive-bar {
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
#defensive-label {
grid-column: 1 / span 1;
}
#cautious-label {
grid-column: 2 / span 1;
}
#balanced-label {
grid-column: 3 / span 1;
}
#growth-label {
grid-column: 4 / span 1;
}
#aggressive-label {
grid-column: 5 / span 1;
}
// Information Section
.info {
display: none;
grid-column: 1 / span 5;
grid-row: 3 / 4;
background-color: $white;
color: $black;
position: relative;
padding: 2em 1.5em;
border: 4px solid $white;
border-radius: 10px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
h4 {
color: $purple;
margin-bottom: 1em;
}
}
.info:after, .info:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.info:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white;
border-width: 30px;
margin-left: -30px;
}
.info:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: $white;
border-width: 36px;
margin-left: -36px;
}
#defensive-info:after, #defensive-info:before {
left: 10%;
}
#cautious-info:after, #cautious-info:before {
left: 30%;
}
#balanced-info:after, #balanced-info:before {
left: 50%;
}
#growth-info:after, #growth-info:before {
left: 70%;
}
#aggressive-info:after, #aggressive-info:before {
left: 90%;
}
// Defensive Active
#defensive-checkbox:checked ~ #defensive-info {
display: block;
}
#defensive-checkbox:checked ~ #cautious-info,
#defensive-checkbox:checked ~ #balanced-info,
#defensive-checkbox:checked ~ #growth-info,
#defensive-checkbox:checked ~ #aggressive-info {
display: none;
}
#defensive-checkbox:checked ~ #defensive-label {
background-color: $green;
}
#defensive-checkbox:checked ~ div#defensive-bar.bar {
border-color: $white;
}
// Cautious Active
#cautious-checkbox:checked ~ #cautious-info {
display: block;
}
#cautious-checkbox:checked ~ #defensive-info,
#cautious-checkbox:checked ~ #balanced-info,
#cautious-checkbox:checked ~ #growth-info,
#cautious-checkbox:checked ~ #aggressive-info {
display: none;
}
#cautious-checkbox:checked ~ #cautious-label {
background-color: $green;
}
#cautious-checkbox:checked ~ div#defensive-bar.bar,
#cautious-checkbox:checked ~ div#cautious-bar.bar {
border-color: $white;
}
// Balanced Active
#balanced-checkbox:checked ~ #balanced-info {
display: block;
}
#balanced-checkbox:checked ~ #defensive-info,
#balanced-checkbox:checked ~ #cautious-info,
#balanced-checkbox:checked ~ #growth-info,
#balanced-checkbox:checked ~ #aggressive-info {
display: none;
}
#balanced-checkbox:checked ~ #balanced-label {
background-color: $green;
}
#balanced-checkbox:checked ~ div#defensive-bar.bar,
#balanced-checkbox:checked ~ div#cautious-bar.bar,
#balanced-checkbox:checked ~ div#balanced-bar.bar {
border-color: $white;
}
// Growth Active
#growth-checkbox:checked ~ #growth-info {
display: block;
}
#growth-checkbox:checked ~ #defensive-info,
#growth-checkbox:checked ~ #cautious-info,
#growth-checkbox:checked ~ #balanced-info,
#growth-checkbox:checked ~ #aggressive-info{
display: none;
}
#growth-checkbox:checked ~ #growth-label {
background-color: $green;
}
#growth-checkbox:checked ~ div#defensive-bar.bar,
#growth-checkbox:checked ~ div#cautious-bar.bar,
#growth-checkbox:checked ~ div#balanced-bar.bar,
#growth-checkbox:checked ~ div#growth-bar.bar {
border-color: $white;
}
// Aggressive Active
#aggressive-checkbox:checked ~ #aggressive-info {
display: block;
}
#aggressive-checkbox:checked ~ #defensive-info,
#aggressive-checkbox:checked ~ #cautious-info,
#aggressive-checkbox:checked ~ #balanced-info,
#aggressive-checkbox:checked ~ #growth-info {
display: none;
}
#aggressive-checkbox:checked ~ #aggressive-label {
background-color: $green;
}
#aggressive-checkbox:checked ~ div#defensive-bar.bar,
#aggressive-checkbox:checked ~ div#cautious-bar.bar,
#aggressive-checkbox:checked ~ div#balanced-bar.bar,
#aggressive-checkbox:checked ~ div#growth-bar.bar,
#aggressive-checkbox:checked ~ div#aggressive-bar.bar {
border-color: $white;
}
基本上他们提到了几点：
该网站在Internet Explorer中被破坏，浏览器测试是前端开发过程的重要组成部分。
按钮活动状态功能不一致。
第一点是有点预期的，因为它是使用CSS网格构建的，IE不支持。所以我打算在IE中创建一些要显示的图像。
第二个然而我有点坚持。我认为他们正在寻找的是在点击后续按钮时突出显示前面的按钮。例如，如果我点击按钮4，按钮1,2,3和4将显示为绿色。然后，如果我点击按钮2，它只会突出显示按钮1和2.我遇到的问题是似乎没有办法选择以前使用CSS的兄弟姐妹。
我正处在一个阶段，我正在考虑是否应该考虑不同的方法来构建这可能解决他们的观点。
答案 0 :(得分：3)
以前的兄弟姐妹或父选择器不是CSS中的东西。
我同意行为不一致，但您需要做的就是使用单选按钮而不是复选框并在HTML流程中受影响的元素之前定位按钮，然后使用标签标签在视觉输出上从下面操作它们，并使用〜一般兄弟组合器来影响正确的元素。
我只是用笔来展示你需要的一个基本例子，整个技巧都在底线
#rb1:checked ~ #div1{
background:lime;
}
#rb2:checked ~ #div1, #rb2:checked ~ #div2 {
background:lime;
}
section{
display:flex;
}
div{
background-color:grey;
margin:1rem;
width:100px; height:100px;
}
label{
background-color:lightgrey;
margin:1rem;
width:100px;
text-align:center;
box-sizing:border-box;
padding:1rem;
cursor:pointer;
}
#rb1, #rb2, #rb3, #rb4, #rb5{
display:none;
}
#rb1:checked ~ #div1{
background:lime;
}
#rb2:checked ~ #div1, #rb2:checked ~ #div2 {
background:lime;
}
#rb3:checked ~ #div1, #rb3:checked ~ #div2, #rb3:checked ~ #div3 {
background:lime;
}
#rb4:checked ~ #div1, #rb4:checked ~ #div2, #rb4:checked ~ #div3, #rb4:checked ~ #div4{
background:lime;
}
#rb5:checked ~ #div1, #rb5:checked ~ #div2, #rb5:checked ~ #div3, #rb5:checked ~ #div4, #rb5:checked ~ #div5{
background:lime;
}<section>
<input type="radio" name="rb" id="rb1">
<input type="radio" name="rb" id="rb2">
<input type="radio" name="rb" id="rb3">
<input type="radio" name="rb" id="rb4">
<input type="radio" name="rb" id="rb5">
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
<div id="div4"> </div>
<div id="div5"> </div>
</section>
<section>
<label id="lb1" for="rb1">First</label>
<label for="rb2">Second</label>
<label for="rb3">Third</label>
<label for="rb4">Fourth</label>
<label for="rb5">Fifth</label>
</section>
当然，将代码重构为SASS for循环将使代码更加干燥，显然＆＃34;最佳实践＆＃34;根本不存在..只是想给你一个快速指南。可能会在以后对代码进行重构，因为我认为它是我展示的一个好方法：）
至于＆＃34; 1.网站在Internet Explorer中被破坏，浏览器测试是前端开发过程的重要组成部分，它们完全正确，但正面的另一个重要部分最终开发告诉开发人员所需的浏览器支持范围。