类选择器

class 属性规定元素的类名（classname）

类选择器以一个点号显示

.center {text-align: center}

class类似一个标记。

“p.类名”表示标记了该类的p标签的样式，这个类的样式只能被p使用。即

p class=”标记名”

而”.类名”表示元素也可以基于它们的类而被选择，所有标签都可以包含这个类

*.important {color:red;}

.important {color:red;}

以上两者相等

一个标签可以包含多个类，包含多个类时用空格隔开，不分先后

当两个类有各自的样式，可以有同时包含两个类时才出现的样式

.important.warning {background:silver;}

                         
             
             
                         
这是单独的段落
    
这是在"class=try1 try2"的段落
    
这是标题，class=try2
    

---

                         
             
             
                         
 段落s1
    
 段落s2
    
 段落s1 s2 
    

---

class 也可被用作派生选择器：

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。例如：

#red {color:red;}

#green {color:green;}

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {

font-style: italic;

text-align: right;

margin-top: 0.5em;

}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

ID区分大小写 即使被标注为特定ID的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次： 例如：

                    
             
             
                         
这是ID=red的段落
    
这是普通段落
    

伪元素选择器

a:link 正常样式

a:hover 鼠标放上的样式 a:active 鼠标按下时的样式 a:visited 访问过的样式

派生选择器

后代选择器

li strong {    font-style: italic;    font-weight: normal;  }

以上的代码表示在列表（li）中的strong标记所具有的样式。当strong单独使用时不具有以上样式。

类似于

                    
             
             
                             This is a normal Strong        
     
            
      
This is a Strong in li
        
     
    

                    
             
             
                             这是普通的strong        
这是普通的h2
        
这是h2中的strong
    

子元素选择器

h1 > strong {color:red;}

只将h1下一层的strong使用该样式。”>”两端可以没有空格

与后代选择器的区别：

个人认为可以将所有标签看成一个树结构 后代选择器的范围包含孩子和孙子节点。 子元素选择器的范围只包含孩子节点。

                    
             
             
                         
这是第一个
    
这是
第二个
strong
    

相邻兄弟选择器

h1+p{clolr:blue;}

二者有相同父元素则称为兄弟。 紧贴在h1后的p，并且h1和p具有相同父节点。则使用该样式

This is a heading.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.
This is paragraph.

---

Tips

HTML div标签

可定义文档中的分区或节（division/section）,把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。