Question

问题：我有一个由卡组成的网格。并非所有卡都宽度相等。有些卡是1/4，其他卡是3/4宽度。网格必须总是出现一个整数。偶尔3/4宽度的卡片是并排的。

解决方案：受CSS数量查询的启发我希望将3/4卡片宽度更改为连续超过1时的1/2。引用this article from A List Part，我找到了正确的伪类：only-of-type 来实现这一点。

然而，似乎当所有html标签都相同时，：only-of-type 伪选择器并不像你认为的那样。

＆＃13;

// 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);
  }
}

＆＃13;

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

＆＃13;

它接受类名作为目标，但浏览器要求HTML标记不同。这是预期的行为吗？还有其他伪选择器比类名更依赖于标记吗？

Answer 1

一切都很好。

这是你的选择器和声明：

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

用简单的英语：

:only-of-type伪类选择没有相同元素类型兄弟的元素。
但你想要与此相反（ :not() ）
因此，选择器的目标是具有类.pinned的元素，该类具有相同元素类型的兄弟。

在您的第一个示例中，div具有.pinned类。这个div有两个兄弟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>

为什么：only-of-type需要不同的HTML标记？

1 个答案: