【css3】02-css3新特性之选择器篇

目录

[1 属性选择器](#1 属性选择器)

[2 结构伪类选择器](#2 结构伪类选择器)

[3 其他选择器](#3 其他选择器)

:target和::selection

::first-line和::first-letter

[4 伪类和伪元素的区别](#4 伪类和伪元素的区别)

伪类(Pseudo-classes)

伪元素(Pseudo-elements)

伪类和伪元素的区别


1 属性选择器

☞ 属性选择器:

  • 属性名=值\] {}

  • 属性名\^=值\] {} 以值开头

  • 属性名$=值\] {} 以值结束

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* p 标签 class属性值以o结尾 */ /* p[class$="o"] { color: red; } */
    复制代码
    	/* p标签下匹配对应的属性class */
    	/* p[class] {
    		color: red;
    	} */
    
    	/* p标签下  class属性值以o开头 */
    	p[class^="o"] {
    		color: red;
    	}
    
    	/* p标签下  class属性值包含 */
    	p[class*="o"] {
    		color: red;
    	}
    </style>
    </head> <body>
    文字

    段落

    段落2

    </body> </html>

2 结构伪类选择器

☞ 结构伪类选择器:

  • :first-child {} 选中父元素中第一个子元素
  • :last-child {} 选中父元素中最后一个子元素
  • :nth-child(n) {} 选中父元素中正数第n个子元素
  • :nth-last-child(n) {} 选中父元素中倒数第n个子元素

样例说明:li:first-child {} 假若li不是父元素里的第一个元素,则不会生效

复制代码
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* li {
			color: red;
		}
		 */

		/* 第一个子元素是li */
		/* li:first-child {
			 color: red;
		}
		
		li:last-child {
			color: red;
		} */

		/* li:nth-child(3) {
			color: red;
		} */

		/* li:nth-last-child(3) {
			color: red;
		} */

		li:nth-child(odd) {
			color: red;
		}
	</style>
</head>

<body>

	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>
</body>

备注:

1、n 的取值大于等于0时,n 可以设置预定义的值:

  • odd[表示选中奇数位置的元素]
  • even[表示选中偶数位置的元素]

2、 n 可以是一个表达式:

an+b的格式

3 其他选择器

☞ 其他选择器:

  • :target 被锚链接(a标签)指向的时候会触发该选择器
  • ::selection 当(文本...)被鼠标选中的时候显示该样式
  • ::first-line 选中第一行
  • ::first-letter 选中第一个字符

:target和::selection

效果:1 是run执行后的初始页面

2 是点击了"找第5行的p"触发了:target样式效果

3 是鼠标选中文字,触发::selection 样式效果

代码:

复制代码
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/* 被锚链接指向的时候会触发该选择器 */
		p:target {
			color: red;
		}


		/* 当使用鼠标选中的时候样式 */
		p::selection {
			color: red;
			background-color: pink;
		}
	</style>
</head>

<body>

	<p>文字</p>
	<p>文字</p>
	<p>文字</p>
	<p>文字</p>
	<p id="test">文字</p>
	<p>文字</p>
	<p>文字</p>
	<p>文字</p>

	<a href="#test">找第5行的p</a>
</body>

::first-line和::first-letter

样例:第一行设置为红色;第一个字母设置为蓝色

代码:

复制代码
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.one {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			word-break: break-all;
		}

		.one:first-line {
			color: red;
		}

		.one:first-letter {
			font-size: 50px;
			color: blue;
		}
		
/* 
		.one::before {
			content: "";
			width: 100px;
			height: 100px;
			background-color: pink;
			display: block;
		}
 */

	</style>
</head>
<body>
	<div class="one">
		asdfadfafdasfasfdasdfafdasfdadsfasdfafdasdfasdfasdfafdadfafdasdfajsdflkajlfkjafdlkjaslfjalkdsfjalsjfalkdsjfalsfd
	</div>
</body>

4 伪类和伪元素的区别

在CSS3中,伪类(Pseudo-classes)和伪元素(Pseudo-elements)是两个不同的概念,尽管它们有时候在名称和用法上可能有些相似,但它们各自有不同的目的和功能。

伪类(Pseudo-classes)

伪类用于选择处于特定状态的元素。它们以冒号(:)开头,并且用于选择页面上处于特定状态的元素,而不是基于元素的名称、类、ID或属性。例如:

  • :hover:用户悬停在元素上时的样式。
  • :active:元素被激活(如鼠标点击但尚未释放)时的样式。
  • :visited:用户已访问的链接的样式。
  • :first-child:作为其父元素的第一个子元素的样式。
  • :nth-child(n):作为其父元素的第n个子元素的样式。
  • :odd:even:用于选择列表中奇数或偶数位置的元素(与 :nth-child(odd):nth-child(even) 类似)。

伪元素(Pseudo-elements)

伪元素用于在元素的内容前后插入内容,或者选择元素的特定部分。它们也以冒号(:)开头,但紧接着是一个双冒号(::),以区分伪类和伪元素。但在CSS2.1和更早的规范中,伪元素仅使用单冒号。为了向后兼容,大多数浏览器在单冒号和双冒号之间都有很好的支持。但在CSS3中,推荐使用双冒号来明确表示伪元素。

一些常见的伪元素包括:

  • ::before:在元素的内容之前插入内容。
  • ::after:在元素的内容之后插入内容。
  • ::first-letter:选择文本块的首字母。
  • ::first-line:选择文本块的第一行。
  • ::selection:用户用鼠标或其他指针设备选择的元素部分。

伪类和伪元素的区别

  • 用途:伪类用于选择处于特定状态的元素,而伪元素用于在元素的内容前后插入内容或选择元素的特定部分。
  • 语法 :虽然两者都以冒号开头,但伪元素通常使用双冒号(::),以与伪类区分。
  • 元素数量 :伪类可以应用于一个或多个元素,而伪元素(如::before::after)通常只与一个元素关联。
  • 对DOM的影响:伪类不添加新的元素到DOM树中,而伪元素则实际上在DOM树中添加了一个虚拟的元素。
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip