我正在制作一系列用CSS练习的按钮，这就是我所拥有的
https://codepen.io/buoyantair/pen/JNgqXG?editors=1100
现在在CSS中发生了一些奇怪的事情，所以，只需将代码放在这里
帕格剧本
header.row
.col
h1 Hover Buttons
p A small variation of buttions I made.
p Made by <a href="https://codepen.io/buoyantair">@buoyantair</a>
.row
button.btn Hello
button.btn-ghost World
button.btn-pill Cat
.row
button.btn-fall Kitty
button.btn-hang World
button.btn-wobble Cat
Sass文件
=flex($direction, $position)
display: flex
flex-flow: $direction
justify-content: $position
=size($width, $height)
width: $width
height: $height
$color-theme: #DD403A
$btn-width: 100px
$btn-height: 50px
body
+size(100%, 100vh)
background: #3E363F
+flex(column wrap, space-around)
color: #FFF
font-family: 'Bubbler One', sans-serif
font-size: 1.5em
a,a:visited, a:active
text-decoration: none
color: inherit
header
h1
margin-bottom: 0
p
margin-top: 0
.row
+flex(row wrap, space-around)
.col
+flex(column wrap, center)
button.btn
border: none
+size($btn-width, $btn-height)
background: $color-theme
border-radius: 5px
margin: auto
color: inherit
font-family: inherit
font-size: inherit
transition: all 0.25s
border-bottom: 0px solid $color-theme
button.btn:hover
background: darken($color-theme, 10%)
border-bottom: 5px solid darken($color-theme, 20%)
cursor: pointer
button.btn:focus
outline: none
button.btn ~ [class*="-ghost"]
border: 0px solid $color-theme
+size($btn-width, $btn-height)
background: $color-theme
border-radius: 5px
margin: auto
color: inherit
font-family: inherit
font-size: inherit
transition: all 0.25s
border-bottom: 0px solid $color-theme
button.btn ~ [class*="-ghost"]:hover
background: transparent
border: 2px solid $color-theme
cursor: pointer
color: $color-theme
button.btn ~ [class*="-ghost"]:focus
outline: none
button.btn ~ [class*="-pill"]
border: 0px solid $color-theme
+size($btn-width, $btn-height)
background: $color-theme
border-radius: 25px
margin: auto
color: inherit
font-family: inherit
font-size: inherit
transition: all 0.25s
border-bottom: 0px solid $color-theme
button.btn ~ [class*="-pill"]:hover
cursor: pointer
+size($btn-width * 1.5, $btn-height)
overflow: hidden
position: relative
&:before
content: ''
display: block
@extend [class*="-pill"]
background: lighten($color-theme, 10%)
position: absolute
top: 0
left: 100%
animation: pill 1s
button.btn ~ [class*="-pill"]:focus
outline: none
button.btn ~ [class*="-fall"]
border: 0px solid $color-theme
+size($btn-width, $btn-height)
background: $color-theme
border-radius: 25px
margin: auto
color: inherit
font-family: inherit
font-size: inherit
transition: all 0.25s
border-bottom: 0px solid $color-theme
button.btn ~ [class*="-fall"]:hover
cursor: pointer
+size($btn-width * 1.5, $btn-height)
overflow: hidden
position: relative
&:before
content: ''
display: block
@extend [class*="-fall"]
background: lighten($color-theme, 10%)
position: absolute
top: 0
left: 100%
animation: pill 1s
button.btn ~ [class*="-fall"]:focus
outline: none
// Animations
@keyframes pill
0%
left: 100%
100%
left: -100%
有些事情很奇怪，例如，我使用button.btn ~ [class*="-fall"]类型的选择器来选择类中带有-fall字的元素等。这样对于按钮的第一行有效但是神秘的是，相同的代码并不适用于第二行。我不知道为什么会这样，所以我尝试做了类似button.btn[class*="-fall"]之类的事情而且也没有用，所以我尝试做button[class*="-fall"]之类的事情。这个解决方案确实有效，[class*="-fall"]也是如此。我现在真正感到困惑的是为什么第一次和第二次尝试都是button.btn ~ [class*="-fall"]
并且button.btn[class*="-fall"]在其他人不工作的时候没有工作？
如果我错过任何东西，你能帮助我吗？我误解了这些选择器的用法吗？我怎样才能解决这个问题？
答案 0 :(得分：1)
我能想到button.btn ~ [class*="-fall"]失败的唯一原因是唯一的[class*="-fall"]是其父.row的第一个孩子。如果只有一个，并且它是第一个孩子，那么它之前就没有元素，它将与兄弟选择器不匹配。这可以从你的Pug代码中看出，特别是在这里：
.row
button.btn-fall Kitty
button.btn-hang World
button.btn-wobble Cat
button.btn[class*="-fall"]失败的原因是因为您的按钮没有“btn”类。它们每个都有一个以“btn”开头的类，但不完全是“btn”。因此.btn-fall会匹配，但不会.btn。
为了让您的生活更轻松，您可以随时修改按钮，使每个按钮都有两个类而不是一个复合类：
.row
button.btn Hello
button.btn.ghost World
button.btn.pill Cat
.row
button.btn.fall Kitty
button.btn.hang World
button.btn.wobble Cat
这样，每个按钮都有一个“btn”类，你可以使用两个类选择器来匹配元素，而不是依赖于属性子串选择器，这不是惯用的。
但话又说回来，如果每个按钮都会有“btn”类，那么......可能是多余的。