一, a 标签的伪类选择器注意点
(1)a 标签的伪类选择器可以单独出现, 也可以一起出现. 也就是可以设置多个状态的样式.
(2) a 标签的伪类选择器如果一起出现, 那么有严格的顺序要求, 编写的顺序必须要遵守原则: (love\hate 原则, 即 link\visited\hover\active) 默认状态, 被访问后的状态, 悬停状态, 长按状态
(3) 如果默认状态的阿燕是和被访问过的状态的样式一样, 那么可以缩写为
a{ color: 颜色;}, 后面写了另外两种状态? 也是不影响的.
二, 快捷键
(1)ul>(li>a)*8 再点击 Tab 就可以自动生成列表
(2) 按住 Alt 键, 然后点击光标向下拉
三, 练习
(1) 在企业开发过程中编写 a 标签的伪类选择器最好写在标签选择器的后面?(2) 在企业开发中, 和 a 标签盒子相关的属性, 都写在标签选择器中 (包括盒子的模式, 宽度, 高度, padding,margin)
(3) 在企业开发中和 a 标签文字, 背景, 相关的都写在伪类选择中
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- D161_PseudoClassCautions
- </title>
- <style>
- *{ margin:0; padding:0; } ul{ width:960px; height:40px; background-color:
- green; margin:100px auto; } li{ width:120px; height:40px; list-style: none;/*
- 去掉前面的小黑点 */ float:left; background-color: purple; text-align: center;/*
- 文字的水平排版 */ line-height:40px;/* 文字行高和该行一样高 */ color:black; ? } ul li a {
- /* 这个 a 标签这里设置了它的大小, 可以理解为作用域变成和 li 一样大, 因为我们想要让 整个小盒子都是作用域, 如果不写这段大小设置的话,
- 那么作用域就只有文字大小了 */ width:120px; height: 40px; display:inline-block; } ul
- li a:link{ color:white; text-decoration:none;/* 去掉文字下划线 */ background-color:
- pink;/* 这里讲解一个方法: 就是如何判断作用域, 我们可以采用加个背景颜色的方法, 来进行判断 */ } ul li a:hover{
- color:red; background-color: grey; ? } ul li a:active{ color:yellow; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- <li>
- <a href="#">
- 我是导航条
- </a>
- </li>
- </ul>
- </body>
- </HTML>
二, 源码:
D161_PseudoClassCautions.HTML
地址:
- https://github.com/ruigege66/HTML_learning/blob/master/ D161_PseudoClassCautions.HTML
- 2.CSDN:https://blog.csdn.net/weixin_44630050
3. 博客园: https://www.cnblogs.com/ruigege0000/
来源: http://www.bubuko.com/infodetail-3387410.html