#id.class css 是什么意思？ [复制]答案

【问题标题】：What #id.class css means? [duplicate]#id.class css 是什么意思？ [复制]
【发布时间】：2016-01-21 18:49:39
【问题描述】：

我在 CSS 声明中看到：

#nav.js {
    display:none;
}

有人能解释一下这是什么意思吗？ html代码如下

<ul id="nav">
    <li><a href="#">Home3</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

【问题讨论】：

你的标题没有回答你的问题吗？这几乎看起来是修辞。

标签： css css-selectors

【解决方案1】：

很简单...当添加一个类 .js 时，元素不会显示

HTML

<ul id="nav" class="js">
    <li><a href="#">Home3</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

【讨论】：

【解决方案2】：

`#nav.js`

这会选择一个元素，其id 设置为"nav"，并且有一个包含"js" 的class。

例如，它将选择以下任何元素：

<figure id="nav" class="js"></figure>
<figure id="nav" class="foo js"></figure>
<figure id="nav" class="js bar"></figure>
<figure id="nav" class="foo js bar"></figure>

但它不会选择以下任何元素：

<figure></figure>
<figure id="nav"></figure>
<figure class="js"></figure>
<figure id="nav" class="foo bar"></figure>

`display: none`

我相信您已经知道，这会将元素设置为根本不显示在页面上。

`#nav.js { display: none; }`

这结合了上述内容。它选择具有"nav" 的id 和包含"js" 的class 的任何元素，并将其设置为不显示在页面上。

【讨论】：

【解决方案3】：

在英语中，这意味着：

找到任何 id 为 nav 的元素并且具有 js 的类。

在 vebose CSS 中，#nav.js 实际上会转换为：

*[id='nav'][class~='js']

【讨论】：

【解决方案4】：

当你使用 #nav 为 ID 元素分配 css 时

当您使用.js 时，它会将 css 分配给所有 js 类元素。

当您使用#nav.js 时，它只会分配给同时具有id=#nav 和class='js' 的元素

当您声明 #nav .js 时，它会将 css 分配给 #nav 元素内的所有类。

【讨论】：