如何用原生js实现伪类选择器

-webkit-autofill 这种东西要查找浏览器的兼容。选择器的话看下jquery源码就知道了是否支持一种样式。var input= documentcreateElement('input'), vendors = 'Khtml Ms O Moz Webkit'split(' '), len = vendorslength; return function(prop) { if (prop in inputstyle) return true; prop = propreplace(/^[a-z]/, function(val) { return valtoUpperCase(); }); for (var i = 0; i < len; i++) { if (vendors[i] + prop in inputstyle) { // browser supports eg:box-shadow Do what you need // Or use a bang (!) to test if the browser doesn't return true; } } return false; };

和一般的CSS语法不同(参见CSS语法)，CSS伪类的语法有两种。
第一种：
selector:pseudo-class {property: value}
例句：
a:link {color:red}
第二种：
selectorclass:pseudo-class {property: value}
例句：
ac1:link {color:red}
锚(a)伪类
锚(a)伪类是最常用的伪类。例句如下：
a:link {color: #FF0000} / 未被访问的链接 红色 /
a:visited {color: #00FF00} / 已被访问过的链接 绿色 /
a:hover {color: #FFCC00} / 鼠标悬浮在上的链接 橙色 /
a:active {color: #0000FF} / 鼠标点中激活链接 蓝色 /
也可以用HTML的class属性来设定伪类。例句如下：
ac1:link {color: #FF0000} / 未被访问的链接 红色 /
ac1:visited {color: #00FF00} / 已被访问过的链接 绿色 /
ac1:hover {color: #FFCC00} / 鼠标悬浮在上的链接 橙色 /
ac1:active {color: #0000FF} / 鼠标点中激活链接 蓝色 /
注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。
伪类有：:first-child ，:link:，vistited，:hover:，active:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after
具体可以看看这个：>

在div里引用链接伪类的方法如下：

在div里放置一个a标签，并使用href属性指定链接地址。

使用div:link、div:visited、div:active、div:hover四个伪类选择器，分别设置链接的初始、已访问、激活、鼠标悬停样式。

例如：

div:link {color: blue;}div:visited {color: purple;}div:active {color: red;}div:hover {color: green;}

在HTML中，可以使用以下代码来引用链接伪类：

<div>

<a href="#">这是一个链接</a></div>

注意：链接伪类的使用只能在HTML中使用，在XML和其他标记语言中是不被支持的。

伪类选择器是CSS五种选择器当中应用最灵活的一种，其包含六个分类。

1、动态伪类选择器

不同的状态，使用不同的样式。

E: link

E: visited

E: active

E: hover

E: focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

E: target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

E: lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

E: checked

eg: input[type="checkbox"]:checked{}

E: enabled

eg: input[type="text"]:checked{}

E: disabled

eg: input[type="text"]:disabled{}

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

: nth-child

: nth-last-child

: nth-of-type

: nth-last-of-type

: first-child

: last-child

: only-child

: first-of-type

: last-of-type

: only-of-type

: root 匹配元素所有在文档的根元素

: empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

E: not(F) 匹配所有除F外的E元素

#div:not(':last-child')
选择id=div的除了最后一个子元素以外的所有子元素
#div:not(p) 选择id=div的元素下所有不是p元素的子元素

这是我的学习笔记，你也可以拿去用

1 元素选择器：比如p{xxxx}，选择文档中所有的p元素；

2 类选择器：比如center_bar{xxxx}，选择文档中使用了类center_bar的元素；

3 id选择器：比如button1{xxxx}，选择文档中使用了button1的元素；

4 或选择器：用逗号连接多个选择器；

5 与选择器：多个选择器紧挨在一起；

6 后代选择器：用空格连接多个选择器；

7 子代选择器：用大于号连接多个选择器，它其实是后代选择器的特殊情况；

8 属性选择器：

(1) 比如p[id]，选择标签上有属性“id”的p元素；

(2) 比如p[id="button1"]，选择标签上有属性“id”并且id的值为“button1”的p元素；

(3) 比如p[id^=”b”]，选择标签上有属性“id”并且id的值以“b”开头的p元素；

(4) 比如p[id$=”b”]，选择标签上有属性“id”并且id的值以“b”结尾的p元素；

(5) 比如p[id=”b”]，选择标签上有属性“id”并且id的值包含“b”的p元素；

9 p:first-child：既是p元素，也是某元素的第一个孩子；

10 p:last-child：既是p元素，也是某元素的最后一个孩子；

11 p:nth-child(3)：既是p元素，也是某元素的第三个孩子；

12 p:nth-child(odd)：既是p元素，也是某元素的第奇数个孩子；

13 伪类选择器都是某种状态，比如active、link、hover，使用“:”；

14 伪元素选择器，确实有某些实体的东西，比如第一行文字、第一个文字、被选中的文字，使用“::”

15 只有多个选择器选中了同一个元素的同一个属性，才会出现优先级的问题；

16 如果两个选择器优先级相同，那么写在后面的选择器生效；

17 选择器优先级的排列：

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) 选择器

(7) 继承样式

---