: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