與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 

薩斯文件

=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字在他們的類等等。因此，對於按鈕的第一行工作，但鬼使神差的是同樣的代碼沒有按」元素t爲第二排工作。我不知道爲什麼發生這種情況，所以我試圖做這樣的事情，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的第一個孩子。如果只有一個，並且它是第一個孩子，那麼它之前沒有任何元素，並且它不會與兄弟選擇器匹配。這可以從你的哈巴狗的代碼可以看出，特別是在這裏：

.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」類，它可能是多餘的。