CSS3高级选择器
CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说
为了更直观的了解 我们以这段为实例 来进行操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>第一个测试标题</li>
<li>第二个测试标题</li>
<li>第三个测试标题</li>
<li>第四个测试标题</li>
<li>第五个测试标题</li>
</ul>
</body>
</html>
:nth-of-type(n) 选择属于其父元素第n个元素的每个元素。
和这个类似的是 :first-of-type和:last-of-type 分别是选择第一个元素和最后一个元素
DEMO:
<style>
li:nth-of-type(3){ /*选择第3个li元素*/
background-color: #00b3ee;
}
li:first-of-type{ /*选择第一个li元素*/
background-color: #ee1200;
}
li:last-of-type{ /*选择最后一个li元素*/
background-color: #00ee0f;
}
</style>
:before 在元素内容前面添加内容
:after 在元素内容后面添加内容
这两个元素类似于:hover 但是他们不是鼠标悬浮 而是利用content属性添加内容
需要注意的是 用css添加的内容不能被选中 也不能被js获取 显示成
这些内容属于css样式类型的
DEMO:
li:before{
content: '在前面添加内容 ';
}
li:after{
content: ' 在后面添加的内容';
}
:focus 这个也类似于我们常用的:hover 用来动态选择获取焦点的元素
DEMO:别如获取焦点的input框改变背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:focus{
background-color: #00b3ee;
}
</style>
</head>
<body> 输入框1：<input type="text"><br>
输入框2：<input type="text">
</body>
</html>
:nth-child(n) 选取每个父元素的第n个子元素
:nth-last-child(n) 选取每个父元素从后向前数的第n个元素
:last-child 选择每个父元素的最后一个子元素
注意 这个选择器慎用 因为选择面太大 不好控制
DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:not(p){
border:solid red 1px;
}
</style>
</head>
<body>
<div>
<p>我是P元素</p>
<p>我是P元素</p>
<p>我是P元素</p>
<span>我不是p元素 我是span元素</span>
<p>我是P元素</p>
</div>
</body>
</html>
CSS3高级选择器的更多相关文章
- css3的那些高级选择器二
在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...
- css3的那些高级选择器一
css大家都不陌生了,从1996年12月css1正式推出,经历了1998年5月css2,再到2004年2月css2.1,最后一直到2010年推出的css3.css的推出给web带来巨大 的改变,使我们 ...
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- day40 css高级选择器
一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...
- CSS系列：CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS3常用选择器（三）
在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...
- CSS3 ::selection选择器
一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...
- JQuery_高级选择器
在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...
随机推荐
- Java中的条件编译（转）
源:Java中的条件编译 一直以来,不知道怎么在Java中实现像C/C++一样的#ifdef...#endif这样的预编译宏,致使Java代码中一直用if判断,刚好刚才看到了解决办法,记录一下. C/ ...
- iOS自定义字体及类目 分类： ios技术 2015-05-15 16:34 195人阅读 评论(0) 收藏
1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...
- java实现FFT变换（转）
源:java实现FFT变换 /************************************************************************* * Compilati ...
- IOS开发－ObjC－NSDictionary
OC中Foundation框架中有字典类,字典分不可变字典(NSDictionary)和可变字典(NSMutableDictionary),它们的使用如下: 不可变字典: //------------ ...
- jdk1.8中的for循环
jdk1.8 从语法角度,感觉发生的变化还是蛮大的.在此记录一下. for 循环 public static void main(String[] args) { List<Animal> ...
- iOS 之 网络 NSURLSession
NSURLSession相比NSURLConnection功能更强大,是更上层的网络封装.相比而言,普通应用场景下NSURLSession没有什么优势,但是,在程序切换到后台的情况下,NSURLSes ...
- Python3基础 pop() 删除 键为指定值的项
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- 连接linux主机
需要工具:putty PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件 远程连接Linux云服务器-命令行模式 1.远程连接工具.目前Linux远程连接工具有很多种,您 ...
- iOS 准备
iOS 编程知识点 iOS 基础知识点 iOS 之 系统机制 Xcode 使用技巧 Mac 使用技巧 iOS 之 英语 iOS 之 编外知识点 iOS 知识库链接
- PHP格式化字符串函数 sprintf()
定义和用法 sprintf() 函数把格式化的字符串写入一个变量中. 语法 sprintf(format,arg1,arg2,arg++) 参数 描述 format 必需.转换格式. arg1 必需. ...