2つのCSSルールの順序を変更すると結果が変わるのはなぜですか？

Question

2つのCSSルールの順序を変更すると結果が変わるのはなぜですか？私がこれを使うと、私には私が望んでいない国境が与えられます。私はちょうどこれら二つのCSSルールの順序を変更した場合

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after { 
    background-color: #00c4ff; 
    bottom: 0; 
    content: ""; 
    display: block; 
    height: 1px; 
    left: 0; 
    margin: auto 0; 
    right: 0; 
    top: 0; 
    transition: width 1s ease-in-out 0s; 
    width: 0; 
} 
.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after { 
    width: 100%; 
} 

しかし、それは私に正しい結果が得られます。これは私がのために行くよ間違った結果を生成します。ここで何が起こっているのですか？

.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after { 
    width: 100%; 
} 

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after { 
    background-color: #00c4ff; 
    bottom: 0; 
    content: ""; 
    display: block; 
    height: 1px; 
    left: 0; 
    margin: auto 0; 
    right: 0; 
    top: 0; 
    transition: width 1s ease-in-out 0s; 
    width: 0; 
} 

それらの両方が1を0からwidthを変更し、widthの設定が含まれているので、これは私のマークアップ

<div class="menuBar jumplinks"> 
       <nav class="navbar navbar-default"> 
        <div class="navbar-header"> 
         <button aria-expanded="false" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
        </div> 
        <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li class="active"><a href="#home">Home</a></li> 
          <li><a href="#about">About</a></li> 
          <li><a href="#services">Services</a></li> 
          <li><a href="#portfolio">Work</a></li> 
          <li><a href="#pricing">Pricing</a></li> 
          <li><a href="#blog">Blog</a></li> 
          <li><a href="#contact">Contact</a></li> 
         </ul> 
        </div> 
       </nav> 
      </div> 

Answer 1

です。

.menuBar .navbar-nav > li > a::after, .menuBar .navbar-nav > li.active > a::after { 
    background-color: #00c4ff; 
    bottom: 0; 
    content: ""; 
    display: block; 
    height: 1px; 
    left: 0; 
    margin: auto 0; 
    right: 0; 
    top: 0; 
    transition: width 1s ease-in-out 0s; 
    width: 0; /* <------------------------- THIS LINE */ 
} 

そしてもう一つは、100%からwidth変更します。

.menuBar .navbar-nav > li > a:hover::after, .menuBar .navbar-nav > li.active > a::after { 
    width: 100%; /* <------------------------- THIS LINE */ 
} 

外観が変化している理由は、直線的にファイルダウン、そして後に、前に何が来るのか読んでいるということです。これは、width: 100%;と読むと、プロパティは100%になりますが、width: 0;になると、が0に変更されます。

希望すると便利です。 :)