爲什麼：only-of-type需要不同的HTML標籤？

問題：我有一個由卡組成的網格。並非所有的卡都是相同的寬度。有些卡片是1/4，其他卡片是3/4寬度。網格必須總是出來一個整數。偶爾3/4寬度的卡並排。爲什麼：only-of-type需要不同的HTML標籤？

解決方案：受CSS數量查詢的啓發我想在連續數超過1的情況下將3/4卡片寬度更改爲1/2。參考this article from A List Part，我找到了合適的僞類：唯一的類型來實現這一點。

但是，似乎當所有的html標籤都是相同的：唯一的類型僞選擇器不表現你應該如何。

// The money style 
 
.pinned:not(:only-of-type) { 
 
    width: 50%; 
 
} 
 
// EXTRA STUFF // 
 
/* Basic Card */ 
 
.panel { 
 
    color: rgb(51, 51, 51); 
 
    background-color: rgb(245, 245, 245); 
 
    border-color: rgb(221, 221, 221); 
 
    font-size: 16px; 
 
    padding: 10px 15px; 
 
} 
 
/* Featured Card */ 
 
.pinned { 
 
    .panel { 
 
    border-color: rgb(51, 122, 183); 
 
    background-color: rgb(51, 122, 183); 
 
    color: rgb(255, 255, 255); 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<article class="container-fluid"> 
 
    <h2>Same HTML Tag</h2> 
 
    <section class="row"> 
 
    <div class="pinned col-xs-9"> 
 
     <div class="panel">Featured Card</div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    </section> 
 
</article> 
 
<article class="container-fluid"> 
 
    <h2>Differnt HTML Tags</h2> 
 
    <section class="row"> 
 
    <aside class="pinned col-xs-9"> 
 
     <div class="panel">Featured Card</div> 
 
    </aside> 
 
    <div class="col-xs-3"> 
 
     <div class="panel">Basic Card</div> 
 
    </div> 
 
    </section> 
 
</article>

它接受類的名字作爲目標，但瀏覽器所需要的HTML標籤是不同的。這是預期的行爲嗎？還有其他的僞選擇器比類名稱更多地依賴於標記嗎？

來源

2016-12-22 Cuberic

*但是，似乎所有的html標籤都是相同的：'：only-of-type'僞選擇器並不像你認爲的那樣行事。* ..聽起來像你忘記'：not（）'在混合中。這給你的標準行爲相反。 –

很可能你認爲'：只有類型'表現得像'：唯一匹配'。不，在'：only-of-type'中的「type」是指由HTML標籤給出的元素類型 – Oriol

一切工作正常。

這是您的選擇器和聲明：

.pinned:not(:only-of-type) { 
    width: 50%; 
}

在普通的英語：

的:only-of-type僞類選擇具有不相同的元素類型的兄弟姐妹的元件。
但是想要的這個相反（:not()）
因此，選擇的目標是與.pinned類具有相同的元素類型的同級元素。

在你的第一個例子中，div有.pinned類。這div有兩個兄弟姐妹。這是一場比賽。元素獲取width: 50%。

<section class="row"> 
    <div class="pinned col-xs-9"> 
     <div class="panel">Featured Card</div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel">Basic Card</div> 
    </div> 
    <div class="col-xs-3"> 
     <div class="panel">Basic Card</div> 
    </div> 
</section>

在第二個例子中，一個aside元素具有.pinned類。沒有其他aside兄弟姐妹（這是一個:only-of-type）。沒有匹配。 width: 50%被忽略。

<section class="row"> 
    <aside class="pinned col-xs-9"> 
    <div class="panel">Featured Card</div> 
    </aside> 
    <div class="col-xs-3"> 
    <div class="panel">Basic Card</div> 
    </div> 
</section>

來源

2016-12-22 00:53:10

爲什麼：only-of-type需要不同的HTML標籤？

回答

相關問題