为什么：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标签？

回答

相关问题