BEM和覆蓋引導樣式

我剛剛在大約30分鐘前看過BEM，並且用它打了我的第一個路障。BEM和覆蓋引導樣式

我正在使用twitter bootstrap構建一個項目，並且我決定使用BEM架構來處理我的樣式，我試着重寫堆棧列表上的引導懸停效果，但這不起作用。

<ul class="nav nav-stacked side-nav"> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
</ul>

下面是我的風格

.side-nav { 
    position: relative; 
    &__item { 
    a { 
     &:hover { 
      font-weight: bold; 
      background: none; 
     } 
    } 
    } 
}

懸停效果不會消失，除非我強迫它!important，我真的看到了問題，這樣的未來，但決定反正試一試。

我看到問題與bootstraps特性有關，因爲我的樣式呈現在懸停效果的bootstraps樣式下方。

找到一個鏈接到工作問題：https://jsfiddle.net/3321L7xL/

來源

2017-08-02 James Okpe George

@Shameen實際上，我將父級名稱與子級名稱連接起來，以便嵌套而不是嵌套只有一個元素 –

您的代碼非常完美，我已經檢查過編譯... https：// www .sassmeister.com/ –

檢查元件在徘徊時檢查瀏覽器控制檯.. –

對這個問題的關鍵是specificity of your selectors。您當前的選擇器

.side-nav__item a:hover { ... }

具有0.0.0.2.1的特異性。這種特異性必須與引導程序的選擇器的特殊性相同或更高，以覆蓋其規則。當選擇器的特異性相同時，順序優先（最後一條規則獲勝）。

要解決此問題：使您的選擇器更具體。方法有很多，但與當前的標記這裏是一個：

HTML

<ul class="nav nav-stacked side-nav"> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
    <li class='side-nav__item'><a href="#">Link</a></li> 
</ul>

CSS/LESS

.side-nav { 
    position: relative; 

    .side-nav__item { 
    a { 
     &:hover { 
     font-weight: bold; 
     background: none; 
     } 
    } 
    } 
}

這導致.side-nav .side-nav__item a:hover選擇具有特異性0.0.0.3.1這比您要覆蓋的規則更高。

來源

2017-08-02 17:57:02 chazsolo

BEM和覆蓋引導樣式

回答

相關問題