CSS属性、伪类选择器,CSS3选择器
2013-07-12 16:26
579 查看
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持。IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝!
以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器。
因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥。要记住一点:对于站点功能很重要的元素还是不要用一些“高级的东西”,因为在天朝都是盗版XP。
正文:选择器的作用就是“选择”和“过滤”两个功能,并且可以混合使用。主要的区别是”过滤”作用的选择器是指定条件从前面匹配的内容中筛选。
* :通用元素选择器,匹配任何元素
元素选择器 :选取某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身
类选择器 :形式 .通配符 ,既选取所有class属性中包含通配符的元素
ID 选择器:形式 #通配符 ,既选择ID属性中包含通配符的元素,只能有一个
后代选择器:既选取某元素的后代元素,如 #father .son
“>”:既选取某个元素的第一级子元素, 代表子选择器,
IE6不支持
“~”:既选取所有兄弟元素。如 div~p div的 兄弟p元素 将被选取。
IE6不支持
“+”:既选择兄弟元素后面紧跟的第一个元素。如 div>p div的 p兄弟元素中的第一个 将被选择。
IE6不支持
高级选择器
首先确保了解CSS优先级的工作原理,不然被覆盖还没知道什么什么原因。本页所有DEMO
我们可以只指定该元素的某个属性,这样所有使用该属性都将被选取;也可以更加明确并定位在这些属性上使用特定值的元素 。如下
[att] 简单属性选择:选择有某个属性的元素,可以根据多个属性进行选择,只需将属性选择器链接在一起。
[att=value] :属性跟值都要求一样,也可以根据多个属性进行选择。
[att~=value] 部分属性值选择:根据属性值中的词列表的某个词进行选择,如果忽略了波浪号,则说明需要完成完全值匹配。
[att^=value] :该属性的值以指定值开始。(比如href=”http://www”,则将二级域名和已经域名区分开来)
[att$=value] :该属性的值包含指定的值(而无论其位置)。(譬如href=”html5jscss”,则选择所有带href带html5jscss的链接)
[att*=value] :该属性的值以指定的值结束。(譬如href=”.pdf”,则选择以.pdf结尾的的链接)
[att|=value] :属性的值等于“value”或以“value-”开始的所有元素,也就是“value-”。(譬如class=”post-bg”)
:link:选择所有未被点击的连接
:visited:选择已被点击的连接
:hover:选择悬停其上的连接
:active:选择已经其上按下、还没有释放的连接
:focus:选择获得当前焦点的连接
:hover在IE6下只有a元素支持,:active、:focus只有IE7-6不支持。
由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。
:disabled 选择器选取所有禁用的表单元素。
:checked 选择器选取所有选中的复选框或单选按钮。
一般选取表单元素,所以我们联想到属性选择性,所以我们可以如下选取文本框
:first-child:选择父元素中的第一个子元素
:first-line:选择元素中的第一行
:first-letter:选择元素中的第一个字母
:before:元素之前插入生成的内容,如
:after:元素之前插入生成的内容,如
注意 :如果写成
除了IE6不支持,其他浏览器都支持
:last-child :选择某个元素的最后一个子元素;
注意 :如果写成
:first-of-type :选择一个上级元素下的第一个同类子元素;
注意:如果写成
IE6、IE7、IE8和FF3-浏览器不支持
:last-of-type :选择一个上级元素的最后一个同类子元素;
注意:如果写成
IE6、IE7、IE8和FF3-浏览器不支持
:nth-child() :选择某个元素的一个或多个特定的子元素;
注意::
IE6、IE7、IE8和FF3-浏览器不支持
:nth-last-child() :选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
注意:
IE6、IE7、IE8和FF3-浏览器不支持
:nth-of-type() :选择指定的元素;
注意:
IE6、IE7、IE8和FF3-浏览器不支持
:nth-last-of-type() : 选择指定的元素,从元素的最后一个开始计算;
注意:就是
IE6、IE7、IE8和FF3-浏览器不支持
nly-child :选择的元素是它的父元素的唯一一个了元素;
: 注意:
IE6、IE7、IE8和FF3-浏览器不支持
only-of-type : 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
注意:
IE6、IE7、IE8和FF3-浏览器不支持
:empty :empty选择的元素里面没有任何内容;
注意:选择没有任何内容的元素 。
IE6、IE7、IE8浏览器不支持:empty选择器
:not :否定选择器;
注意:就是排除某个元素,
IE6、IE7、IE8浏览器不支持:empty选择器
CSS4选择器站位编辑!
摘自:http://www.html5jscss.com/css-selectors-34.html
以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器。
因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥。要记住一点:对于站点功能很重要的元素还是不要用一些“高级的东西”,因为在天朝都是盗版XP。
正文:选择器的作用就是“选择”和“过滤”两个功能,并且可以混合使用。主要的区别是”过滤”作用的选择器是指定条件从前面匹配的内容中筛选。
基本选择器
基本选择器很简单,如下:* :通用元素选择器,匹配任何元素
元素选择器 :选取某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身
类选择器 :形式 .通配符 ,既选取所有class属性中包含通配符的元素
ID 选择器:形式 #通配符 ,既选择ID属性中包含通配符的元素,只能有一个
后代选择器:既选取某元素的后代元素,如 #father .son
“>”:既选取某个元素的第一级子元素, 代表子选择器,
IE6不支持
“~”:既选取所有兄弟元素。如 div~p div的 兄弟p元素 将被选取。
IE6不支持
“+”:既选择兄弟元素后面紧跟的第一个元素。如 div>p div的 p兄弟元素中的第一个 将被选择。
IE6不支持
高级选择器
首先确保了解CSS优先级的工作原理,不然被覆盖还没知道什么什么原因。本页所有DEMO
属性选择器
属性选择器(Attribute selector)是CSS 2 引入了属性选择器。我们可以只指定该元素的某个属性,这样所有使用该属性都将被选取;也可以更加明确并定位在这些属性上使用特定值的元素 。如下
[att] 简单属性选择:选择有某个属性的元素,可以根据多个属性进行选择,只需将属性选择器链接在一起。
[att=value] :属性跟值都要求一样,也可以根据多个属性进行选择。
[att~=value] 部分属性值选择:根据属性值中的词列表的某个词进行选择,如果忽略了波浪号,则说明需要完成完全值匹配。
[att^=value] :该属性的值以指定值开始。(比如href=”http://www”,则将二级域名和已经域名区分开来)
[att$=value] :该属性的值包含指定的值(而无论其位置)。(譬如href=”html5jscss”,则选择所有带href带html5jscss的链接)
[att*=value] :该属性的值以指定的值结束。(譬如href=”.pdf”,则选择以.pdf结尾的的链接)
[att|=value] :属性的值等于“value”或以“value-”开始的所有元素,也就是“value-”。(譬如class=”post-bg”)
伪类选择器
伪类选择器之前只能有一个单冒号。动态伪类
动态伪类只有当用户和网站交互了才能体现出来。:link:选择所有未被点击的连接
:visited:选择已被点击的连接
:hover:选择悬停其上的连接
:active:选择已经其上按下、还没有释放的连接
:focus:选择获得当前焦点的连接
:hover在IE6下只有a元素支持,:active、:focus只有IE7-6不支持。
由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。
Form元素伪类选择器
:enabled 选择器选取所有启用的表单元素。:disabled 选择器选取所有禁用的表单元素。
:checked 选择器选取所有选中的复选框或单选按钮。
一般选取表单元素,所以我们联想到属性选择性,所以我们可以如下选取文本框
input[type="text"]:disabled {color:#333;}
其他伪类选择器
语言伪类:lang():一个基于它的语言的元素:first-child:选择父元素中的第一个子元素
:first-line:选择元素中的第一行
:first-letter:选择元素中的第一个字母
:before:元素之前插入生成的内容,如
div:before{content:"这里写你想要在之前插入的内容"}
:after:元素之前插入生成的内容,如
div:after{content:"这里写你想要在之前插入的内容"},我们有用它来清除浮动
CSS3的高级伪类选择器
:first-child :选择某个元素的第一个子元素;注意 :如果写成
:first-child浏览器将自动解析成
*:first-child, * 是匹配所有元素,意思就是选择第一个子元素;而如果写成
img:first-child,那么条件则苛刻了,不仅是要满足是第一个子元素而且必须是img元素,同时满足这两个条件才能被选取 。
除了IE6不支持,其他浏览器都支持
:last-child :选择某个元素的最后一个子元素;
注意 :如果写成
:last-child浏览器将自动解析成
*:last-child,* 是匹配所有元素,意思就是选择最后一个子元素;而如果写成
img:last-child,那么条件则苛刻了,不仅是要满足是最后第一个子元素而且必须是img元素,同时满足这两个条件才能被选取,就是倒过来的
:first-child。 IE6、IE7、IE8不支持 ,其他浏览器都支持
:first-of-type :选择一个上级元素下的第一个同类子元素;
注意:如果写成
:first-of-type浏览器也将自动解析成
*:first-of-type,这个意思就是第一个子元素 即
:first-of-type=:first-child;而如果写成
img:first-of-type,那就跟
:first-child差别大了,意思是所有img集合里的第一个元素。其实跟
:first-of-type跟
:first-child完全是两个概念
IE6、IE7、IE8和FF3-浏览器不支持
:last-of-type :选择一个上级元素的最后一个同类子元素;
注意:如果写成
:last-of-type浏览器也将自动解析成
*:last-of-type,这个意思就是第一个子元素 即
:last-of-type=:last-child;而如果写成
img:last-of-type,那就跟:last-child差别大了,意思是所有img集合里的第一个元素。其实跟
:last-of-type跟
:last-child完全是两个概念。
IE6、IE7、IE8和FF3-浏览器不支持
:nth-child() :选择某个元素的一个或多个特定的子元素;
注意::
nth-child()可以定义它的值(值可以是整数不能为负数,也可以是表达式),如
div:nth-child(3)或者
div:nth-child(n),这里的“n”只能是”n”,不能使用其他字母代替。
:nth-child(2n)=:nth-child(even),
:nth-child(2n-1)=:nth-child(odd)。
:nth-child(n+5)从第五个元素开始选择,
:nth-child(-n+5)选择第5个前面的(跟
:nth-child(n+5)相反)。
:nth-child()前面带不带元素跟
:first-child一样道理,其实
:first-child就是
:nth-child的衍生,就专指第一个,而
:nth-child是想选哪个就选哪个。
IE6、IE7、IE8和FF3-浏览器不支持
:nth-last-child() :选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
注意:
:nth-last-child()是从元素的最后一个开始计算,计算方法跟:nth-child()是一样的,具体区别不说了。
IE6、IE7、IE8和FF3-浏览器不支持
:nth-of-type() :选择指定的元素;
注意:
:nth-of-type跟
:nth-child的关系就好比
:first-of-type跟
first-child的关系,区别也不说了。
IE6、IE7、IE8和FF3-浏览器不支持
:nth-last-of-type() : 选择指定的元素,从元素的最后一个开始计算;
注意:就是
:nth-of-type倒着算,区别:略。
IE6、IE7、IE8和FF3-浏览器不支持
nly-child :选择的元素是它的父元素的唯一一个了元素;
: 注意:
:only-child代表只包含一个子元素的div下的子元素,
CSS属性、伪类选择器,CSS3选择器
:only-child就是
*:only-child意思了,所以没选择就是只包涵一个子集元素的那个子集 。
IE6、IE7、IE8和FF3-浏览器不支持
only-of-type : 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
注意:
p:only-of-type代表只包含一个p子元素的div下的p元素,就算那个父集有其他元素的子集,只要不是 p 子集,
p:only-of-type就能选中。
IE6、IE7、IE8和FF3-浏览器不支持
:empty :empty选择的元素里面没有任何内容;
注意:选择没有任何内容的元素 。
IE6、IE7、IE8浏览器不支持:empty选择器
:not :否定选择器;
注意:就是排除某个元素,
input:not([type="submit"]) {border:0;}。
IE6、IE7、IE8浏览器不支持:empty选择器
CSS4 选择器
CSS4选择器预览版提供了对于父选择器和匹配选择器,跟js操作DOM一样。只是出了草案,目前浏览器还不支持,所以就不试验了,等支持了再加在这。CSS4选择器站位编辑!
摘自:http://www.html5jscss.com/css-selectors-34.html
相关文章推荐
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- css3 - 属性选择器、伪元素选择器、结构性伪类选择器
- CSS伪类选择器和CSS常用属性
- CSS 伪类选择器:如何使用 CSS3 伪类
- CSS-基本语法/引用/文本设置/选择器/css3属性
- CSS3第一日--属性选择器与伪类选择器
- css实现面包屑导航与冒泡框(border属性与伪类选择器)
- CSS3之选择器1(属性选择器,结构伪类)
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
- css3-属性、伪类、nth-child选择器
- CSS伪类选择器之属性选择
- css对边框的属性控制和链接的伪类选择器
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
- CSS学习(二)-结构伪类选择器、属性选择器
- CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)
- CSS3的伪类选择器;:hover选择器:active选择器和:focus选择器
- 使ie678支持css3伪类选择器的插件
- 【CSS3】结构性伪类选择器—not
- CSS链接四种状态注意顺序、UI伪类选择器的顺序
- CSS常用属性及选择器