CSS常见选择器

基础信息

基础选择器

p {
    color: blue;
}
div {
    color: blue;
}

.name {
    color: blue;
}

#id {
    color: blue;
}

* {
    color: blue;
}

注意：
id选择器和类选择器的优先级高于通配符选择器。所以在样式修改中可以用通配符选择器进行大的框架设定，使用id选择器或者类选择器进行微调。

复合选择器

以下用名代替基础选择器名

p,div,span {
    color: blue;
}
p,
div,
span {
    color: blue;
}

ul li {
    color: blue;
}
div ul li {
    color: blue;
}

ul>li {
    color: blue;
}

a:link {
    color: blue;//未访问链接变蓝
}
a:visited {
    color: blue;//已经访问过的链接变蓝
}
a:hover {
    color: blue;//鼠标悬停变蓝
}
a:active {
    color: blue;//鼠标按下未弹起，变蓝
}

//被选中的表单字体会变蓝(获取焦点的选择器)
input:focus {
    color: blue;
}

注意：

1. 并集选择器建议使用第二种方式写，这样的可读性会更好。
2. 后代选择器可以接很多的后代，理论上不限个数，可以一堆基础选择器接一起。
3. 子类选择器只能由两个基础选择器组成，不能像后代选择器那样串一堆哦。
4. 伪类选择器就是用 ‘ : ’来对鼠标的行为进行监听和操作。