CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持。IE6你该走了,我们会永远记住你的功绩的!IE6在天朝何时能寿终就寝!

以上跟本文章无关,今天我们来CSS的选择器,虽然IE6不支持,但是jqurey实现了CSS的很多选择器的,所以就当温习jqurey的选择器。

因为伟大的IE6不支持CSS2的有些高级属性,所以CSS选择器一直没有发挥。要记住一点:对于站点功能很重要的元素还是不要用一些“高级的东西”,因为在天朝都是盗版XP。

正文:选择器的作用就是“选择”和“过滤”两个功能,并且可以混合使用。主要的区别是”过滤”作用的选择器是指定条件从前面匹配的内容中筛选。

基本选择器

基本选择器很简单,如下:

  1. * :通用元素选择器,匹配任何元素
  2. 元素选择器 :选取某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身
  3. 类选择器 :形式 .通配符 ,既选取所有class属性中包含通配符的元素
  4. ID 选择器:形式 #通配符 ,既选择ID属性中包含通配符的元素,只能有一个
  5. 后代选择器:既选取某元素的后代元素,如 #father .son
  6. “>”:既选取某个元素的第一级子元素, 代表子选择器,
    IE6不支持
  7. “~”:既选取所有兄弟元素。如 div~p div的 兄弟p元素 将被选取。
    IE6不支持
  8. “+”:既选择兄弟元素后面紧跟的第一个元素。如 div>p div的 p兄弟元素中的第一个 将被选择。
    IE6不支持

高级选择器

首先确保了解CSS优先级的工作原理,不然被覆盖还没知道什么什么原因。本页所有DEMO

属性选择器

属性选择器(Attribute selector)是CSS 2 引入了属性选择器。

我们可以只指定该元素的某个属性,这样所有使用该属性都将被选取;也可以更加明确并定位在这些属性上使用特定值的元素 。如下

  1. [att] 简单属性选择:选择有某个属性的元素,可以根据多个属性进行选择,只需将属性选择器链接在一起。
  2. [att=value] :属性跟值都要求一样,也可以根据多个属性进行选择。
  3. [att~=value] 部分属性值选择:根据属性值中的词列表的某个词进行选择,如果忽略了波浪号,则说明需要完成完全值匹配。
  4. [att^=value] :该属性的值以指定值开始。(比如href=”http://www”,则将二级域名和已经域名区分开来)
  5. [att$=value] :该属性的值包含指定的值(而无论其位置)。(譬如href=”html5jscss”,则选择所有带href带html5jscss的链接)
  6. [att*=value] :该属性的值以指定的值结束。(譬如href=”.pdf”,则选择以.pdf结尾的的链接)
  7. [att|=value] :属性的值等于“value”或以“value-”开始的所有元素,也就是“value-”。(譬如class=”post-bg”)

伪类选择器

伪类选择器之前只能有一个单冒号。

动态伪类

动态伪类只有当用户和网站交互了才能体现出来。

  1. :link:选择所有未被点击的连接
  2. :visited:选择已被点击的连接
  3. :hover:选择悬停其上的连接
  4. :active:选择已经其上按下、还没有释放的连接
  5. :focus:选择获得当前焦点的连接

:hover在IE6下只有a元素支持,:active、:focus只有IE7-6不支持。

由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

Form元素伪类选择器

  1. :enabled 选择器选取所有启用的表单元素。
  2. :disabled 选择器选取所有禁用的表单元素。
  3. :checked 选择器选取所有选中的复选框或单选按钮。

一般选取表单元素,所以我们联想到属性选择性,所以我们可以如下选取文本框

input[type="text"]:disabled {color:#333;}

其他伪类选择器

  1. 语言伪类:lang():一个基于它的语言的元素
  2. :first-child:选择父元素中的第一个子元素
  3. :first-line:选择元素中的第一行
  4. :first-letter:选择元素中的第一个字母
  5. :before:元素之前插入生成的内容,如 div:before{content:"这里写你想要在之前插入的内容"}
  6. :after:元素之前插入生成的内容,如 div:after{content:"这里写你想要在之前插入的内容"},我们有用它来清除浮动

CSS3的高级伪类选择器

  1. :first-child :选择某个元素的第一个子元素;

    注意 :如果写成:first-child 浏览器将自动解析成 *:first-child, * 是匹配所有元素,意思就是选择第一个子元素;而如果写成img:first-child,那么条件则苛刻了,不仅是要满足是第一个子元素而且必须是img元素,同时满足这两个条件才能被选取 。
    除了IE6不支持,其他浏览器都支持

  2. :last-child :选择某个元素的最后一个子元素;

    注意 :如果写成:last-child 浏览器将自动解析成 *:last-child,* 是匹配所有元素,意思就是选择最后一个子元素;而如果写成img:last-child,那么条件则苛刻了,不仅是要满足是最后第一个子元素而且必须是img元素,同时满足这两个条件才能被选取,就是倒过来的:first-child 。 IE6、IE7、IE8不支持 ,其他浏览器都支持

  3. :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-浏览器不支持

  4. :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-浏览器不支持

  5. :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-浏览器不支持

  6. :nth-last-child() :选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;

    注意::nth-last-child()是从元素的最后一个开始计算,计算方法跟:nth-child()是一样的,具体区别不说了。
    IE6、IE7、IE8和FF3-浏览器不支持

  7. :nth-of-type() :选择指定的元素;

    注意::nth-of-type:nth-child的关系就好比:first-of-typefirst-child的关系,区别也不说了。
    IE6、IE7、IE8和FF3-浏览器不支持

  8. :nth-last-of-type() : 选择指定的元素,从元素的最后一个开始计算;

    注意:就是:nth-of-type 倒着算,区别:略。 
    IE6、IE7、IE8和FF3-浏览器不支持

  9.  nly-child :选择的元素是它的父元素的唯一一个了元素;

    : 注意:  :only-child代表只包含一个子元素的div下的子元素,

    CSS属性、伪类选择器,CSS3选择器

     :only-child就是*:only-child意思了,所以没选择就是只包涵一个子集元素的那个子集 。
    IE6、IE7、IE8和FF3-浏览器不支持

  10. only-of-type : 选择一个元素是它的上级元素的唯一一个相同类型的子元素;

    注意:p:only-of-type代表只包含一个p子元素的div下的p元素,就算那个父集有其他元素的子集,只要不是 p 子集,p:only-of-type就能选中。
    IE6、IE7、IE8和FF3-浏览器不支持

  11. :empty :empty选择的元素里面没有任何内容;

    注意:选择没有任何内容的元素 。
    IE6、IE7、IE8浏览器不支持:empty选择器

  12. :not :否定选择器;

    注意:就是排除某个元素,input:not([type="submit"]) {border:0;} 。
    IE6、IE7、IE8浏览器不支持:empty选择器

CSS4 选择器

CSS4选择器预览版提供了对于父选择器和匹配选择器,跟js操作DOM一样。只是出了草案,目前浏览器还不支持,所以就不试验了,等支持了再加在这。

CSS4选择器站位编辑!

摘自:http://www.html5jscss.com/css-selectors-34.html

CSS属性、伪类选择器,CSS3选择器的更多相关文章

  1. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  2. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  3. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  4. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  5. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  6. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  7. css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  8. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  9. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

  10. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

随机推荐

  1. django-crontab 定时执行任务方法

    需求 每天请求一封邮件,并读取该邮件 这个其实可以使用linux 自带了crontab实现,但是毕竟是django 开发.想着不知道有没有方法可以从django 中实现. 简单搜索了下,这方面的方法确 ...

  2. bzoj 1004 Cards & poj 2409 Let it Bead —— 置换群

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1004 关于置换群:https://www.cnblogs.com/nietzsche-oie ...

  3. Modbus通讯协议学习 - 认识篇

    转自:http://www.cnblogs.com/luomingui/archive/2013/06/14/Modbus.html 什么是Modbus? Modbus 协议是应用于电子控制器上的一种 ...

  4. 三台主机搭建LAMP(apache、mariadb、php)

    实验环境:均是CentOS7 httpd:172.16.254.88   2.4.6 PHP:172.16.250.140 5.4.16 mariadb:172.16.250.94 5.5.52 第三 ...

  5. css如何改变placeholder的默认颜色值

    input:-moz-placeholder {/* Mozilla Firefox 4 to 18*/ color: red; input::-moz-placeholder {/* Mozilla ...

  6. 正则表达式&nbsp;LINUX

    正则表达式 热身 正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 例如 g ...

  7. java之Date(日期)、Date格式化、Calendar(日历)

    参考http://how2j.cn/k/date/date-date/346.html Date(日期) Date类 注意:是java.util.Date; 而非 java.sql.Date,此类是给 ...

  8. Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1

    Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1 这个问题,原因是UTF-8编码有可能是两个.三个.四个字节.Emoji表 ...

  9. 建立JNI层的本地对象,并与JAVA层交互方法

    最近在做OpenCV4Android开发的时候,需要从摄像头捕获多个图片,传值给本地对象,每次捕获到图片都更新数据,最后将计算得到的数据传给JAVA层,并在界面中显示.经过摸索和调试后,找到了通过本地 ...

  10. QDUOJ 炸老师与他的女朋友们 bfs+状压

    炸老师与他的女朋友们 Description qdu最帅的炸老师今天又要抽空去找他的女朋友们了,但是考虑到他的好gay友ycb仍是个单身狗,炸老师作为基友不希望打击他.所以他在找女朋友们的路途中必须要 ...