CSS3选择器整理

属性选择器:
E[name] 属性名是name的元素
*E[name=value] 属性名是name值为value元素
E[name~=value] 包含value这个单词元素
E[name^=value] 以value这个词开头的元素
E[name$=value] 以value这个词结尾的元素
*E[name*=value] 只要包含value这个东西的元素
E[name|=value] 以value-或者纯value开头的东西

  <a href="xxxpdfxx">
  <a href="xxxdocxx">

  a[href*=pdf]{}
  a[href*=doc]{}
----------------------------
结构性伪类选择器:
* E:nth-child(n) 正好第n个 ,从1开始计数
  nth-child(odd) 奇数
  nth-child(even) 偶数
  nth-child(n) 所有数,从0开始
  nth-child(2n) 2的倍数
  nth-child(2n+1)
  nth-child(2n-1)
E:nth-last-child(n) 倒数第n个

E:first-child   =》  nth-child(1)
E:last-child    =》  nth-last-child(1)

E:nth-of-type(n) 类型的某个元素
E:nth-last-of-type(n)
----------------------------
E:disabled 不能用表单元素
E:enabled 可用的表单元素
E:checked 选中的表单元素

E:empty 空元素
E:target 被锚点锚住元素
E:not(some) 除了some的东西元素

----------------------------
文本伪类选择器:
E:first-line 第一行文本
E:first-letter 第一个字

E::selection{} 选中文本 超伪类

::selection{} 所有

E::after{} 之后
E:after{}
content:‘‘

E::before{} 之前

E:before{}
  content:‘‘

时间: 2024-10-09 14:04:07

CSS3选择器整理的相关文章

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS3知识点整理&amp;&amp;一些demo

css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen.io/airen/pen/icFba         如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习. 边框 1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ bord

前端必须掌握30个CSS3选择器

也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. 本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助. 1.*:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除默认CSS

CSS3样式整理

CSS样式整理 很多功能为了实现兼容,需要加浏览器前缀 —— – webkit - , chrome —— – moz - ,firefox —— – ms - ,IE —— – o - ,opera css3选择器 属性选择器 E[attr] E[attr=value] E[attr^=value]首字母是value E[attr$=value]尾部结束字符是value   aaa.doc E[attr*=value]只要包含value ul > li 表示后代 span + p 表示span

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中

最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为“id”的任意类型元素 .class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E  F 后代选择器(包含选择器

CSS3选择器:nth-child和:nth-of-type之间的差异(转)

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 参考文章:The Difference Between :nth-child and :nth-of-type 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s