javascript - 这个css代表什么？

Question

div[id^=image]:target{
/*some styles here*/
}

我在 http://www.inserthtml.com/2012/04/css-image-gallery/ 上找到了上面提到的代码部分这段代码是什么意思？谢谢。

Answer 1

这是一个 attribute selector 的例子结合 :target 伪类。

这将做的是在任何具有传递属性值的元素上设置给定样式，该属性值是 anchor 的目标。

具体来说，它标识任何具有 id 属性且以 (^=) 字符串 'image' 开头的 div 元素，并设置样式当它们被(例如)锚定为目标时。

Attribute selectors

引用 MDN(其中 'attr' 是用于选择的属性):

[attr] Represents an element with an attribute name of attr.

[attr=value] Represents an element with an attribute name of attr and whose value is exactly "value".

[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".

[attr|=value] Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".

[attr$=value] Represents an element with an attribute name of attr and whose value is suffixed by "value".

[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.

如您所见，您可以将各种运算符与属性选择器结合使用，以识别属性值的精确性质。

The :target pseudo-class

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document..

例子

div[id^=image]:target {
    color:red;
}

<div id='image'>this</div>
<div id='notimage'>not this</div>
<a href='#image'>click me!</a>