Question

<input type="checkbox" >

<aup-switch>
    <input type="checkbox" >
</aup-switch>

我为input[type="checkbox"]使用css样式，但是我不希望将其应用于aup-switch内的输入组件。我尝试使用CSS的not选择器，但不起作用。

input[type="checkbox"]:not(aup-switch input[type="checkbox"]) {
    &+label {
        position: relative;
        cursor: pointer;
        padding: 0;
    }
}

Answer 1

考虑代码：

// scss:
aup-switch {
  input {
   // other styles
   }
}

input {
 position: relative;
 cursor: pointer;
 padding: 0;
}


// compiled

aup-swich input { // other styles }
input { position: relative; cursor: pointer; padding: 0;}

Answer 2

改为使用*:not(aup-switch) > input[type='checkbox']选择器

*:not(aup-switch) > input[type='checkbox'] {
  -webkit-appearance: unset;
  width: 10px;
  height: 10px;
  background-color: red;
}

Normal checkbox: <input type="checkbox" >

<aup-switch>
    aup-switch checkbox: <input type="checkbox" >
</aup-switch>

CSS：不是父运算符

2 个答案: