建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

初学入门简单了解学习CSS的伪类

更新时间:2016-12-30整理编辑:建站学习网阅读:0

 :在HTML中当表现class属性的时候,人们可以用点(.)号来作为~=号的一个替代选择,所以div.value等同于div[class~=value]。此时.value只能严格的应用于HTML中的class属性,所以此类选择符叫类选择符。在CSS中样式通常依附与一个元素在文档树中的位置,这个简单的模型对于许多情况来说是足够的,但是一些常见的版式状态不能应用于文档树的结构。例如,在HTML中,没有元素能够引用一个段落的第一行,所以也没有简单的CSS选择符应用它。所以,CSS引进了伪类(pseudo-class)和伪元素(pseudo-element)来允许基于文档树意外信息的格式化。

  第一种:selector:pseudo-class {property: value} 也可以用HTML的class属性来设定伪类。

  例句:

以下是引用片段:
  a:link {color:red}

  第二种:selector.class:pseudo-class {property: value} 伪类是最常用的伪类。

  例句:

以下是引用片段:
  a.c1:link {color:red}

  锚(a)伪类

  CSS很多的建议并没有得到浏览器的支持,但有四个可以安全使用的用在连接上的伪类。锚(a)伪类是最常用的伪类。例句如下:

以下是引用片段:
  a:link {color: #FF0000} /* 未被访问的链接 红色 */
  a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
  a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
  a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

  也可以用HTML的class属性来设定伪类。例句如下:

以下是引用片段:
  a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */
  a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */
  a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */
  a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */

  例句:actived的顺序书写。

  注:由于CSS优先级的关系(后面比前面的优先级高),在写a的CSS时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

      注意

  尽管CSS给予你绕开的控制权,用不同的颜色表示已经访问过的连接是一个很好的习惯,因为很多用户还是这样预期的。伪类(除了hover)不常用,恐怕也没有过去常用。因此,它没有过去那样有用了。但如果你能收集常用用户的意见,你会发现应该使用它。

  传统上,连接文本是蓝色的,已访问的连接是紫色的。也许,这是最有效、最有用的颜色。然而,伴随着CSS的广泛发展,这种颜色不会是平常的了,用户也不再假设连接必须是蓝色或紫色的。

  还应注意

  你应该也可以在除了连接的其他元素上使用hover伪类。不幸的是,Internet Explore并不支持。这真是一个极大的烦恼,因为在其它浏览器上可以有很多小技巧让你的页面看起来更令人愉快。

本文网址:https://www.dedexuexi.com/divcss/jc/1720.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:技巧
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
怎样在网页中显示虚线
« 上一篇2016年12月30日
CSS网页设计时关于字体大小的设计
2016年12月30日下一篇 »
  • DIV CSS如何给文字字体添加下划线?
    0阅读
    在css中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。方法1:使用text-decoration属性设置css的text-decoration属性用于指定添加到文本的修饰,其underline属...
  • 纯CSS3实现带动画效果导航菜单无需js
    0阅读
    随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3。网页能表达的东西越来越多,css3兴起已经
  • CSS定义超链接四个状态的正确顺序L-V-H-A
    0阅读
    css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。 CSS属性的排列顺序: L-V-H-A 。 L-V-H-A是link、visited、hover、active的简写
  • 在ie7下css居中样式text-align:center;偏左问题解决方法
    0阅读
    css样式text-align:center;在ie7下偏左问题,想必有很多朋友的遇到过吧,下面有个不错的方法,大家可以参考下,希望对大家有所帮助 复制代码 代码如下: body { text-align:center; } 用ie7打开是居左的。
  • 对div盒子模型使用心得总结
    0阅读
    相信每一个从事web开发的人对盒子模型都有一个特殊的理解吧,本文也有一个理解并附有示例代码,喜欢的朋友可以参考下 盒子模型的计算 外边距(margin)+边框(border)+内边距(padding)+内容(content
 
QQ在线咨询