CSS基础知识 － ID/Class/Div/Span/Selector

1) . 号 和 # 号

在CSS文档中，我们常常可以看到一些符号，最常见的就是 . 号 和 # 号，那么它们分别代表什么意思呢？

#号：标志网页上的ID,顾名思义，一个ID标志唯一的一个值，我们在数据库中也是如此，因此，ID必须是唯一的。

.号： 标志网页上的一个Class(类)，当然啦，这个Class和我们OOP中的Class不一样，请不要搞混。

那么，# 和 . 的区别到底是什么呢？

最重要的如下：

一个ID名只能应用于页面上的一个元素，而同一个类名可以应用于网页上任意数量的元素。

 我们知道，我们可以在Class中添加字体，颜色和其他，然后在网页中，只要class="XXX"就可以应用该类的样式。

于是，CSS新手们常常在几乎所有的东东上添加类，这样做是不好的，我们可以称它为“多类症”，在某种程度上，

这和使用表格布局一样糟糕！

 

2) Div和Span

div就是division,代表网页中的一个部分，我们通常将主要内容包围在div中并分配ID，这样可以做到在网页中添加结构。

span代表一个行，我们可以用它来对行内元素进行分组，你可以把它想成是ASP.NET中的label控件。

它们的区别：

div会自动换行，而span不会。

有的网页新手在页面中任意应用div,这在有时候是完全没有必要的。比如下面一个例子：

<div id="mainNav">

<ul>
 <li><a href="#">Home</li>
 <li><a href="#">News</li>
 <li><a href="#">Contact</li>
</ul>

</div>

 以上这段代码是完全没有必要的，列表本来就是顶级元素，因此完全可以在列表上应用ID,如下：

<ul id="mainNav">
 <li><a href="#">Home</li>
 <li><a href="#">News</li>
 <li><a href="#">Contact</li>
</ul>

 

3）常用的Selectors(选择器)

 a) 类型选择器

      － 用来寻找特定类型的元素，比如段落(p)，链接(a)，或者标题(h1)，包括body等等。

      eg:

      p { color: black; }

      a { text-decoration: underline; }

      h1 { font-weight: bold; }

b) 后代选择器

      － 用来寻找特定元素或者元素组的后代，它由两个选择器之间的空格表示。

      eg:

      li a { text-decoration: none; }

      在上面的例子中，只有在列表项的链接元素上才会应用样式，而段落中的链接则不受影响。

c) ID和类选择器

      我们在上面已经讲过，id对应＃，class对应.