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

news2024/10/6 10:34:08

1 属性选择器

2 结构伪类选择器

3 其他选择器

:target和::selection

::first-line和::first-letter

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>
	<div class="one">文字</div>
	<p class="one">段落</p>
	<p class="two">段落2</p>
</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树中添加了一个虚拟的元素。