添加第二个class后首个class样式失效的CSS问题排查

问题描述 #

我是CSS新手（每次学Web开发都栽在CSS上半途而废）。现在在做Free Code Camp的Survey Form，想做些拓展挑战自己，但遇到个问题：给带user-input类的div加radio-inputs类后，user-input类以及input、select的样式全失效了。我猜是选择器优先级的问题，但找不到根源。试了!important，也用开发者工具测了内联样式，都没用。

相关代码 #

JavaScript代码 #

function myFunction() {
  dropDownMenu = document.getElementById("dpwn");
  dropDownMenu.classList.toggle("dropdown")
}

CSS代码（原始错误版本） #

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Sofia+Sans&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --transparent: #00000000;
  --white: #F5F5F5;
  --main-background: #F4F6F7;
}

body {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, black, var(--transparent) 28%), url("./survey.jpg");
  background-size: cover;
}

main {
  position: absolute;
  right: 0;
  background-color: var(--main-background);
  display: flex;
  width: 50vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#title-wrapper {
  position: absolute;
  left: 2rem;
  bottom: 4rem;
  margin: .2rem .3rem;
  width: fit-content;
  padding: 0.1rem 1rem;
  /* background-color: rgb(19, 19, 19); */
}

#title-wrapper>h1 {
  max-width: fit-content;
  text-align: right;
  font-family: 'Sofia Sans', sans-serif;
  color: var(--white);
  font-size: 64px;
  line-height: 1.7;
  font-weight: 300;
}

#title-wrapper>p {
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
  color: var(--white);
}

label {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}

--------------------------------
/* Styles defined here are disappearing :( */

input,
select {
  border-radius: 20px;
  border: 1px solid black;
  height: 43px;
  text-indent: 1rem;
  font-size: 24px;
  background-color: var(--white);
}

select {
  text-align: center;
  text-align-last: center;
  /* webkit*/
}

.dropdown {
  transition: .1s ease-out;
  border-radius: 20px 20px 0 0;
}

option {
  text-align: left;
  /* reset to left*/
}

fieldset {
  display: flex;
  border: 0;
  gap: .5rem;
  padding: .5rem;
}

.user-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.user-input>label {
  margin-left: 1rem;
}

.user-input.radio-inputs {
  display: flex;
  <--- works,
  but doing so styles reset flex-direction: row;
}

----------------------------------------------- #email-age>div:first-of-type {
  width: calc(75%);
}

#email-age>div:last-of-type {
  width: calc(25%);
}

HTML代码 #

<div id="title-wrapper">
  <h1>Survey Form</h1>
  <p>Share your thoughts with us!</p>
</div>

<main>

  <form action="">

    <fieldset id="name-surname">

      <div class="user-input" id="name">
        <label for="user-name">Name</label>
        <input type="text" id="user-info" placeholder="Name" />
      </div>

      <div class="user-input" id="surname">
        <label for="user-surname">Surname</label>
        <input type="text" name="user-info" id="user-surname" placeholder="Surname">
      </div>

    </fieldset>

    <br>

    <fieldset id="email-age">

      <div class="user-input">
        <label for="">Email</label>
        <input type="email" placeholder="Email">
      </div>

      <div class="user-input">
        <label for="">Age</label>
        <input type="number" placeholder="Age">
      </div>

    </fieldset>

    <fieldset>
      <div class="user-input">
        <label for="dpwn">How satisfied are you with out product?</label>
        <select name="" onclick="myFunction()" id="dpwn">
          <option value="1" disabled selected>Choose an option</option>
          <option value="2">Very unsatisfied</option>
          <option value="3">Somewhat unsatisfied</option>
          <option value="4">Neutral</option>
          <option value="5">Somewhat satisfied</option>
          <option value="6">Very satisfied</option>
        </select>
    </fieldset>


    <fieldset>
      <!--            **The problem is here!**
                    <div class="user-input radio-inputs">    
                        <input type="radio" name="frequency" id="">
                        <input type="radio" name="frequency" id="">
                        <input type="radio" name="frequency" id="">
                        <input type="radio" name="frequency" id="">
                        <input type="radio" name="frequency" id="">
                    </div>
                </fieldset>

-->

  </form>
</main>

问题根源与修复方案 #

问题根源 #

不是选择器优先级的问题，是CSS语法错误导致浏览器中断了解析：

• 你用了纯横线--------------------------------当分隔线，这不是合法的CSS注释，浏览器会将其视为无效规则，直接跳过后续所有样式的解析。
• .user-input.radio-inputs规则里混入了<--- works, but doing so styles reset这种无效内容，破坏了CSS结构。

修复步骤 #

1. 将所有纯横线分隔线替换为合法的CSS注释，比如：

/* ------------------------------ */

2. 修正.user-input.radio-inputs的语法错误，删除无效内容，正确的规则如下：

.user-input.radio-inputs {
  display: flex;
  flex-direction: row;
}

修复后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Sofia+Sans&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --transparent: #00000000;
  --white: #F5F5F5;
  --main-background: #F4F6F7;
}

body {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, black, var(--transparent) 28%), url("./survey.jpg");
  background-size: cover;
}

main {
  position: absolute;
  right: 0;
  background-color: var(--main-background);
  display: flex;
  width: 50vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#title-wrapper {
  position: absolute;
  left: 2rem;
  bottom: 4rem;
  margin: .2rem .3rem;
  width: fit-content;
  padding: 0.1rem 1rem;
  /* background-color: rgb(19, 19, 19); */
}

#title-wrapper>h1 {
  max-width: fit-content;
  text-align: right;
  font-family: 'Sofia Sans', sans-serif;
  color: var(--white);
  font-size: 64px;
  line-height: 1.7;
  font-weight: 300;
}

#title-wrapper>p {
  font-size: 40px;
  font-family: 'Roboto', sans-serif;
  color: var(--white);
}

label {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
}

/* ------------------------------ */
/* Styles defined here are disappearing :( */

input,
select {
  border-radius: 20px;
  border: 1px solid black;
  height: 43px;
  text-indent: 1rem;
  font-size: 24px;
  background-color: var(--white);
}

select {
  text-align: center;
  text-align-last: center;
  /* webkit*/
}

.dropdown {
  transition: .1s ease-out;
  border-radius: 20px 20px 0 0;
}

option {
  text-align: left;
  /* reset to left*/
}

fieldset {
  display: flex;
  border: 0;
  gap: .5rem;
  padding: .5rem;
}

.user-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.user-input>label {
  margin-left: 1rem;
}

.user-input.radio-inputs {
  display: flex;
  flex-direction: row;
}

/* ------------------------------ */
#email-age>div:first-of-type {
  width: calc(75%);
}

#email-age>div:last-of-type {
  width: calc(25%);
}

修复后，浏览器就能正常解析所有样式，user-input、input、select的样式会正常生效，同时radio-inputs类也能正确修改布局方向。

内容的提问来源于stack exchange，提问作者Davide Pulvirenti