css常用选择器

一、标签选择器

<h3>哈哈哈</h3>

h3 {
    color: red;
}

二、id选择器-不能重复

<h3 id="huohuo">嚯嚯</h3>

#huohuo {
    color: black;
}

三、类选择器-可以重复

1、单个class

<h3 class="haha">哈哈哈</h3>

.haha {
    color: red;
}

2、多个class

（1）情况一

<h3 class="aa bb">哈哈哈</h3>

.aa.bb {
   color: red;
}

只有class同时匹配到.aa.bb才显示红色，中间不能有空格

（2）情况二

<div class="aa">
    <h3 class="bb">喔喔</h3>
</div>

.aa .bb {
    color: red;
}

aa下面的bb会匹配到，中间要有空格。

四、后代选择器

<div class="aa">
    <div class="xx">
        <h3>喔喔1</h3>
    </div>
    <h3>喔喔1</h3>
    <p>喔喔2</p>
</div>

.aa h3 {
    color: red;
}
</style>

        表示class为.aa的后代p变成红色，即喔喔1变成红色，中间使用空格，如果有多个应使用多个额空格隔开：.aa .xx h3 { }

        后代选择器不需要选择每一个节点，只需要选择关键的几个节点就可以达到效果。

五、交集选择器

<h3 class="aa">哈哈哈1</h3>
<h3 class="aa vv">哈哈哈2</h3>

h3.aa {
    color: red; 
}

这样上面的两个全是红色的了，即是h3又是aa的会被选择，交集选择器没有空格。

六、并集选择器

<h3 class="aa">哈哈哈</h3>
<p>啦啦啦</p>
<h1>呜呜呜</h1>

h3,p {
   color: red;
}

h3和p标签都是红色。

七、通配符

* {
   color: red;
}

<h3 class="aa">哈哈哈</h3>
<p>啦啦啦</p>
<h1>呜呜呜</h1>

匹配到所有的数据，都红了，效率比较低，不能使用。

八、儿子选择器

IE7兼容，IE6不兼容。

<div>
    <p>111</p>
    <div>
        <p>222</p>
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</div>


div > p {
    color: red;
}

1，2不变，不是div的儿子，111，222变红，是他的儿子，注意和后代选择器不同。

九、序选择器

IE8开始兼容

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

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不兼容

<h3>1</h3>
<p>2</p>
<p>3</p>
<p>4</p>

h3 + p {
    color: red;
}

选择的时候h3后面紧跟着的兄弟

十一、伪类选择器

1、a标签常用的伪类

• :link “链接”：超链接点击之前

• :visited “访问过的”：链接被访问过之后

• :hover “悬停”：鼠标放到标签上的时候

• :active “激活”： 鼠标点击标签，但是不松手时

注意，需要按照顺序来a:link ，a:visited，a:hover ，a:active，否则有问题。

2、::first-line

<p>
    哈哈哈哈</br>哈哈哈
</p>

p::first-line {
    color: red;
}

第一行选择。

3、::first-letter

p::first-letter {
    color: red;
}

第一个字母/文字选中为红色。

4、::before和::after

• ::before：在某个元素之前插入一些内容。
• ::after：在某个元素之后插入一些内容。

content: ' ';在这两个属性是必须的 --required。

img组件使用这两个不太好使。

<p>
    哈哈哈哈</br>哈哈哈
</p>

p::after {
    content: '啦啦啦';
}

伪类预伪元素的特效以及区别：

• 伪类本质上是为了弥补常规css选择器的不足，以便于获取更多信息。
• 伪元素本质上是创建了有内容的虚拟容器。
• css3中伪类和伪元素的语法不同。
• 可以同时使用多个伪类，但是只能同时使用一个伪元素。