:read-only_美丽而独特的雪花：使用：only-of-type选择器

:read-only

The logical next step from the :empty and :only-child CSS selectors, only-of-type selects single instances of particular elements in a particular context.

从:empty和:only-child CSS选择器的逻辑下一步是， only-of-type选择特定上下文中特定元素的单个实例 。

Whereas :only-child cares only if the targeted element is by itself inside its container, :only-of-type actually looks at the element to determine if it is the only one of its kind in its context. That is, given this markup:

鉴于:only-child仅在目标元素本身位于其容器内的情况下在乎，而:only-of-type实际上会查看该元素以确定其是否是其上下文中的唯一元素 。 也就是说，鉴于此标记：

<div>
    <h1>Major heading</h1>
    <p>Body text…</p>
</div>

The following test will fail to change the paragraph:

以下测试将无法更改该段 ：

div p:only-child { color: red; }

…since the paragraph is not the only child of its <div> parent. But using :only-of-type will turn the paragraph red:

…因为该段不是其<div>父级的唯一子级。 但是使用:only-of-type 会将段落变成红色：

div p:only-of-type { color: red; }

… since the paragraph is the only one of its kind inside the <div>. Naturally, this can be extended by using classes and other selectors:

…因为该段落是<div>内部唯一的一个段落。 当然，可以使用类和其他选择器来扩展它 ：

div.wolf span.cub { … }

… which would select a <span> element with a class of cub only if it is the sole span with a class of cub inside a <div> with a class of wolf.

...这将选择一个<span>元件与类的cub ， 只有当它是唯一的span与类的cub内部的<div>一类的wolf 。

用于：仅类型 (Uses for :only-of-type)

:only-of-type is especially useful for styling images inside of <figure> elements. Since those elements will almost always contain a <figcaption> in addition to an <img>, :only-child will not apply to the image… but only-of-type will. If we know that the image is the only one inside its container, we can responsively scale it to be 100% the width of it’s containing element:

:only-of-type对于在<figure>元素内部设置图像样式特别有用。 由于这些元素除了<img>之外几乎总是还包含<figcaption> ，因此:only-child不会应用于图像……而only-of-type适用于only-of-type 。 如果我们知道图像是容器中唯一的图像，则可以将其缩放到包含元素宽度的100％：

figure img:only-of-type {
    width: 100%; 
    height: auto;
}

If there was more than one image within the <figure>, you could apply flexbox or another solution to evenly distribute the elements. You can also use the inverse, with the :not selector, to determine that there is more than one image in the <figure>:

如果<figure>有多个图像，则可以应用flexbox或另一种解决方案来均匀分布元素。 您还可以通过:not选择器使用反函数来确定<figure>中存在多个图像：

figure img:not(:only-of-type) {
    flex: 1;
}

If there is no ancestor selector defined in the selector, it is assumed that :only-of-type will eliminate from selection any matching elements that have siblings of the same type, at the same level. That is, given the following markup:

如果在选择器中未定义祖先选择器，则假定:only-of-type将在选择时消除具有相同类型同级同级兄弟的任何匹配元素。 也就是说，给定以下标记：

<article></article>
<article></article>
<div>
  <article></article>
</div>

And the following CSS:

以及以下CSS：

article:only-of-type { 
    border: 1px solid red;
}

… only the third article will have a border applied to it.

…只有第三条文章会加上边框。

支持 (Support)

:only-of-type is supported in every modern browser, including IE9+, far backwards in terms of versions (Safari 3.1+ supports the selector, for example); it is not supported in IE8.

:only-of-type每个:only-of-type现代浏览器(包括IE9 +)都支持:only-of-type ，其版本远远落后(例如Safari 3.1+支持选择器)； IE8不支持它。

翻译自: https://thenewcode.com/1121/Beautiful-and-Unique-Snowflakes-Using-the-only-of-type-Selector

:read-only