CSS3学习手记（二）伪类选择器

时间：2017-06-26 14:54:35 阅读：174 评论：0 收藏：0 [点我收藏+]

标签：selector not abc 参数 cond src html width round

伪类选择器

动态伪类
UI元素状态伪类
CSS3结构类
否定选择器
伪元素

动态伪类

这些伪类并不存在于HTM中，只有当用户和网站交互的时候才能体现出来

锚点伪类 :link :visited
用户行为伪类 :hover :active :focus（获取鼠标焦点）

UI元素状态伪类（CSS3新增）

我们把:enabled,:disabled,:check伪类称为UI元素状态伪类兼容IE9以上 check只兼容OPera

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
  input{width: 200px;height: 30px;border: 1px solid #f00;}
  /*不可编辑*/
  input:disabled{background: #abcdef;border: 1px solid green;}
  /*可编辑*/
  input:enabled{width: 200px;height: 30px;border: 1px solid yellowgreen;}
        </style>
    </head>
    <body>
 <input type="text" disabled="disabled">
 <input type="text">
 <input type="text">
 <input type="text">
    </body>
</html>

技术分享

CSS3结构类（nth选择器）

选择方法

first-child 选择属于其父元素的首个子元素的每个Element元素，并为其设置样式兼容IE8以上
last-child 指定属于父元素的最后一个子元素的Element元素样式兼容IE8以上
nth-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型兼容IE9以上（关于参数n n是一个简单的表达式，取值从0开始，这里只能是n，不能使用其他字符 odd(奇数) even（偶数）
nth-last-child(n) 匹配属于其父元素的第N个子元素，不论元素的类型，从最后一个子元素开始计数兼容IE9以上
nth-of-type(N) 选择器匹配属于父元素的特定类型的第N个子元素的每个元素兼容IE9以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
div:nth-of-type(2){color: red}
        </style>
    </head>
    <body>
    <div>0-1</div>
    <section>
        <div>1-1</div>
        <div>2-1</div>
        <div>3-1</div>
    </section>
    <div>0-2</div>
    <div>0-3</div>
    <section>
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
    </section>
    </body>
</html>

技术分享

nth-last-of-type(N) 选择器匹配属于父元素的特定类型的第N个子元素的每个元素从最后一个元素开始匹配兼容IE9以上
first-of-type 选择器匹配属于其父元素特定类型的首个子元素的每个元素兼容IE9以上
last-of-type 选择器匹配属于其父元素特定类型的最后一个子元素的每个元素兼容IE9以上
only-child 选择器匹配属于其父元素唯一子元素的每个元素兼容IE9以上
only-of-type 择器匹配属于父元素的特定类型的唯一子元素的每个元素兼容IE9以上
empty 选择器匹配没有子元素（包括文本节点）的每个元素兼容IE9

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
      div{height: 30px;width: 200px;background: #abcdef;margin-top: 10px;}
      div:empty{background: red}
        </style>
    </head>
    <body>
    <div></div>
    <div>second</div>
    <div>Third</div>
    </body>
</html>

技术分享

否定选择器（not）

:not(Element/selector)选择器匹配非指定元素/选择器的每个元素

语法格式

父元素：not(子元素/子选择器) 兼容IE9

原

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{margin: 0;padding: 0;border: none;}
        nav{width: 800px;margin: 0 auto}
        a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
        nav > a{display: block;border-right: 1px solid red}
        </style>
    </head>
    <body>
    <nav>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
    </nav>
    </body>
</html>

技术分享

改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{margin: 0;padding: 0;border: none;}
        nav{width: 800px;margin: 0 auto}
        a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
        nav > a:not(:last-of-type){display: block;border-right: 1px solid red}
        </style>
    </head>
    <body>
    <nav>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
        <a href="#">我是导航</a>
    </nav>
    </body>
</html>