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中伪类和伪元素的语法不同。
• 可以同时使用多个伪类，但是只能同时使用一个伪元素。