目录
结构性伪类选择器
UI元素状态伪类选择器
首页 web前端 前端问答 html5/css3增加了哪些伪类

html5/css3增加了哪些伪类

Jun 02, 2021 pm 03:10 PM
html

新增的伪类有:“:first-child”、“:last-child”、“:nth-child(n)”、“:link”、“:visited”、“:active”、“:hover”、“:focus”、“:not()”等。

html5/css3增加了哪些伪类

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

结构性伪类选择器

:first-child   第一个子节点、:last-child   最后1个子节点、:nth-child(n)  第n个子节点、:nth-last-child(n)  倒数第n个子节点、:only-child  唯一的子节点

:nth-child(n)、:nth-last-child(n)还有一些特殊用法,通过括号内的东西来限制选择:

1、odd/event:第奇数个/偶数个元素

 2、xn+y:第xn+y个元素

话不多说上代码,下面是对li标签设置伪类选择器

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!DOCTYPE html>

<html>

  <head>

    <title></title>

    <style type="text/css">

      li:first-child {

        border: 1px solid black;

      }

 

      li:last-child {

        background-color: #aaa;

      }

 

      li:nth-child(2) {

        color: #888;

      }

 

      li:nth-last-child(2) {

        font-weight: bold;

      }

 

      span:only-child {

        font-size: 30pt;

      }

    </style>

  </head>

  <body>

    <ol>

      <li>oaaaaaaaaaaa</li>

      <li>obbbbbbbbbbb</li>

      <li>occccccccccc</li>

      <li>odddddddddd</li>

      <li>oeeeee</li>

      <li><span id="andorid"></span>saaaaaa啊飒飒</li>

    </ol>

  </body>

</html>

登录后复制


可以看到不同的效果

UI元素状态伪类选择器

:link(未被访问前的元素(通常只能是超链接))、:visited(已被访问过的元素(通常只能是超链接))、:active(正在被访问的元素即鼠标点击与释放之间(通常只能是超链接))、:hover(鼠标悬停状态的元素)、:focus(已得到焦点的元素)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPE html>

<html>

  <head>

    <title></title>

    <style type="text/css">

      .a {

        font-size: 50px;

      }

      .a:link {

        color: red;

      }

      .a:visited {

        color: grey;

      }

      .a:active {

        color: green;

      }

      .b {

        height: 40px;

        width: 200px;

      }

      .b:focus {

        background-color: blue;

      }

      .c {

        height: 40px;

        width: 60px;

      }

      .c:hover {

        background-color: skyblue;

      }

    </style>

  </head>

  <body>

    <a href="#" class="a">aaa</a>

    <form action="#">

      文本框:<input type="text" name="aaa" class="b" />

      <input type="submit" value="提交" class="c" />

    </form>

  </body>

</html>

登录后复制

一开始是这样的

 

当我们点击超链接

 

点击后

接下来看文本框,当我们把焦点放在文本框上(也就是文本框的可输入状态),获得了:focus中的样式

 再看按钮,当鼠标悬停在按钮上,获得:hover中的样式(因为作者要截图,一截图就截不到光标了,所以图中看不到光标)

 :not()伪类选择器相当于两个选择器做减法,如  li:not(#a){}修饰符合li选择器但是不符合id为a的所有元素块

推荐学习:css视频教程

以上是html5/css3增加了哪些伪类的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

HTML 中的嵌套表

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 中的表格边框

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

在 HTML 中移动文本

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮

您如何在PHP中解析和处理HTML/XML? 您如何在PHP中解析和处理HTML/XML? Feb 07, 2025 am 11:57 AM

您如何在PHP中解析和处理HTML/XML?

See all articles