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