CSS选择器
1、样式表中的每条规则都有两个主要部分:选 择 器(selector) 和声 明 块(declarationblock)。选择器决定哪些元素受到影响;声明块由一个或多个属性-值对(每个属性-值对构成一条声明,declaration)组成,它们指定应该做什么。
2、以下是会被继承的CSS属性,我们按照类型对其进行了分组。这些属性中的大多数都将在本书后续章节进行讲解,不过你可以根据它们的名称猜出其作用。
◎文本
�color(颜色,a元素除外)
�direction(方向)
�font(字体)
�font-family(字体系列)�font-size(字体大小)
�font-style(用于设置斜体)
�font-variant(用于设置小型大写字母)�
font-weight(用于设置粗体)
�letter-spacing(字母间距)
�line-height(行高)
�text-align(用于设置对齐方式)
�text-indent(用于设置首行缩进)
�text-transform(用于修改大小写)
�visibility(可见性)
�white-space(用于指定如何处理空格)�
word-spacing(字间距)
◎列表
�list-style(列表样式)
�list-style-image(用于为列表指定定制的标记)
�list-style-position(用于确定列表标记的位置)
�list-style-type(用于设置列表的标记)
◎表格
�border-collapse(用于控制表格相邻单元格的边框是否合并为单一边框)
�border-spacing(用于指定表格边框之间的空隙大小)
�caption-side(用于设置表格标题的位置)
�empty-cells(用于设置是否显示表格中的空单元格)
◎页面设置(对于印刷物)
�orphans(用于设置当元素内部发生分页时在页面底部需要保留的最少行数)�
page-break-inside(用于设置元素内部的分页方式)
�widows(用于设置当元素内部发生分页时在页面顶部需要保留的最少行数)
◎其他
�cursor(鼠标指针)
�quotes(用于指定引号样式)
3、选择器优先级之一－特殊性优先级
顺序优先级——有时候,特殊性还不足以判断在相互冲突的规则中应该优先应用哪一个。在这种情况下,规则的顺序就可以起到决定作用:晚出现的优先级高
重要性优先级－－如果这还不够,可以声明一条特殊的规则覆盖整个系统中的规则,这条规则的重要程度要比其他所有规则高。也可以在某条声明的末尾加上!important,比如p{ color:orange !important; }(除非是在特殊情况下,否则不推荐使用这种方法)。
4、样式表方式
<1>链接到外部样式表
<2>嵌入样式表
<3>内联样式
有一种使用!important的合理情形。有时网页会包含一些你无法修改的HTML,例如来自第三方服务的新闻源。如果这些HTML中有一些内联样式与你的设计不符,你就可以在自己的样式表中使用!important覆盖这些样式。
5、使用与媒体相关的样式表
有9种可能的输出类型:all、aural、braille、handheld、print、projection、screen、tty和tv。 浏览器对它们的支持程度各不相同(大多只有少量的支持)。实际上,用得上的只有screen和print(或许还应加上all),浏览器对它们的支持情况都很好。另一方面(可以这么说),设备对handheld的支持程度并不高,因此在为移动设备设计时,通常使用screen而不是handheld。projection类型是为投影仪和其他类似的设备准备的,Opera的投影模式Opera Show支持这种类型。
6、选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素。
� <1>元素的类型的名称。
� <2>元素所在的上下文。
� <3>元素的类或ID。
<4>�元素的伪类或伪元素。�
<5>元素是否有某些属性和值。
7、按上下文选择元素
/*是任意article祖先的所有p元素,这是三个中特殊性最低的一个*/
article p{
color: red;
}
/*属于architect类article元素的祖先的任意p元素,是三个中特殊性最高的一个*/
article.architect p{
color: red;
}
/*这个选择器仅选择architect类元素的子元素(而非子子元素、子子子元素等)的p元素。包含于任何其他元素的p元素均不会被选中*/
.architect > p{
color: red;
}
相邻同胞结合符只选择直接跟在同胞p元素之后的元素
.architect p+p{
color: red;
}
8、选择第一个或最后一个子元素 这时,就要用到:first-child和:last-child伪类 <这个选择器会选择作为父元素的第一个子元素的li元素>
li:first-child{
color: red;
}
选择元素的第一个字母或者第一行。 <我们可以分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行> 只有某些特定的CSS属性可以应用于:first-letter伪 元 素, 包 括font、color、background、text-decoration、vertical-align(只要:first-letter不是浮动的)、text-transform、line-height、margin、padding、border、float和clear。
p:first-letter{
color: red;
font-size:1.4em; /* make letter➝larger */
font-weight: bold;
}
9、按状态选择链接元素
CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上,链接是否被访问过,等等。可以通过一系列伪类实现这一特性。
a:link{ //以设置从未被激活或指向,当前也没有被激活或指向的链接的外观
color: red;
}
a:visited{ //visited以设置访问者已激活过的链接的外观
color: orange;
}
a:focus{ //focus,前提是链接是通过键盘选择并已准备好激活的
color:purple;
}
a:hover{ //hover以设置光标指向链接时链接的外观
color: green;
}
a:active{ //active以设置激活过的链接的外观
color: blue;
}
也可以对其他类型的元素使用:active和:hover伪类。例如,设置p:hover{ color: red; }以后,鼠标停留在任何段落上段落都会显示为红色。
10、按属性选择元素
11、指定元素组
12、组合使用选择器
