最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
选择器分组
假设希望 h2 元素和段落都有灰色。h2, p {color:gray;}
可以将任意多个选择器分组在一起,用逗号分割开,
通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。如:* {color:red;}
声明分组
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。没有分号可能会把后边的代码忽略。
CSS 类选择器
我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器
*.important {color:red;}
所有calss=”important”的元素都按照important的方式来。
结合元素选择器
p.important {color:red;}
p.important 解释为:“其 class 属性值为 important 的所有段落”。
CSS 多类选择器
一个 class 值中可能包含一个词列表,各个词之间用空格分隔
我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
使用:<p class="important warning"></p>
CSS ID 选择器
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号
ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。
<p id="intro">This is a paragraph of introduction.</p>
ID 选择器会使用一次,而且仅一次。ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表.
类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。
简单属性选择
如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器
*[title] {color:red;}
a[href] {color:red;}
a[href][title] {color:red;}
根据具体属性值选择
链接指向一定的服务器的链接变色
a[href=”http://www.w3school.com.cn/”][title=”W3School”] {color: red;}
格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表,匹配就可能出问题。
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配,p.important 和 p[class=”important”] 应用到 HTML 文档时是等价的。
子串匹配属性选择器
特定属性选择类型
*[lang|=”en”] {color: red;}这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:h1 em {color:red;}
CSS 伪类
伪类的语法:selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用:selector.class : pseudo-class {property: value}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示:1.在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。2.在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。3.伪类名称对大小写不敏感。