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 ...
随机推荐
- 关于css 的垂直居中
对于元素的水平居中,我根据我自己之前的一些学习来进行一些总结,如果有不对的地方,欢迎指正~ 一.让大小不固定的元素垂直居中 因为:表格的单元格的特别属性:垂直居中等: `div.parent { di ...
- element ui table render-header自定义表头信息使用
在使用vue自定义组件内容过程之中,我们绝大多数情况下都是通过预先写好不同的html模板,再通过props传入不同的值来渲染不同的模板.例如我们需要实现一个<v-title size='1'&g ...
- 【jQuery学习日记】jQuery实现滚动动画
需要实现的效果 样式分析: 2个主要部分,头部的标题和导航部分,和主要的功能实现区域: 1.头部 <div id="header"> <h1>动漫视频< ...
- JZOJ 3453.【NOIP2013中秋节模拟】连通块(connect)
3453.[NOIP2013中秋节模拟]连通块(connect) Time Limits: 1000 ms Memory Limits: 262144 KB (File IO): input:conn ...
- springcloud eureka注册中心搭建
环境描述 ① jdk1.8 ② idea ③ springcloud版本 Finchley.SR2 ④ maven3.0+ 导入jar包 <properties> <project. ...
- Git提交代码冲突：commit your changes or stash them before you can merge.
用git pull拉取远程分支代码时候遇到如下问题: error: Your local changes to the following files would be overwritten by ...
- JavaScript（js）函数声明与函数表达式的区别
在JavaScript中,函数是经常用到的,在实际开发的时候,我想很多人都没有太在意函数的声明与函数表达式的区别,但是呢,这种细节的东西对于学好js是非常重要的. 函数声明与函数表达式用代码写出来是这 ...
- 什么是data:image/png;base64,？一道关于Data URI Scheme的入门级CTF_Web题
一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...
- java面试汇总一
第一部分 Java SE基础(1) 1.1 java的8种基本数据类型 装箱 拆箱 1.1.1 8种基本的数据类型 1.1.2装箱 拆箱 自动装箱是 Java 编译器在基本数据类型和对应的对象包 ...
- web安全测试（上）
前情提要: 公司的安全测试一直是安全部经理全权负责,测试部只做功能和自动化. 但是2019是公司业绩腾飞的一年,业务量越来越大了,安全部经理实在做不过来. 于是他给整个测试部培训<安全测试> ...