提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

CSS3新增选择器

css3 新增 选择器
2023-06-13 09:12:32 时间

大家好，又见面了，我是你们的朋友全栈君。

都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。下面介绍：

  1. css3属性选择器
  2. css3结构伪类选择器
  3. css3 UI伪类选择器

1.css3属性选择器

属性选择器语法如下（E表示标签）：

选择器

功能描述

E[attribute]

选取带有指定属性的元素

E[attribute=value]

选取带有指定属性和值的元素

E[attr^=“val”]

匹配属性attr的值以指定值”val”开头的每个元素

E[attr$=“val”]

匹配属性attr的值以指定值”val”结尾的元素

E[attr*=“val”]

匹配属性attr的值包含字符串”val”元素

例如如下实例，查找属性值href以http开头的元素，并使其背景颜色为yellow：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> p{ 
     margin: 10px; } /*查找含有href属性为http的a元素*/ /*a[href^="http"]{ background-color: yellow; }*/ /*a[href$="pdf"]{ background-color: pink; }*/ /*a[href*="age"]{ background-color: orange; }*/ </style>
</head>
<body>
	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
	<p><a href="http://www.baidu.com/name.svg">SVG</a></p>
	<p><a href="http://www.baidu.com/name.ppt">PPT文件</a></p>
	<p><a href="http://www.baidu.com/age.xls">age.XLS文件</a></p>
	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
	<p><a href="www.baidu.com/name.pdf">PDF文件</a></p>
	<p><a href="http://www.baidu.com/age.gif">age.GIF文件</a></p>
	<p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
</body>
</html>

上面注释逐一放开效果如下：

2.css3结构伪类选择器

结构伪类选择器是css3中新增的选择器，主要作用是通过文档结构的先后关系来匹配特定的元素，从而减少结构代码中ID属性和class属性的定义，使得文档更简洁。

结构伪类选择器语法： 下方语法中n不能以0开头，123…，也可以是其他关键字如odd奇数、even偶数。也可以使用2n表示偶数，2n+1表示奇数。

选择

功能描述

:root

选择匹配文档的根元素

E:nth-child(n)

选择所有在其父元素中的第n个位置的匹配E的子元素

E:nth-last-child(n)

选择所有在其父元素中倒数第n个位置的匹配E的子元素

E:nth-of-type(n)

选择所有在其父元素中同类型第n个位置的匹配E的子元素

E:nth-last-of-type(n)

选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素

E:last-child

选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同

E:fisrt-child

选择位于其父元素中第一个位置，且匹配E的子元素 ，与E:nth-child(1)等同

E:first-of-type

选择在其父元素中匹配E的第一个同类型子元素

E:last-of-type

选择在其父元素中匹配E的最后一个同类型子元素

E:only-child

选择在其父元素中只包含一个子元素，且该子元素匹配E。

E:only-of-type

选择在其父元素中只包含一个同类型子元素，且该子元素匹配E。

E:empty

选择匹配E的元素，且该元素不包含子元素。

实例效果如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> th{ 
     height: 30px; } td{ 
     height: 20px; } td, th{ 
     border: 1px solid #cad9ea; padding: 0 1em 0; } /*匹配文档的根元素*/ /*:root{ background-color: red; }*/ /*匹配在其父元素中第二个位置匹配tr的子元素*/ /*tr:nth-child(2){ background-color: #ff0000; }*/ /*在其父元素table中倒数第2个位置的匹配tr的子元素*/ /*tr:nth-last-child(2){ background-color: yellow; }*/ /*每一个tr中的最后一个td*/ /*td:last-child{ background-color: blue; }*/ </style>
</head>
<body>
	<table>
		<tr>
			<th>姓名</th>
			<th>年龄</th>
			<th>班级</th>
			<th>成绩</th>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
			<td>4444</td>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
			<td>4444</td>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
			<td>4444</td>
		</tr>
		<tr>
			<td>1111</td>
			<td>2222</td>
			<td>3333</td>
			<td>4444</td>
		</tr>
	</table>
	
</body>
</html>

对于上面表格，如果设置结构伪类选择器的效果：

:root

/*匹配文档的根元素*/
:root{ 
     
		background: red;
	}

:nth-child(2)：父元素table中第二个配置tr的

/*匹配在其父元素中第二个位置匹配tr的子元素*/
tr:nth-child(2){ 
     
	background-color: #ff0000; 
}

nth-last-child(2)

/*在其父元素table中倒数第2个位置的匹配tr的子元素*/
tr:nth-last-child(2){ 
     
	background-color: yellow;
}

:last-child

/*每一个tr中的最后一个td*/
td:last-child{ 
     
	background-color: blue;
}

结构伪类选择器使用方法就是这样。

3.UI伪类选择器

css3中共定义了11中UI伪类选择器。如下：

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> /*input[type="text"]:enabled{ background-color: #ffff00; }*/ /*input[type="text"]:disabled{ background: pink; }*/ /*input:required{ background: #ff5aba; }*/ /*input:read-only{ background: blue; }*/ /*::selection{ color: red; }*/ </style>
</head>
<body>
	<form action="#" name="myform" method="get">
		name: <input type="text" name="xiaohua"><br>
		country: <input type="text" disabled="disabled" value="china"><br>
		<input type="radio" checked="checked" value="male">男<br>
		<input type="radio" value="female">女<br>
		
		<p>普通的input元素:<br><input value="hello"></p>

		<p>只读的input元素:<br><input readonly="" value="hello"></p>
		
		<div>这是div元素的文本：</div>
		<input type="number" min="1" max="10" value="6">
		<p>可选择的input元素: <br><input type="text"></p>

		<p>必填的input元素: <br><input required type="text"></p>
		
		<input type="email" value="w1418899@163.com">
	</form>
</body>
</html>

将上面注释逐一放开效果如下：

每天进步一点点、充实一点点、加油！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/157550.html原文链接：https://javaforall.cn

相关文章