选择器

选择器

常用选择器

1. 类选择器

类选择器根据类名来选择，前面以“.”来标志

例：

.demoDiv {
color:#FF0000;
}

2. 标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些
标签采用相应的CSS样式

在style.css文件中对p标签样式的声明如下：

p {
font-size:12px;
background:#900;
color:090;
}

3. ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID
来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次

前面以”#”号来标志，在样式里面可以这样定义：

#demoDiv {
color:#FF0000;
}

4. 伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。
这时候我们就需要用到伪类了。以下是链接应用的伪类定义

选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

a:link {
color:#999999;
}

a:visited {
color:#FFFF00;
}

a:hover {
color:#006600;
}

input:focus {
background:# E0F1F5;
}

5. 通配符选择器

通配符选择器用*来表示。例如：

*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px

6. 伪元素选择器

before

after

选择器的组合方式

1. 后代选择器(以空格 分隔)

后代选择器用于选取某元素的后代元素

div p {
background-color:yellow;
}

2. 子元素选择器(以大于 > 号分隔）

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素
子元素的元素

div > p {
background-color:yellow;
}

3. 相邻兄弟选择器（以加号 + 分隔）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后
的元素，且二者有相同父元素

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使
用相邻兄弟选择器（Adjacent sibling selector）

div + p {
background-color:yellow;
}

4. 普通兄弟选择器（以波浪号 ～ 分隔）

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素

div~p {
background-color:yellow;
}