带有CSS定位的DIV与NAV标签

Question

快速提问 - 希望很容易回答。

我知道<nav>标记是块级元素。现在我知道你在这个标签里放的任何东西也可以放在<div>的内容和样式中。

现在，当我将此元素的位置设置为固定（position: fixed）时，当我使用带有<div>标记的id但不时，它可以正常工作我是在<nav>标记内完成的。

只要我使用一个<nav>代码，我就可以使用nav { style here }设置样式吧？我不一定需要使用id。

但是，位置样式不适用于<nav>。

是否有理由，或者我应该始终使用id即使<nav> ??

修改

抱歉，我忘了提及我的用户信息。 我正在使用chrome 34，我确实知道类和id之间的区别，但我已经看过样式表和教程，以便仔细检查他们已经完成了我所描述的内容。所以这就是为什么我感到困惑。

我想问题是：＆＃34;为什么某些css样式会在div标签中使用而不是在nav标签中？＆＃34;我认为这只是一个语义差异，很容易分辨导航结构的位置。

Answer 1

  

只要我使用一个标签，我就可以使用nav {   这里有风格吧？我不一定需要使用id。

是和否！
是的，你是对的。如果只有一个标签，则css导航选择器足以唯一地选择该导航。但那就是它。

不，CSS级联，也有常规和＆＃34;隐藏＆＃34;继承*和＆gt ;.因此，您可以使用＆gt;在其他位置选择导航或*你不知道。

  

但是，位置样式不适用于<nav>。   有没有理由，或者我应该总是使用id，即使是<nav> ??

是的，有理由。 ID具有第二高的选择值。 Html标签的选择值较低。

CSS Specificity in 4 columns:
inline=1|0|0|0, id=0|1|0|0, class=0|0|1|0, element=0|0|0|1
Left to right, highest number takes priority.

 0,1,0,0 > 0,0,10,10

1. inline
2. num of #ID
3. num of .class
4. hum of html element selectors

0. JavaScript (dom inline + last = strongest selection)

了解更多here.

试试这个position: fixed !important;
如果它不起作用，请尝试使用!important;的唯一ID作为该导航。如果这样可以解决问题，那么您就会知道选择器中的特异性。

Answer 2

<nav>只是与其他标签一样的HTML（5）标签。也许您的浏览器有一个预定义的（用户代理）样式表。

我的Chrome有：

所以你可以像在div上一样使用你需要的所有css，它有相同的CSS：

这适用于我的浏览器Chrome 34。

如果你需要确定一个特殊的行为，那么明确设置你期望的css是一个好习惯。在您的情况下，您应该另外编写display: block;。

Answer 3

您需要了解类名和id元素之间的区别 所以最好理解它，请阅读规范。

id =此属性为元素指定名称。该名称在文档中必须是唯一的。

class =此属性为元素分配一个类名或一组类名。可以为任意数量的元素分配相同的类名或名称。多个类名必须用空格字符分隔。