CSS系列：CSS3新增选择器

CSS系列：CSS3新增选择器

1. CSS1定义的选择器

选择器 类型 说明
E 类型选择器 选择指定类型的元素
E#id ID选择器 选择匹配E的元素，且匹配元素的id为“id”，E选择符可以省略。
E.class 类选择器 选择匹配E的元素，且匹配元素的class属性值为“class”，E选择符可以省略。
E F 包含选择器 选择匹配F的元素，且该元素被包含在匹配E的元素内。
E:link 链接伪类选择器 选择匹配E的元素，且匹配元素被定义了超链接并未被访问。例：a:link
E:visited 链接伪类选择器 选择匹配E的元素，且匹配元素被定义了超链接并已被访问。例：a:visited
E:active 用户操作伪类选择器 选择匹配E的元素，且匹配元素被激活
E:hover 用户操作伪类选择器 选择匹配E的元素，且匹配元素正被鼠标经过
E:focus 用户操作伪类选择器 选择匹配E的元素，且匹配元素获取了焦点
E::first-line 伪元素选择器 选择匹配E元素内的第一行文本
E::first-letter 伪元素选择器 选择匹配E元素内的第一个字符

2. CSS2定义的选择器

选择器 类型 说明
* 通配选择器 选择文档中所有元素
E[foo] 属性选择器 选择匹配E的元素，且该元素定义了foo属性。E选择符可以省略，表示选择定义了foo属性的任意类型的元素。
E[foo="bar"] 属性选择器 选择匹配E的元素，且该元素foo属性值为“bar”
E[foo~="bar"] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以空格符分隔的列表，其中一个列表的值为“bar”，E选择符可以省略。
E[foo!="en"] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个用连字符（-）分隔的列表，值以“en”开头。
E:first-child 结构伪类选择器 选择匹配E的元素，且该元素为父元素的第一个子元素
E::before 伪元素选择器 在匹配E的元素前面插入内容
E::after 伪元素选择器 在匹配E的元素后面插入内容
E > F 子包含选择器 选择匹配F的元素，且该元素为所匹配E元素的子元素。
E + F 相邻兄弟选择器 选择匹配F的元素，且该元素为所匹配E元素后面相邻的位置。

3. CSS3新增属性选择器

选择器 类型 说明
E[foo^="bar"] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值以“bar”开始。E选择符可以省略，表示可匹配任意类型的元素。
E[foo$="bar"] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值以“bar”结束。E选择符可以省略，表示可匹配任意类型的元素。
E[foo*="bar"] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值包含“bar”。E选择符可以省略，表示可匹配任意类型的元素。

　　

时间： 2024-08-02 06:58:58

CSS系列：CSS3新增选择器的相关文章

利用css3新增选择器制作背景切换

之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯css制作哦,不依赖js,算是作一个总结吧! 首先呢,前期工作当做是要先建好目录那些的了. index.html.css文件夹(包含style.css).img文件夹(包含1.jpg,2.jpg,3.jpg,4.jpg) 最后完成的效果如下(因为本人喜欢篮球,所以搞了几张nba人物卡通作素材),具体

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

css3新增选择器

1. img[alt]:匹配页面标签中任意一个含有alt属性的标签 2. 匹配开头:img[alt^="film"] 匹配包含内容:img[alt*="film"] 匹配结尾: img[alt$="film"] 3. 伪类选择器: li:first-child li:nth-child(n/odd/even) li:not 4. 伪元素 p::first-line

css3新增选择器：伪类选择器和属性选择器

一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) <body> <ul> <li>我是第一个</li> <li>我是第二个</li> <li>我是第三个</li> <li>我是第四个</li> <li>我是第五个</li>

CSS3介绍以及新增选择器

一:基本介绍 1:css版本 css1: 定义了网页的基本属性:字体,颜色,补白,基本选择器等等. css2:添加了高级功能:浮动,定位,高级选择器(子选择器,相邻选择器,通用选择器) css3:遵循模块化开发.发布时间并不是一个时间点,而是时间段.(2002-至今) 2:css3新特性 (1)CSS选择器 (2)新的颜色制式和透明设定 (3)多栏布局的实现 (4)多背景图效果 (5)文字阴影效果 (6)开放的网络字体类型 (7)圆角 (8)边框背景图片 (9)盒子阴影 (10)媒体查询 二:新

CSS系列目录

1.  在HTML中引入CSS的方法 2.  CSS选择器 2.1 CSS3新增选择器 3.  CSS的继承与层叠特性 4.  CSS中盒子模型 5.  CSS中盒子之间的关系 6.  CSS中盒子的浮动与定位 7.  CSS文字样式 8.  CSS表格样式 9.  CSS3圆角样式

CSS3属性选择器详解 及 双色球实战开发

在前面的章节中,我们了解了,可以使用行内样式,ID选择器,类选择器,以及标签选择器来给一个元素应用样式. 如果我们想给定义了那些都定义了某一个属性的元素应用样式,这个时候我们该怎么做呢? 这一节中,我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器. 双色球案例: 大家都知道,双色球共有7个球,6个红球,1个蓝球.首先我们先在页面上面定义7个span标签: <!DOCTYPE html> <html> <head> <meta charset=

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------