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 ...
随机推荐
- Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...
- 适配iphoneX
tips iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2.iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3 适配 ...
- Java基础篇(01)：基本数据类型，核心点整理
本文源码:GitHub·点这里 || GitEE·点这里 一.基本类型 1.基本类型 不使用New创建,声明一个非引用传递的变量,且变量的值直接置于堆栈中,大小不随运行环境变化,效率更高.使用new创 ...
- vue安卓4.4.2页面打不开的坑
项目上线两三天,有保障说安卓下面页面打不开,所以查了下具体原因,系统版本过低,安卓4.4.2,然后发现本地没有babel-polyfill的包,具体解决方案如下: 1,npm 安装 npm insta ...
- 微信SEO怎么做-最新微信SEO干货
星辉信息科技进行微信SEO已经很多年了,结合多年的微信SEO经验通过浅谈微信SEO.微信SEO的3大优势.微信SEO的6个排名技巧.企业和个人微信SEO的4大优化战略来讲,可以完美解决B端C端微信获客 ...
- vue-cli实现最简单的全选、全不选、反选功能。不容错过呦！！！！！话不多说直接上代码。。。。
<template> <div class="hello"> <input type="button" name="al ...
- Ajax的封装，以及利用jquery的ajax获取天气预报
1.Ajax的封装 function ajax(type,url,param,sync,datetype,callback){//第一个参数是获取数据的类型,第二个参数是传入open的url,第三个是 ...
- Vue2.0 【第一季】第7节 v-bind指令
目录 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v-bind缩写 绑定CSS样式 Vue2.0 [第一季] 第7节 v-bind指令 第7节 v-bind指令 v- ...
- AspNetCore3.1_Middleware源码解析_3_HttpsRedirection
概述 上文提到3.1版本默认没有使用Hsts,但是使用了这个中间件.看名字就很好理解,https跳转,顾名思义,就是跳转到 https地址. 使用场景,当用户使用http访问网站时,自动跳转到http ...
- git常规使用命令笔记
使用git也有不短的时间,这篇文章主要默写自己在提交代码经常使用的一些密令,仅供参考并不是教程. git log 查看日志 git branch 查看分值 git branch Name 新建一个Na ...