这个css代表什么？

Question

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

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

Answer 1

这是attribute selector与:target伪类相结合的示例。

这将使用传递的属性值（锚的目标）在任何元素上设置给定的样式。

具体来说，它会标识div个id属性，以（^=）字符串＆＃39; image＆＃39;开头，并设置目标时的样式（例如）锚。

Attribute selectors

引用MDN（其中＆＃39; attr＆＃39;是用于选择的属性）：

  

[attr]表示属性名称为attr。

的元素      

[attr = value]表示属性名称为attr和的元素   其值恰好是＆＃34;值＆＃34;。

     

[attr~ = value]表示一个元素   属性名称为attr，其值为以空格分隔   单词列表，其中一个正是＆＃34;值＆＃34;。

     

[ATTR | =值]   表示属性名称为attr的元素。它的价值可以   确切的“价值”或者可以以“值”开头，紧接着是“ - ”   （U + 002D）。它可以用于语言子码匹配。

     

[<强> ATTR ^ =值]   表示属性名称为attr及其值的元素   以＆＃34;值＆＃34;为前缀。

     

[attr $ = value]表示带有的元素   attr的属性名称，其值后缀为＆＃34; value＆＃34;。

     

[attr * = value]表示属性名称为attr和的元素   其值至少包含一次字符串＆＃34; value＆＃34;如   串。

如您所见，您可以使用具有属性选择器的各种运算符来识别属性值的精确性质。

The :target pseudo-class

  

:target伪类表示唯一元素（如果有）   一个id匹配文档URI的片段标识符..

实施例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;