CSS3最常用选择器总结笔记

一、基础选择器

1.1 继承 (0000)

<style>div{color: red;}</style>
<div><p>继承0000</p></div>

1.2 元素选择器(0001)

<style>div{color: red;}</style>
<div>元素选择器0001</div>

1.3 类选择器(0010)

<style>.cl{color: red;}</style>
<div class="cl">类选择器0010</div>

1.4 ID选择器(0100)

<style>#id{color:red;}</style>
<div id="id">ID选择器0100</div>

1.5 行内样式(1000)

<div id="id" style="color:red;">行内样式1000</div>

1.6 !important(无穷大)

<style>#id{color:red !important;}</style>
<div id="id">!important(无穷大)</div>

二、属性选择器(0010)

2.2 E[att] 选择具有att属性的E元素

<style>div[id]{color: red;}</style>
<div id="demo">demo</div>

2.2 E[att=“val”] 选择具有att属性的E元素且属性值等于val的元素

<style>div[id="demo"]{color: red;}</style>
<div id="demo">demo</div>

2.3 E[att^=“val”] 选择具有att属性的E元素且值以val开头的元素

<style>div[id^="demo"]{color: red;}</style>
<div id="demo1">demo1</div>
<div id="demo2">demo2</div>
<div id="demo3">demo3</div>

2.4 E[att$=“val”] 选择具有att属性的E元素且值以val结尾的元素

<style>div[id$="demo"]{color: red;}</style>
<div id="o_demo">o_demo</div>
<div id="t_demo">t_demo</div>
<div id="s_demo">s_demo</div>

2.5 E[att*=“val”] 选择具有att属性的E元素且值含有val的元素

<style>div[id*="demo"]{color: red;}</style>
<div id="o_demo_o">o_demo_o</div>
<div id="t_demo_t">t_demo_t</div>
<div id="s_demo_s">s_demo_s</div>

三、结构伪类选择器(0010)

3.1 E:first-child 匹配父元素中第一个子元素E

<style>ul li:first-child{color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.2 E:last-child 匹配父元素中最后一个元素E

<style>ul li:last-child{color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.3 E:nth-child(n) 匹配父元素中的第n个元素E

n可以是公式，数字，关键字，even(偶数) , odd(奇数)

<style>ul li:nth-child(even){color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.4 E:first-of-type 指定类型E的第一个

<style>ul li:first-of-type{color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.5 E:last-of-type 指定类型E的最后一个

<style>ul li:last-of-type{color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.6 E:nth-of-type 指定类型E的第n个

n可以是公式，数字，关键字，even(偶数) , odd(奇数)

<style>ul li:nth-of-type(even){color: red;}
</style>
<ul><li>孩子1</li><li>孩子2</li><li>孩子3</li><li>孩子4</li>
</ul>

3.7 E:nth-child与E:nth-of-type的区别

(1) nth-child 对父元素里面所有孩子排序选择(序号固定) 先找到第n个孩子，然后看看是否和E匹配。
(2) nth-of-type对父元素里面指定子元素进行排序选择，先对E元素进行排序后，在去匹配第几个。

3.8 E:nth-of-last-type 和 E:nth-last-child

跟nth-of-last-type和nth-last-child一样，只不过顺序是反过来。

3.9伪类选择器(0010)

3.9.1 链接选择器

（1）a:link 选择所有未被访问的链接
            （2）a:visited 选择所有已被访问的链接
            （3）a:hover /选择鼠标指针位于其上的链接
            （4）a:active 选择活动链接(鼠标按下未弹起的链接)

3.9.2 focus伪类选择器(用于获取焦点的表单元素)

(1) input:focus{background-color:red}

3.9.3 p伪类选择器

（1）p:letter 选择每个p元素中的首字母
（2）p:first 选择每个p元素中的首行

四、伪元素选择器(0001)

4.1 ::before 在元素内部的前面插入内容

4.2 ::after 在元素内部的后面插入内容

4.3 注意点：

（1）before和after创建一个元素，他们属于行内元素
（2）新创建的这个元素在文档树中是找不到的。
（3）before和after必须有content属性

五、复合选择器(权重叠加)

5.1后代选择器

<style>.demo p{color: red;</style>
<div class="demo"><div><p>孩子一</p></div><p>孩子二</p><p>孩子三</p><div id="demo1"><div><p>孩子四</p></div></div>
</div>
<!--只要属于父容器(demo)中的后代，不管嵌套的多深，都会被选中-->

5.2子选择器

<style>.demo>p{color: red;</style>
<div class="demo"><div><p>孙子</p></div><p>孩子一</p><p>孩子二</p><div id="demo1"><div><p>曾孙子</p></div></div>
</div>
<!--选择父容器(demo)中的孩子-->

5.3并集选择器

<style>.demo,p{color: red;</style>
<div class="demo">demo</div>
<p>demo</p>

欢迎访问我的个人博客