我在一个CSS声明中看到:
#nav.js {
display:none;
}
<ul id="nav">
<li><a href="#">Home3</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
#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"的任何元素，并将其设置为不显示在页面上。
在英语中，这意味着:
查找id为
nav且类为js的任何元素
在verbose CSS中，#nav.js实际上会转换为:
*[id='nav'][class~='js']
这很简单…当添加.js类时，元素将不显示