Question

我之前写过（或者更有可能是复制\粘贴）一些代码，现在正在查看它......我并不完全知道这个CSS Selector的作用：

div#pop-up

我的猜测是它说'＃34;如果你是一个名为弹出窗口的div，我会选择你＆＃34;但我不知道当然。任何人都可以确认这是否是一个有效的CSS选择器，如果是这样，它做了什么？

Answer 1

选择div元素，id属性等于“弹出”。

div#pop-up {
  color: #f00;
  font-weight: bold;
}

<div id="pop-up">Hello, world!</div>
<div id="not-pop-up">Hello, world!</div>

Answer 2

选择一个ID为popup的div。 div部分是不必要的，但就CSS specificity而言，它可以改变规则的权重。

Answer 3

#是id的标识符，因此此CSS表示div标记id pop-up

Answer 4

它基本上是在寻找一个带有弹出窗口ID的div。

一个例子是：

div#pop-up {
  font-size: 30px;
  color: hotpink;
}

<div class="pop-up">DIV WITH THE CLASS "pop-up"</div>

<div id="pop-up">DIV WITH THE ID "pop-up"</div>

<span id="pop-up">SPAN WITH THE CLASS "pop-up"</span>

元素＃Identifier CSS选择器有什么作用？

4 个答案: