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 ...
随机推荐
- Lambda表达式例子
转 Lambda表达式例子 1.Java8 新特性介绍 写java的同学对java8肯定知道 那么java8到底有哪些特性呢,总结如下: Lambda表达式 函数式接口 Stream Optional ...
- C语言－基础
程序是为了让计算机完成某项任务而编写的逐条执行的指令序列. C语言的特点是:结构化,语言简洁,功能强大,移植性好. 因为移植性好,所以大多数单片机如51.stm32,msp430,等众多嵌入式微处理器 ...
- 获取IIS版本
近日,有一项目要分别获取iis6.0和7.5,然后对进程进行操作~ 研究良久,有以下办法获取iis版本. 代码: DirectoryEntry getEntity = new DirectoryEnt ...
- java 服务
2014年2月27日 10:30:55 学习 Java Service Wrapper 2014年2月27日 14:14:14太复杂了,以后研究吧. ###### 2014年2月27日 14:14:2 ...
- bzoj3942——2016——3——15
题目大意: 3942: [Usaco2015 Feb]Censoring Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 220 Solved: 11 ...
- VC创建多级目录
BOOL ForceCreateDirectory(string strDir) { BOOL bRet = FALSE; //确保以"\"结尾,以创建最后一个目录 ...
- 1.1.2.托管对象模型（Core Data 应用程序实践指南）
托管对象模型即对象图,可以看成实体类的描述,规定了数据字段. 要想创建托管对象模型,需生成NSManagedObjectModel类的实例.
- 使用（Drawable）资源——LayerDrawable资源
与StateListDrawable有点类似,LayerDrawable也可包含一个Drawable数组,因此系统将会按这些Drawable对象的数组顺序来绘制它们,索引最大的Drawable对象将会 ...
- 如何在asp.net页面使用css和js
一.如何在asp.net页面中使用css1.可以直接写在需要样式控制的控件里 例如:<div style="border:#ff6100 1px solid">< ...
- C# 汉字转拼音 将中文转换成拼音
//建立一个公共类,用于转换汉字 public class ChnToPh { //定义拼音区编码数组 private static int[] getValue = new int[] { -,-, ...