Unerwartetes Verhalten mit CSS-Selektoren

Question

ich eine Reihe von Schaltflächen mache mit CSS zu üben, und das ist, was ich habe

https://codepen.io/buoyantair/pen/JNgqXG?editors=1100

Jetzt gibt es ein paar seltsamen Dinge in diesem CSS geschehen so, Lemme nur setzen Sie den Code hier

Mops Script

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 Datei

=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% 

Ein paar Dinge seltsam sind, zum Beispiel, habe ich die button.btn ~ [class*="-fall"] Art von Selektor die Elementen mit dem -fall Wort in ihrer Klasse usw. So auszuwählen, die für die erste Reihe von Tasten funktionieren, aber auf mysteriöse Weise, dass gleicher Code doesn‘ t arbeite für die zweite Reihe. Ich bin mir nicht sicher, warum es so passiert, also habe ich versucht, so etwas zu tun button.btn[class*="-fall"] und das hat auch nicht funktioniert, also habe ich versucht, etwas wie button[class*="-fall"] zu tun, und diese Lösung funktioniert tatsächlich, so funktioniert [class*="-fall"]. Was ich wirklich verwirrt bin ist, warum ist der erste und der zweite Versuch wie button.btn ~ [class*="-fall"] und button.btn[class*="-fall"] nicht funktioniert, während die anderen sind?

Können Sie mir bitte helfen, wenn mir etwas fehlt? Habe ich die Verwendung dieser Selektoren falsch verstanden? Wie kann ich das beheben?

Answer 1

Der einzige Grund, dass ich daran denken könnte button.btn ~ [class*="-fall"] würde scheitern ist, dass die einzige [class*="-fall"] das erste Kind seiner Eltern .row ist. Wenn es nur einen gibt und es das erste Kind ist, dann gibt es keine Elemente davor und es wird nicht mit dem Geschwisterselektor übereinstimmen. Dies kann von Ihrem Mops-Code zu sehen, und zwar hier:

.row 
    button.btn-fall Kitty 
    button.btn-hang World 
    button.btn-wobble Cat 

Der Grund button.btn[class*="-fall"] versagt ist, weil Ihre Tasten, um die „BTN“ Klasse nicht haben. Sie haben jeweils eine Klasse, die mit "btn" beginnt, aber nicht genau "btn" ist. So würde .btn-fall übereinstimmen, aber nicht .btn.

Um Ihnen das Leben erleichtern können Sie immer Ihre Anstecker modifizieren, so dass sie jeweils anstelle einer Verbindungsklasse zwei Klassen:

.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 

Auf diese Weise wird jede Taste eine „BTN“ Klasse haben, und Sie können Verwenden Sie einfach zwei Klassenselektoren, um Elemente abzugleichen, anstatt sich auf einen Attribut-Substring-Selektor zu verlassen, der weniger idiomatisch ist.

Aber dann, wenn jeder Button sowieso die "btn" -Klasse hat, ist es ... wahrscheinlich redundant.