css 嵌套的唯一类型选择器

Question

所以我有这种情况：

<div class="wrapper"> 
     <div class="optional">
         <h3>one</h3>
         <textarea/>
     </div>
     <div class="optional">
         <h3>one</h3>
         <textarea/>
     </div> 
</div>

在 wrapper 里面有更多的元素。有时我有 1 optional 有时不止一次。我想添加不同的

.optional{textarea{ height: 150px;  }} 
.optional:only-of-type{textarea{ height: 75px;  }} //sass

但遗憾的是这不起作用（我知道.. 仅在元素上，而不是类）。

那么 - 有没有一种方法可以不用 JS 在只有一个的情况下为 textarea 提供不同的高度？

Answer 1

如您所述，:only-of-type 不会将自身限定为类。

因为 CSS doesn't yet provide an analogue of *-of-type for arbitrary selector sub-matching，此外 CSS 没有提供一种方法来确定元素是否是其类型的唯一孙子（或唯一的孙子，时期），你将不得不用 JS 来做这个。

Answer 2

所以，我现在有了解决方案 - 而不是 div.optional 我只是选择了另一个 rare 元素 (section)，然后我可以再次 select only-of-type。简单但丑陋:)

css 嵌套的唯一类型选择器

css nested only-of-type selector

html

css

css-selectors