CSS3 选择器小结
一 通用选择器
1 *{}通配选择符(CSS2):适合所有元素对象。
2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符。
3 E#myid是id选择符(CSS1):以唯一标识符id属性等于myid的E对象作为选择符。
4 E.myclass是类class选择符(CSS1):以class属性包含myclass的E对象作为选择符。
5 E F:包含选择符(CSS1):选择所有被E元素包含的F元素。
CSS3新增的通用选择器:同级元素通用选择器:
1 通用选择器E~F{}:匹配的是E元素之后的同级F元素匹配E后边所有的F,EF同级。只要F在E的后边,E只是作为一个参考。E~F { background:#ff0; }
2 临近(相邻)选择器(css2):E+F{}:EF元素相邻,即选择紧贴在E元素之后F元素。
3 包含(子)选择器(css2):E>F{}:EF不可以隔代,E只能匹配到下一个相邻辈F。
二 属性选择器
1.E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
2.E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
3.E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
4.E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
5.E[att] 选择具有att属性的E元素。
6.E[att="val"]选择具有att属性且属性值等于val的E元素。
7.E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
注:4~7是CSS2特有的属性。 input最常用属性选择器。
三 伪类选择器
1 与用户界面有关的伪类:
(1) E:enabled:匹配表单中激活的元素,表单中可操作的元素。
(2) E:disabled(常用):常用匹配表单中禁用的元素 disabled="disabled" 。 eg:input[type="text"]:disabled { background:#ddd;} 只可以看不可操作。
(3) E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
是整体伪类(匹配整个DOM文档):
(4) ::selection 匹配用户当前选中的元素,即设置对象被选择时的颜色。 ::selection。
2 结构性伪类
1) :root 匹配文档的根元素,对于HTML文档,就是只能匹配HTML根元素。
2) E:nth-child(n) 匹配其当前元素
E :nth-child(n):匹配其父元素E的第n个子元素,第一个编号为1
E F:nth-child(n):匹配其父元素E的第n个F元素,第一个编号为1(貌似只对ul 可用)
3) E:nth-last-child(n):匹配其父元素的倒数第n个子元素,第一个编号为1。
E:last-child:匹配父元素的最后一个子元素,等同于:nth-last-child(1)。
4) E :nth-of-type(n):与:nth-child(n)作用类似,但是仅匹配使用同种标签的元素。
5) E :nth-last-of-type(n):与:nth-last-child(n) 作用类似,但是仅匹配使用同种标签的元素 。
6) E :first-of-type :匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) 。
7) E :last-of-type :匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)。
8) E :only-child:匹配父元素仅有的一个子元素。。
9) E:only-of-type:匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type,:last-of-type或 :nth-of-type(1),:nth-last-of-type(1) 。
10) E :empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素.,空白节点也被看做子节点。
11) E:not(s) 匹配不符合当前选择器的任何元素 :not(:nth-child(1))。
3
1) E:link{}:链接伪类选择器,设置超链接a在未被访问前的样式。
2) E:visited{}:链接伪类选择器,设置超链接a在其链接地址已被访问过时的样式。
3) E:hover{}:用户操作伪类选择器,设置元素在其鼠标悬停时的样式。
4) E:active{}:用户操作伪类选择器,设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
5) E:focus{}用户操作伪类选择器,设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
6) E:lang{}:伪类选择器,匹配使用特殊语言的E元素。
CSS3选择器使用小结的更多相关文章
-
CSS3 选择器用法小结
表单选择器: /*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/ input:enabled {...} input:disabled {.. ...
-
CSS3选择器用法小结
1.*通配符选择器 eg:*{margin:0;padding:0;} 2.#id选择符 ID选择器是CSS中效率最高的选择器,使用的时候要保证ID的唯一性 eg:#div{width:960px;m ...
-
CSS3选择器小结
CSS3 选择器小结 一 通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象. 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3 E#myid是id ...
-
总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
-
总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
-
CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
-
css3 选择器(三)
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
-
CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
-
CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
随机推荐
-
4.5 .net core下直接执行SQL语句并生成DataTable
.net core可以执行SQL语句,但是只能生成强类型的返回结果.例如var blogs = context.Blogs.FromSql("SELECT * FROM dbo.Blogs& ...
-
RouterOS DNS劫持 -- A记录
通常我们使用RouterOS的DNS主要是用于实现DNS缓存功能,即由RouterOS实现DNS服务器解析功能,除了这个功能,RouterOS可以实现对内网域名解析劫持,即实现路由网关的A记录查询. ...
-
MySql事务及JDBC对事务的使用
一 .事务的几个重要特性 1. 原子性 事务内的每个内容不可分割,是一个统一的整体.或同时进行或同时消亡. 2.一致性 事务执行前和事务执行后,状态都是统一的.如A转B 100元,A和B数据总额度没有 ...
-
hdu 油菜花王国
Problem Description 程序设计竞赛即将到来,作为学校ACM集训队主力,小明训练一直很努力.今天天气不错,教练也心情大好,破例给各位队员放假一天,小明就骑着自己的小电驴到郊外踏青去了. ...
-
使用JS进行pc端、手机端判断
<script type="text/javascript"> (function(){ var ua = nav ...
-
2018-2019-2 网络对抗技术 20165321 Exp5 MSF基础应用
1. 实践内容(3.5分) 1.1一个主动攻击实践: (1分) 首先攻击Windows XP: 在攻击机kali输入msfconsole进入控制台,依次输入以下指令: msf > use exp ...
-
[Windows] [VS] [C] [取得指针所指内存的十六进制形式字符串]
接口定义如下: #include <Windows.h> // 取得指针所指内存的十六进制形式字符串,size指定字节长度 #define Mem_toString(address, si ...
-
Individual Project 1 总结
题目: http://www.cnblogs.com/jiel/p/3978727.html 1. 估计时间: ① 遍历目录找到所有文本文件 3天 ② 编写统计词频的函数 排序的函数 并输出到文件 2 ...
-
hdu 4562 dp ***
题意:给出一个点p(X,Y)以及若干圆.从中选出尽可能多的圆满足:圆能且只能包含p或者原点中的一个(不能在圆上):圆之间不能相交或者相切. 链接:点我 用dp求满足条件包含一个点圆的最多数目,然后两个 ...
-
BZOJ1898: [Zjoi2005]Swamp 沼泽鳄鱼(矩阵快速幂)
题意 题目链接 Sol 不难发现吃人鱼的运动每\(12s\)一个周期 所以暴力建12个矩阵,放在一起快速幂即可 最后余下的部分暴力乘 #include<bits/stdc++.h> usi ...