首页 > 代码库 > CSS3学习手记（二） 伪类选择器

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

2024-10-12 05:24:02   215人阅读

 

伪类选择器

  • 动态伪类
  • 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>

技术分享

 

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


联系
我们