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>

欢迎访问我的个人博客