CSS 选择器的意外行为

Question

我正在制作一系列按钮来练习 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"] 在其他人工作时不工作？

如果我遗漏了什么，你们能帮我吗？我误解了这些选择器的用法吗？我怎样才能解决这个问题？

Answer 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”类，那……可能是多余的。