CSS(CSS3)选择器(2)
该部分主要为CSS3新增的选择器
接上一篇 CSS(CSS3)选择器(1)
一.通用兄弟选择器:
24:E ~ F,匹配任何E元素之后的同级F元素。
div ~ p{
background-color:#00FF00;
}
二.属性选择器:
25:E[att ^= val],匹配属性att的值以”val“开头的元素。
[id ^= start]{
background-color:red; ]
/*匹配以id属性的值为start开头的,如id="start1",id="start2",id="start3"的元素*/
26:E[att $= val],匹配属性att的值以”val“结尾的元素。
[id $= end]{
background-color:red; ]
/*匹配以id属性的值为end结尾的,如id="1end",id="2end",id="3end"的元素*/
27:E[att *= val],匹配属性att的值包含”val“字符串的元素。
[id $= hass]{
background-color:red; ]
/*匹配以id属性的值包含hass的,如id="1hass",id="hass2",id="3hass444"的元素*/
三.结构性伪类选择器:
28:E:root,匹配文档的根元素,对于HTML文档,就是HTML元素。(也就是说可能存在其他文档形式时使用,选中的是该文档类型的根元素)
:root{
background:red;
}
/*经测试,像div:root这样的写法是无效的*/
29:E:not,匹配不符合当前选择器的任何元素。
h1:not(.name) {
color: red;
}
/*其含义是,匹配所有h1元素的类名不为name的h1元素,如果:not选择器前面不带指明的元素是无效的*/
30:E:empty,匹配一个不包含任何子元素的元素,包括文本节点。
.box:empty{
background:pink;
}
31:E:target,匹配文档中特定”id“,点击后的效果。
:target{
background: red;
}
/*通常用于锚点定位后,定位的目标点样式*/
32:E:last-child,匹配父元素的最后一个子元素。
li:last-child{
background-color:red;
}
33:E:nth-child(n),匹配其父元素的第n个子元素,从1开始。
li:nth-child(){
background-color:red;
}
li:nth-child(odd){
background-color:red;
}
34:E:nth-last-child(n),匹配其父元素的倒数第n个子元素,倒数第一个的index为1。
li:nth-last-child(){
background-color:red;
}
li:nth-last-child(even){
background-color:red;
}
35:E:nth-of-type(n),与:nth-child()作用类似,但是仅匹配同类型的元素。
h2:nth-of-type(odd){
background:red;
}
36:E:nth-last-of-type(n),与:nth-last-child() 作用类似,但是仅匹配同类型的元素。
h2:nth-last-of-type(even){
background:red;
}
37:E:first-of-type,匹配父元素下使用同种标签的第一个子元素。
h2:first-of-type{
background-color: yellow;
}
38:E:last-of-type,匹配父元素下使用同种标签的最后一个子元素。
h2:last-of-type{
background-color: yellow;
}
39:E:only-child,匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)。
li:only-child{
background-color: yellow;
}
40:E:only-of-type,匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
li:only-of-type{
background-color: yellow;
}
四.UI元素状态伪类选择器:
41:E:enabled,匹配表单中激活的元素。
input[type="text"]:enabled{
background-color:yellow;
}
42:E:disabled,匹配表单中禁用的元素。
input[type="text"]:disabled{
background-color:purple;
}
43:E:read-only,指定当元素处于只读状态时的样式。
input[type="text"]:read-only{
background-color: gray;
}
44:E:read-write,指定当元素处于非只读状态时的样式。
input[type="text"]:read-write{
background-color: greenyellow;
}
45:E:checked,匹配表单中被选中的radio(单选框)或checkbox(复选框)元素。
input[type="checkbox"]:checked {
outline:2px solid blue;
}
46:E:default,指定但页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框的选取状态设定为非选取状态,该样式仍然有效。
input[type="checkbox"]:default {
outline:2px solid blue;
}
47:E:indeterminate,指定当页面打开时,一组单选框中没有任何一个单选框被设定为选取状态时,整组单选框的样式,如果用户选取了任何一个单选框,那么该样式则取消。
input[type="radio"]:indeterminate{
outline: solid 3px blue;
}
48:E::selection,用来指定该元素处于选中状态时的样式。
p::selection{
background:red;
color:#FFF;
}
input[type="text"]::selection{
background:gray;
color:#FFF;
}
49:E:invalid,用来指定元素的内容无法通过H5元素的属性所指定的检查(required)或元素的内容不符合规定的格式(type=Email等)。
input[type="text"]:invalid{
background-color: red;
}
50:E:valid,用来指定元素的内容可以通过H5元素的属性所指定的检查(required)或元素的内容不符合规定的格式(type=Email等)。
input[type="text"]:valid{
background-color: white;
}
51:E:required,用来指定允许使用required属性,并且已经指定了required属性的input,select,textarea元素的样式。
input[type="text"]:required{
border-color: red;
border-width:3px;
}
52:E:optional,用来指定允许使用required属性,并且未指定了required属性的input,select,textarea元素的样式。
input[type="text"]:optional{
border-color: black;
border-width:3px;
}
53:E:in-range,用来指定当元素的有效值被限定在一定范围之内(通常通过min属性值或者max属性值来限定),且实际输入值在该范围内时使用的样式。
input[type="number"]:in-range{
background-color: white;
}
54:E:out-of-range,用来指定当元素的有效值被限定在一定范围之内(通常通过min属性值或者max属性值来限定),且实际输入值不在该范围内时使用的样式。
input[type="number"]:out-of-range{
background-color: red;
}
55:E::placeholder,用来改变文字占位符的样式。
input::placeholder{
color:red;
}
至此,CSS(CSS3)选择器的简单说明笔记就到这里结束了,其实这些内容包含了CSS(CSS3)世界的绝大多数常用选择器,当然,还有些不常用的如果大家有兴趣,可以自行搜索资料。
参考:css选择器笔记,30个你必须熟记的css选择器,MDN-docs-选择器介绍,HTML5和CSS3权威指南(第3版下册-庐陵牛)第十九章,before和after伪元素的用法。
CSS(CSS3)选择器(2)的更多相关文章
- CSS(CSS3)选择器(1)
这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识.第二部分为CSS3新增加的选择器. 在开始之前,先简单介绍一下选择 ...
- CSS/CSS3
CSS/CSS3 选择器. 选择器 例子 例子描述 CSS 说明 .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 ...
- CSS属性、伪类选择器,CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- C++ 监测磁盘空间
硬盘管理器 头文件 HardDiskManager.h : #if _MSC_VER > 1000 #pragma once #endif #include <windows.h> ...
- (!(~+[])+{})[--[~+""][+[]]*[~+[]] + ~~!+[]]+({}+[])[[~!+[]]*~+[]]一行js代码的原理分析
再说这行代码之前,咱们先来预习一下知识. 我们都知道计算机操作系统分为32位或者64位.那么这个32位或64位指的是什么意思呢?其实,要想解释它并不难,其实这就是计算机处理数据的机制,32位表示计算机 ...
- H3C三层交换机配置IP
1.直接在物理端口上设置IP地址. int f1/0/1 port link-mode route #链路模式采用路由 ip add 192.168.10.1 24 ospf network0type ...
- Xmind8 Pro安装教程 Windows
xmind是一款优秀的思维导图制作软件,这一点相信不用太多解释. 尤其作为测试人员导出测试用例为excel极其方便.网上xmind的破解方法加自己琢磨,重新整理了破解步骤. 亲测可以永久激活截止2 ...
- mysql一些使用技巧
1.查看系统帮助文档:HELP contents; 2.查看所有支持的数据类型:HELP Data Types; 3.查看对应的数据类型的详细信息:HELP 类型:如HELP INT; 4.查看存储引 ...
- php 递归无线级别分类
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <?ph ...
- dojo省份地市级联之地市封装类(二)
dojo省份地市级联之地市封装类 City.java: /** * 地市封装类 */ package com.you.model; import java.io.Serializable; /** * ...
- directshow filter中添加属性页
directShow 属性页的制作,为CBall filter加了一个属性页 具体为分以下步骤: 1.在要显示属性的类中继承现ISpecifyPropertyPages类,并实现此类的GetPages ...
- Linux集群问题~浅谈
系统扩展的方式 # scale up 向上扩展 # scale out 向外扩展 集群类型 LB 负载均衡集群 Load Balancing HA 高可用集群 High Availability HP ...
- 关于json.parse和json.stringify的区别
json.parse是将字符串解析成json格式 而json.stringify是将json解析成字符串格式