CSS3选择器使用小结

时间:2022-09-24 09:45:51

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选择器使用小结的更多相关文章

  1. CSS3 选择器用法小结

    表单选择器: /*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/ input:enabled {...} input:disabled {.. ...

  2. CSS3选择器用法小结

    1.*通配符选择器 eg:*{margin:0;padding:0;} 2.#id选择符 ID选择器是CSS中效率最高的选择器,使用的时候要保证ID的唯一性 eg:#div{width:960px;m ...

  3. CSS3选择器小结

    CSS3 选择器小结 一 通用选择器 1  *{}通配选择符(CSS2):适合所有元素对象. 2  E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符. 3  E#myid是id ...

  4. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  5. 总结30个CSS3选择器(转载)

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  6. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  7. css3 选择器(三)

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  8. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

随机推荐

  1. 4&period;5 &period;net core下直接执行SQL语句并生成DataTable

    .net core可以执行SQL语句,但是只能生成强类型的返回结果.例如var blogs = context.Blogs.FromSql("SELECT * FROM dbo.Blogs& ...

  2. RouterOS DNS劫持 -- A记录

    通常我们使用RouterOS的DNS主要是用于实现DNS缓存功能,即由RouterOS实现DNS服务器解析功能,除了这个功能,RouterOS可以实现对内网域名解析劫持,即实现路由网关的A记录查询. ...

  3. MySql事务及JDBC对事务的使用

    一 .事务的几个重要特性 1. 原子性 事务内的每个内容不可分割,是一个统一的整体.或同时进行或同时消亡. 2.一致性 事务执行前和事务执行后,状态都是统一的.如A转B 100元,A和B数据总额度没有 ...

  4. hdu 油菜花王国

    Problem Description 程序设计竞赛即将到来,作为学校ACM集训队主力,小明训练一直很努力.今天天气不错,教练也心情大好,破例给各位队员放假一天,小明就骑着自己的小电驴到郊外踏青去了. ...

  5. 使用JS进行pc端、手机端判断

     <script type="text/javascript">            (function(){                var ua = nav ...

  6. 2018-2019-2 网络对抗技术 20165321 Exp5 MSF基础应用

    1. 实践内容(3.5分) 1.1一个主动攻击实践: (1分) 首先攻击Windows XP: 在攻击机kali输入msfconsole进入控制台,依次输入以下指令: msf > use exp ...

  7. &lbrack;Windows&rsqb; &lbrack;VS&rsqb; &lbrack;C&rsqb; &lbrack;取得指针所指内存的十六进制形式字符串&rsqb;

    接口定义如下: #include <Windows.h> // 取得指针所指内存的十六进制形式字符串,size指定字节长度 #define Mem_toString(address, si ...

  8. Individual Project 1 总结

    题目: http://www.cnblogs.com/jiel/p/3978727.html 1. 估计时间: ① 遍历目录找到所有文本文件 3天 ② 编写统计词频的函数 排序的函数 并输出到文件 2 ...

  9. hdu 4562 dp &ast;&ast;&ast;

    题意:给出一个点p(X,Y)以及若干圆.从中选出尽可能多的圆满足:圆能且只能包含p或者原点中的一个(不能在圆上):圆之间不能相交或者相切. 链接:点我 用dp求满足条件包含一个点圆的最多数目,然后两个 ...

  10. BZOJ1898&colon; &lbrack;Zjoi2005&rsqb;Swamp 沼泽鳄鱼&lpar;矩阵快速幂&rpar;

    题意 题目链接 Sol 不难发现吃人鱼的运动每\(12s\)一个周期 所以暴力建12个矩阵,放在一起快速幂即可 最后余下的部分暴力乘 #include<bits/stdc++.h> usi ...