javascript 伪类什么 意思

JavaScript021

javascript 伪类什么 意思,第1张

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

CSS术语

     解释:在感觉上伪类可以是动态的,当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来,":lang"在一些情况下也在从文档树中推断出来。

    伪类有::first-child ,:link:,vistited,:hover:,:active,:focus,:lang,:right,:left,:first

    何为伪类?就是css内植类css内部本身赋予它一些特性和功能,也就是你不用再class=...或id=...你就可以直接拿来使用,当然你也可以改变它的部分属性比如:a:link{color:#FF0000}

    CSS很多的建议并没有得到浏览器的支持,但有四个可以安全用在超链接上的伪类。

伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value},简单地用一个半角英文冒号(:)来隔开选择符和伪类。

     CSS很多的建议并没有得到浏览器的支持,但有四个可以安全用在超链接上的伪类。

     :link用在未访问的连接上。

     :visited用在已经访问过的连接上。

     :active用于获得焦点(比如,被点击)的连接上。

     :hover 用于鼠标光标置于其上的连接。

方法一,完全用js模拟(这样太麻烦)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .css1{

            width: 100px

            height: 200px

            border: 1px solid black

        }

        .css1:hover

 {

            border: 2px solid red

        }

    </style>

</head>

<body>

<div>这是一个div</div>

<script>

    var div = document.getElementsByTagName("div")[0]

    div.style.cssText = "border:1px solid redwidth:100pxheight:100px"

    div.onmouseover = function () {

        div.style.cssText = "border:1px solid blackwidth:100pxheight:100px"

    }

    div.onmouseout = function () {

        div.style.cssText = "border:1px solid redwidth:100pxheight:100px"

    }

</script>

</body>

</html>

2.方法二:js加css,还是麻烦

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .css1{

            width: 100px

            height: 200px

            border: 1px solid black

        }

        .css1:hover

 {

            border: 2px solid red

        }

    </style>

</head>

<body>

<div>这是一个div</div>

<script>

//    var div = document.getElementsByTagName("div")[0]

//    div.style.cssText = "border:1px solid redwidth:100pxheight:100px"

//    div.onmouseover = function () {

//        div.style.cssText = "border:1px solid blackwidth:100pxheight:100px"

//    }

//    div.onmouseout = function () {

//        div.style.cssText = "border:1px solid redwidth:100pxheight:100px"

//    }

 var div = document.getElementsByTagName("div")[0]

      div.setAttribute("class","css1")

</script>

</body>

</html>

其实完全可以不用js来设置css,这样会比较麻烦,最直接的方法就是在元素里面直接设置class,在style或者css文件里面定义样式,如果有伪类这些也可以写在里面就好。

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