
1、类型选择符
类型选择符是指以网页中已有的标签名作为名称的选择符,body是网页中的一个标签名,div也是,span也不例外。因此以下的选择符都是类型选择符,它们将控制页面中所有body、div或span、p。
body { } div { } span { } p { ] 等
2、群组选择符
除了可以对单个的XHTML对象进行样式指定外,还可以对一组对象进行样式指定,例如:
h1,h2,h3,p,span {
font-size:14px;
color:#FF0000;
}
使用逗号对选择符进行分隔,使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做,对页面中需要使用相同样式的地方,只需写一次样式就可以,从而减少代码量。
3、包含选择符
当对某个对象的子对象进行样式指定时,就可以用包含选择符,对象之间使用空格作为分隔符。例如:
h1 span {
font-weight:bold;
}
span包含中h1中。只对包含中h1中的span应用font-weight:bold 的样式设置,而对单独存在的span并不应用以上的样式效果,例如:
<h1>这是我们的一段文本<span>这是span内的文本</span></h1> span标签中的“这是span内的文本”将应用font-weight:bold 样式
<h1>单独的h1</h1>
<span>单独的span</span> 这一句并不会应用font-weight:bold 样式
之所以这样做,是因为它能够帮助我们避免过多的id及class设置,直接对所需要的元素进行设置即可。
包含选择符除了可以二者包含,也可以多级包含。例如:
body h1 span strong {
font-weight:bold;
}
但多级包含的可读性较差,因此不提倡这样做。
4、id及class选择符
id及class选择符是CSS提供由用户自定义标签名称的选择符,例如:对于h1标签,如果使用id选择符定义,那么<h1 id="p1">及<h1 id="p2">是两个不同的元素。
对于一个网页而言,其中的每个标签均可使用类似于id=" " 的形式来对 id 属性进行名称指定,在网页中,每个id 名称只能使用一次,不得重复。例如:
<div id="content"></div> 注:一个页面只能使用id 名称为content一次。
在CSS样式中,id 选择符使用#号进行标识。例如:
#content {
font-size:12px;
width:800px;
}
与id 不同的是,class允许重复使用,比如页面中的多个元素,都可以同时使用同一个class定义。例如:
<div class="p1"></div>
<h1 class="p1"></h1>
<span class="p1"></span>
在CSS样式中,class使用点(.)符号进行标识。例如:
.p1 {
margin:10px;
font-size:14px;
}
页面中所有使用class="p1" 的标签均可使用此样式进行设置。
5、标签指定式选择符
如果既想使用id或class,也想同时使用标签选择符,那么可以使用如下格式:
h1#content { }
表示针对所有id 为content 的 h1标签进行指派。
h1.p1 { }
表示针对所有class为p1 的h1标签进行定义。
6、组合选择符
h1 .p1 { } 注h1与.p1之间有空格,而上题的标签指定式选择符之h1与.p1之间是没有空格的
表示h1标签下的所有class为p1标签。
#content h1 { }
表示id 为content的标签下的所有h1标签。
也可两者组合在一起
h1 .p1,#content h1 { } 注,两者之间用逗号隔开。
7、伪类及伪对象
属于CSS的一种扩展型类和对象。不能自定义。
a:hover {
background-color:#FF0000;
}
hover便是一个伪类,表示指定链接标签a的鼠标移上的状态。
| 伪类 | 用途 |
| :link | a链接标签的未被访问的样式 |
| :hover | 对象在鼠标移上时的样式 |
| :active | 对象被用户点击及被点击释放之间的样式 |
| :visited | a链接对象被访问后的样式 |
| :focus | 对象成为输入焦点时的样式 |
| :first-child | 对象的第一个子对象的样式 |
| :first | 对于页面的第一页使用的样式 |
| 伪对象 | 用途 |
| :after | 设置某个对象之后的内容 |
| :first-letter | 对象内的第一个字符的样式设置 |
| :first-line | 对象内第一行的样式设置 |
| :before | 设置某个对象之前的内容 |
8、通配选择符
css通配选择符可用使用 * (星号)作为关键字,如下:
* { color:blue; }
*号表示所有对象,包含所有id及class的XHTML标签。使用如上进行样式定义时,页面中的所有对象都会应用color:blue;来设置字体的颜色。
--------------