CSS3新增的选择器
1. 层次选择器
- 子元素选择器: 只选择子元素 父选择器 > 子选择器
- 后面紧相邻的兄弟元素: 选择器1 + 选择器2
- 后面所有的兄弟元素: 选择器1 ~ 选择器2
2.属性选择器 [属性名]
- 选择具有指定属性名的元素 [属性名]
- 选择具有指定属性名并且属性值为指定 [属性名=属性值]
- 选择具有指定属性名并且属性值中包含某个单词 [属性名 ~= 属性值] 单词与单词之间: 使用空格
- 选择具有指定属性名并且属性值中以某个单词开头: 单词之间使用空格分隔, 是连接符 - 连接的 [属性名 |= 属性值]
- 选择具有指定属性名并且属性值中以某个字符开头: [属性名 ^=值]
- 选择具有指定属性名并且属性值中以某个字符结尾: [属性名 $=值]
- 选择具有指定属性名并且属性值中包含某个字符结尾: [属性名 *=值]
<!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>
3.过滤选择器: :过滤条件
- 选择第一个字符 :first-letter
- 选择第一行 :first-line
- 选择第一个子元素 :first-child 位置的第一个 选择器:first-child: 选择指定第一个子元素选择器 注意: 选择器: 子元素 *
- 选择最后一个子元素 :last-child
<style>
/* odd奇数,oven偶数 */ /* 一个标签内，第一个为p的子元素 */
p:first-child{
background-color: red;
} </style>
</head>
<body>
<div>
<p>div里第一个p</p>
<p>div里第二个p</p>
</div> <p>外面第一个p</p>
<p>外面第二个p</p>
<span>
<p>span里第一个p</p>
</span>
</body>
- 选择的是子元素中某个指定选择器第一个 :first-of-type 类型的第一个 *
- 选择的是子元素中某个指定选择器类型最后一个 :last-of-type
- 选择只有一个子元素 :only-child
- 选择子元素某个类型只有一个 :only-of-type
<style>
/* 每个地方的第一个p */
p:first-of-type{
background-color: red;
}
</style>
</head>
<body>
<div>
<p>div里第一个p</p>
<p>div里第二个p</p>
</div> <p>外面第一个p</p>
<p>外面第二个p</p>
<span>
<p>span里第一个p</p>
</span>
</body>
- 选择第几个子元素 :nth-child(n) , 下标:从1
- 选择倒数第几个子元素 :nth-last-child(n) 下标:从1
- 选择相同类型的第几个子元素 :nth-of-type(n)（常用）
- 选择相同类型的倒数第几个子元素 :nth-last-of-type(n)
input标签中常用的选择器
<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>
CSS3新增的选择器的更多相关文章
- CSS3新增的选择器和属性
<!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...
- CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- CSS系列：CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- 认识CSS3新增选择器和样式
前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...
- CSS3 新增选择器
CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...
- 总结CSS3新特性(选择器篇)
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- h5新增标签及css3新增属性
- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...
随机推荐
- 神奇的background——绘制图形
相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切切.不说这种方式麻烦,有ui给你切好的情况已经不错,没有的就有自己动手.还可能有需要切一整张超大图的情况. ...
- Feign 客户端的使用 二
一.Feign的使用(客户端调用 json/xml格式的接口) 1.服务端接口编写 <parent> <groupId>org.springframework.boot< ...
- 微信小程序之登录连接django，以及用户的信息授权认证
小结: 1 如何自定义组件 - 组件和页面一样,也是由四个文件组成,所以我们自定义组件的时候,模拟pages文件夹,把所有的所有的组件都放在一个文件夹中,每个组件又由一个文件夹包裹,方便管理,在对应目 ...
- 还在使用集合类完成这些功能？不妨来看看 Guava 集合类!!!
日常开发中,小黑哥经常需要用到 Java 提供集合类完成各种需求.Java 集合类虽然非常强大实用,但是提供功能还是有点薄弱. 举个例子,小黑哥最近接到一个需求,从输入一个文档中,统计一个关键词出现的 ...
- DOM解读
DOM解读 DOM概念 - document object model:文档对象模型 操作文档的一套方法,document是一个对象,是dom的顶级对象,属于window的一个对象,并且可以说是最出色 ...
- Java Grammar（二）：运算符
运算符简介 计算机自打诞生以来,用作最多的就是进行计算,而计算离不开运算符,所以运算符在我们的Java语言中的地位举足轻重,我们现在就来了解一下Java给我们提供的运算符. 从运算的元素的个数来区分, ...
- Core + Vue 后台管理基础框架1——运行系统
1.down源码 git clone https://github.com/KINGGUOKUN/SystemManagement.git,项目目录如下: 2.还原数据库 找到项目根目录下System ...
- 今天对C语言不常用的小东西的了解
今天又翻了C语言的书,看到const语句,一时间想不起来到底是干嘛的,看语句const int a=1;明白了这是一个支持常量指定类型的定义常量的关键字,作用几乎与#define一毛一样,但# ...
- 《JavaScript 模式》读书笔记（2）— 基本技巧2
前一篇,简单介绍了一些js代码的基本技巧.那么这篇文章,我们继续后续的内容. 一.for循环 for循环经常用在遍历数组或者类数组对象,如引数(arguments)和HTML容器(HTMLCollti ...
- 干货来啦。Flask框架看这一篇就够了,关注不迷路，Jeff带你看源码。开发技术时时更新
目录 一.初识Flask 1.1 什么是flask? 1.2 为什么要有flask? 二.Flask快速启动 三.Flask四剑客 三.flask的配置文件 可以配置的属性 四.flask路由 4.1 ...