＃id.class css是什么意思？

Question

我在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>

Answer 1

#nav.js

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

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

<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; }

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

Answer 2

在英语中，这意味着：

  

找到我的任何元素，ID为nav ，的类别为js。

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

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

Answer 3

很简单......当添加一个类.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>

Answer 4

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

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

当您使用#nav.js时，它只会分配给同时包含id=#nav和class='js'

的元素

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