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 ...
随机推荐
- Slog64_项目上线之ArthurSlog个人网站上线3
ArthurSlog SLog-64 Year·1 Guangzhou·China September 9th 2018 ArthurSlog Page GitHub NPM Package Page ...
- tab 切换下划线跟随实现
HTML 结构如下: <ul> <li class="active">不可思议的CSS</li> <li>导航栏</li> ...
- Kubernetes-PersistentVolumeClaim（PVC）介绍
1 PVC介绍 PVC是用户层面,作为对存储资源的需求申请,主要包括了存储空间大小.访问模式.PV的选择条件.存储类别等信息的设置. 2 PVC的参数详解 2.1 PVC的yaml模板 apiVe ...
- 使用java短信验证
package cn.geekss.util; import java.io.BufferedReader;import java.io.InputStreamReader;import java.i ...
- SQLi-Labs之1~6关 - 常规注入与盲注
年初五 财神入 第一关 联合注入 1.准备 2.加'截断 3.order by 判断查询列数 4.同上 5.联合查询判断字段位置 6.查数据库名 7.1 查表名 7.2 查列名 8.查数据 第二关 不 ...
- C语言程序设计（二） C数据类型
第二章 C数据类型 八进制整数由数字0开头,后跟0~7的数字序列组成. 十六进制整数由数字0加字母x(或X)开头,后跟0~9,a~f(或A~F)的数字序列组成. 整型常量: 默认的int型定义为有符号 ...
- redis实现数据库（一）
转:https://www.cnblogs.com/beiluowuzheng/p/9738159.html 服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redis ...
- js中的堆和栈
http://www.jscwwd.com/article/5e533ae2552a8e2bf45d3d69 这里先说两个概念:1.堆(heap)2.栈(stack)堆 是堆内存的简称.栈 是栈内存的 ...
- Python基础编程题100列目录
实例001:数字组合 实例002:"个税计算" 实例003:完全平方数 实例004:这天第几天 实例005:三数排序 实例006:斐波那契数列 实例007:copy 实例008:九 ...
- 微信小程序开发工具报错对应的服务器证书无效
提示错误信息:“对应的服务器证书无效.控制台输入 showRequestInfo() 可以获取更详细信息.” 解决方法:详情 -->项目设置 --> 选择“不校验安全域名.TLS版本以及H ...