CSS常用选择器简析（带简单案例）

1.标签选择器

格式: 标签名称{

属性:值;

}

注意点:

1.标签选择器无论标签多深都能选中。

2. 标签选择器会选择当前页面中所有指定的标签，不能单独选中。

<style>div{width: 300px;background-color: aqua;}</style>
</head>
<body><div>我觉得也是</div><br><div>真的是吗</div>
</body>

2.id选择器

格式: #id名称{

属性:值;

}

注意点:

1.在同一个界面中id的名称最好不要重复

2. id的名称不能以数字开头，不能是HTML标签，只能由字母/数字/下划线 a-z 0-9 _ 组成

<style>#haha{width: 100px;background-color: red;}</style>
</head>
<body><div id="haha">我觉得也是</div><div>haha</div>
</body>

3.类选择器

格式: .类名{

属性:值;

}

注意点:

1.在同一个界面中class的名称是可以重复的

2.名称不能以数字开头，不能是HTML标签，只能由字母/数字/下划线 a-z 0-9 _ 组成

3.标签可以同时绑定多个类名格式: <标签名称 class="类名1 类名2 ...">

<style>.haha{width: 100px;border:2px solid black;}.haha1{background-color: aqua; }</style>
</head>
<body><div class="haha">我觉得也是</div><br><div class="haha haha1">还真是</div>
</body>

4. 后代选择器

格式: 选择器1 选择器2{

属性:值;

}

注意点:

1.中间必须用空格隔开

2.后代不仅仅是儿子, 孙子和重孙子等只要最终是放到指定标签中的都是后代，都会被选中

3.不仅仅可以使用选择器 , 还可以使用标签名称

4.后代选择器可以通过空格一直延续下去

<style>div div{border: 3px solid black;}.haha span{color: red;}</style>
</head>
<body><div>我觉得也是<div>还真是<div class="haha"><a><span>是这样的</span></a> </div></div></div>
</body>

5.子元素选择器

格式: 标签名称1>标签名称2{

属性:值;

}

注意点:

1.子元素选择器之间用>符号连接, 中间不能有空格

1.子元素选择器只会找儿子, 不会找其他被嵌套的标签

3.不仅仅可以使用标签名称, 还可以使用其它选择器

4.子元素选择器也可以通过>符号一直延续下去

<style>div>div{border: 3px solid black;}.haha>span{color: red;}</style>
</head>
<body><div>我觉得也是<div class="haha"><a><span>是这样的</span></a> </div></div>
</body>

6.序选择器（结构伪类选择器）

1.同级别中的第几个（只看顺序不看类型）

:first-child 选中同级别中的第一个标签,只看顺序不看类型，如果设定的位置上不是所设定的类型那就无法选中。

        <!-- 正常情况 -->
<style>li:first-child{color: aqua;}</style></head><body><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body><!-- 在前面加一个a标签 --><style>li:first-child{color: aqua;}</style></head><body><ul><a>打断施法</a><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body>

:last-child 选中同级别中的最后一个标签

<style>li:last-child{color: aqua;}</style></head><body><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body>

:nth-child(n) 选中同级别中的第n个标签（从1开始算）

<style>li:nth-child(3){color: aqua;}</style></head><body><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body><!-- 加个a标签 --><style>li:nth-child(3){color: aqua;}</style></head><body><ul><a>打断施法</a><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body>

以下的同理

:nth-child(odd) 选中同级别中的所有奇数

:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y) x和y是用户自定义的, n是从0开始递增,如(2n+1)分别对应1,3,5.....

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素仅有的一个子元素，仅有一个子元素时生效

2.同级别同类型中的第几个（看顺序也看类型）

:first-of-type 选中同级别中同类型的第一个标签，但可以不用担心其他类型造成的影响。

<style>li:first-of-type{color: aqua;}</style></head><body><ul><a>打断施法</a><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li></ul></body>

:last-of-type 选中同级别中同类型的最后一个标签

<style>li:last-of-type{color: aqua;}</style></head><body><ul><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li> <a>打断施法</a></ul></body>

:nth-of-type(n) 选中同级别中同类型的第n个标签

<style>li:nth-of-type(2){color: aqua;}</style></head><body><ul><a>打断施法</a><li>第1个</li><li>第2个</li><li>第3个</li><li>第4个</li><li>第5个</li>  </ul></body>

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素的特定类型的唯一子元素