CSS3新增选择器

CSS3新增选择器都知道css有三个简单常用的选择器,#id、class和标签选择器。但是css3又新增了一些选择器,可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码,便捷开发。下面介绍:css3属性选择器css3结构伪类选择器css3UI伪类选择器1.css3属性选择器属性选择器语法如下(E表示标签):选择器功能描述E[attribute]选…

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

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

在这里插入图片描述
对于上面表格,如果设置结构伪类选择器的效果:

  1. :root

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

    在这里插入图片描述

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

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

    在这里插入图片描述

  3. nth-last-child(2)

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

    在这里插入图片描述

  4. :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>

在这里插入图片描述
将上面注释逐一放开效果如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157550.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 云漫圈 | 学Python还是Java, 8张漫画带你全面分析

    云漫圈 | 学Python还是Java, 8张漫画带你全面分析戳蓝字“CSDN云计算”关注我们哦!作者:Leoxin来源:菜鸟学PythonJava和Python两门语言都是目前非常热门的语言,可谓北乔峰南慕容,二者不分上下,棋逢对…

  • CVE-2014-0160:心脏出血(心血)漏洞

    CVE-2014-0160:心脏出血(心血)漏洞0x00漏洞介绍是一个出现在加密程序库OpenSSL的安全漏洞,该程序错误属于缓冲区过读,即可以读取的数据比应该允许读取的还多0x01漏洞成因由于未能在memcpy()调用受害用户输入内容作为长度参数之前正确进行边界检查。攻击者可以追踪OpenSSL所分配的64KB缓存、将超出必要范围的字节信息复制到缓存当中再返回缓存内容,这样一来受害者的内存内容就会以每次64KB的速度进行泄露0x02…

  • 《计算机网络》复习笔记

    《计算机网络》复习笔记《计算机网络》复习笔记本复习笔记基于谢希仁的《计算机网络》第五版教材整理。计算机网络复习笔记绪论1计算机网络2因特网概述3互联网的组成P84计算机网络的类别P175计算机网络的体系结构P25物理层1物理层下的传输媒体2关于信道的几个基本概念3信道复用技术数据链路层1使用点对点信道的数据链路层2点对点协议PPPP703

  • Android开发13——内容提供者ContentProvider的基本使用

    Android开发13——内容提供者ContentProvider的基本使用

  • centos 安装和配置mariadb详细教程[通俗易懂]

    centos 安装和配置mariadb详细教程[通俗易懂]1.安装mariadatabaseCentos8上,默认安装的mariadb服务器版本为:MariaDBCommunityServer10.3dnfinstallmariadb-server命令进行安装就可以了。dnfinstallmariadb-server2.启动mariadatabasesystemctlstartmariadb3.查看mariadatabase运行状态通过命令查看运行数据库的版本:systemctlstat..

  • jboss 配置文件_黑果小兵安装教程

    jboss 配置文件_黑果小兵安装教程一、Jboss下载:  1、点击 http://jbossas.jboss.org/downloads/找到合适的版本下载;  我这里是用的Jboss-as-7.1.1.Final版本,算是比较新的一个版本。    二、Jboss安装:  1、首先将下好的Jboss解压到自己想要存放的位置;  2、配置环境变量(非必要步骤),建议还是将环境变量配好,便于dos中命令操作;   …

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号