CSS3新增选择器

都知道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:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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">SVGa>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>

上面注释逐一放开效果如下:
CSS3新增选择器_第1张图片
CSS3新增选择器_第2张图片
CSS3新增选择器_第3张图片

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的元素,且该元素不包含子元素。

实例效果如下


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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>1111td>
			<td>2222td>
			<td>3333td>
			<td>4444td>
		tr>
		<tr>
			<td>1111td>
			<td>2222td>
			<td>3333td>
			<td>4444td>
		tr>
		<tr>
			<td>1111td>
			<td>2222td>
			<td>3333td>
			<td>4444td>
		tr>
		<tr>
			<td>1111td>
			<td>2222td>
			<td>3333td>
			<td>4444td>
		tr>
	table>
	
body>
html>

CSS3新增选择器_第4张图片
对于上面表格,如果设置结构伪类选择器的效果:

  1. :root

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

    CSS3新增选择器_第5张图片

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

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

    CSS3新增选择器_第6张图片

  3. nth-last-child(2)

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

    CSS3新增选择器_第7张图片

  4. :last-child

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

    CSS3新增选择器_第8张图片
    结构伪类选择器使用方法就是这样。

3.UI伪类选择器

css3中共定义了11中UI伪类选择器。如下:
CSS3新增选择器_第9张图片
实例如下:


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<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="[email protected]">
	form>
body>
html>

CSS3新增选择器_第10张图片
将上面注释逐一放开效果如下:
CSS3新增选择器_第11张图片
CSS3新增选择器_第12张图片
CSS3新增选择器_第13张图片
CSS3新增选择器_第14张图片
CSS3新增选择器_第15张图片

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

你可能感兴趣的:(前端)