css选择器

愚公爱上精卫

已于 2023-03-28 15:58:10 修改

阅读量603

点赞数

分类专栏： css 文章标签： css 前端 html

于 2023-03-28 15:49:46 首次发布

本文链接：https://blog.csdn.net/m0_64520392/article/details/129816402

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们将css分为六大类方便记住

1.我们常用的选择器

2.群组选择器

3.关系选择器

4.伪类选择器

5.伪元素选择器（演示）

6.属性选择器

7.css选择器权重

一、我们常用的选择器

1.标签名选择器-----> 语法：标签名{}

例：p{}、div{}、span{}

2.ID选择器-----> 语法：标签名{}

例：#app{} < div id="app"> < /div>

3.类选择器-----> 语法：标签名{}

例：.app{} < div class="app">< /div>

4.通配符选择器-----> 语法：*{}

二、群组选择器

群组选择器很简单，就是使用标签名后面再跟一个标签名，中间使用逗号隔开。

语法：选择器1,选择器2,选择器3,选择器4,{}

列：div,h1,ul,.lip{}

三、关系选择器

关系选择器就比如：父亲与儿子，他们之间存在一个父子关系。

1.后代选择器

2.子代选择器使用大于号来写

例：.app>div{}

3.相邻兄弟选择器是用加号来写，注意：相邻兄弟，会选择到他后面紧挨着的对一个元素。

例：.app+box{}。

4.通用选择器会选择到后面所有的兄弟标签

例：.app~div{}

5.组合使用

例：#app~div+ul>li a{}

四、伪类选择器

:first-child 选中第一个子元素

:last-child 选中最后一个子元素

:nth-child 选中n个子元素关于:nth-child()的特殊值（括号里的内容可以填写一下几种n 第n个 n的范围0到无穷）even或2n 选中偶数位的元素 odd或2n+1 选中奇数位的元素

注：以child结尾的是在元素中选择

:first-of-type 选中相同类型的第一个元素

:last-of-type 选中相同类型的最后一个元素

:nth-of-type 选中相同类型的第n个元素

:not() 否定伪类 --->将符号条件的元素去除

元素的伪类

:link 表示未访问的a标签

:visited 表示访问过的a标签，由于隐私的问题，所以visited这个伪类只能修改链接的颜色

以上两个伪类是超链接独有的

以下两个伪类是所有标签都可以使用的

:hover 经典的拂过显示/隐藏，鼠标移入后元素的状态

:active 鼠标点击后元素的状态

五，伪元素选择器

伪元素是不存在的元素，表示元素的特殊状态

常见的几个伪元素

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

演示：伪类——伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类-伪元素演示</title>
		<style>
			/* 选中第一个子元素 */
			/* ul li:first-child{
				background-color: #f00;
			} */
			/* 选中最后一个子元素 */
			/* ul li:last-child{
				background-color: #f00;
			} */
			/* 选中n个子元素 */
			/* ul li:nth-child(odd){
				background-color: #f00;
			} */
			/* ul li:nth-child(even){
				background-color: #f00;
			} */
			/*选中相同类型的第一个元素 中间要有空格，否则不生效 */
			ul :first-of-type{
				background-color: #f00; 
			}
			/* 选中相同类型的最后一个元素 */
			/* ul :last-of-type{
				background-color: #f00; 
			} */
			 /* 选中相同类型的第n个元素 */
			/* ul :nth-of-type(2n){
				background-color: #f00; 
			} */
			
			/*表示第一个字母 a标签无效 */
			/* ul ::first-letter{
				background-color: #f00; 
			} */
			/* 表示第一行 */
			/* ul ::first-line{
				background-color: #f00; 
			} */
			/* 表示选中的元素 */
			/* ul ::selection{
				background-color: #f00; 
			} */
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>我是<br>开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<li>我是开朗大男孩</li>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<div>哈喽我是div</div>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
				<a href="">我是a标签</a><br>
			</ul>
			
		</div>
	</body>
</html>