css常用选择器
一、标签选择器
哈哈哈
h3 {
color: red;
}
二、id选择器-不能重复
嚯嚯
#huohuo {
color: black;
}三、类选择器-可以重复
1、单个class
哈哈哈
.haha {
color: red;
}
2、多个class
（1）情况一
哈哈哈
.aa.bb {
color: red;
}
只有class同时匹配到.aa.bb才显示红色，中间不能有空格
（2）情况二
喔喔
.aa .bb {
color: red;
}
aa下面的bb会匹配到，中间要有空格。
四、后代选择器
喔喔1
喔喔1
喔喔2
.aa h3 {
color: red;
}
表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3 { }
后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。
五、交集选择器
哈哈哈1
哈哈哈2
h3.aa {
color: red;
}这样上面的两个全是红色的了，即是h3又是aa的会被选择，交集选择器没有空格。
六、并集选择器
哈哈哈
啦啦啦
呜呜呜
h3,p {
color: red;
}h3和p标签都是红色。
七、通配符
* {
color: red;
}
哈哈哈
啦啦啦
呜呜呜
匹配到所有的数据，都红了，效率比较低，不能使用。
八、儿子选择器
IE7兼容，IE6不兼容。
111
222
- 1
- 2
div > p {
color: red;
}1，2不变，不是div的儿子，111，222变红，是他的儿子，注意和后代选择器不同。
九、序选择器
IE8开始兼容
- 1
- 2
- 3
- 4
1、选择第一个
ul li:first-child {
color: red;
}第一个li元素变红其他不变。
2、选择最后一个
ul li:last-child {
color: red;
}
最后一个变成红色。
3、选择任意一个
ul li:nth-child(3) {
color: red;
}第三个变成红色。
ul li:nth-child(2n+1) {
color: red;
}奇数变红。
兼容的解决方案：自己写类名，使用类选择器
十、下一个兄弟选择器
IE7开始兼容，IE6不兼容
1
2
3
4
h3 + p {
color: red;
}选择的时候h3后面紧跟着的兄弟
十一、伪类选择器
1、a标签常用的伪类
-
:link “链接”：超链接点击之前
-
:visited “访问过的”：链接被访问过之后
-
:hover “悬停”：鼠标放到标签上的时候
-
:active “激活”： 鼠标点击标签，但是不松手时
注意，需要按照顺序来a:link ，a:visited，a:hover ，a:active，否则有问题。
2、::first-line
哈哈哈哈哈哈哈
p::first-line {
color: red;
}
第一行选择。
3、::first-letter
p::first-letter {
color: red;
}第一个字母/文字选中为红色。
4、::before和::after
- ::before：在某个元素之前插入一些内容。
- ::after：在某个元素之后插入一些内容。
content: ' ';在这两个属性是必须的 --required。
img组件使用这两个不太好使。
哈哈哈哈哈哈哈
p::after {
content: '啦啦啦';
}
伪类预伪元素的特效以及区别：
- 伪类本质上是为了弥补常规css选择器的不足，以便于获取更多信息。
- 伪元素本质上是创建了有内容的虚拟容器。
- css3中伪类和伪元素的语法不同。
- 可以同时使用多个伪类，但是只能同时使用一个伪元素。