zoukankan      html  css  js  c++  java
  • CSS伪类

    CSS伪类

    CSS伪类分为UI伪类结构化伪类,通常会使用一个":"+伪类名一起使用(而"::"表示的是伪元素)UI伪类通常伴随着某个动作对页面中的某个标签的样式进行更改。这些动作通常包括鼠标悬浮和点击等。而结构化伪类就是为了能够快速的定位某个标签和怎加定位页面中标签的方法,从而减少CSS中的代码量。

    有关CSS伪类和结构化伪类的详细介绍可以访问菜鸟教程MDNw3school

    UI伪类

    关于CSS中的UI伪类有:

    1. 链接伪类:
    • :Link。等待用户的点击
    • :visited。已访问过的链接
    • :hover。鼠标悬停在链接上
    • :active。链接正在被点击
    1. :focus伪类:在标签被触发获得焦点时,会触发focus伪类中的样式。

      例如:输入框获得焦点时会伴有蓝色的边框

      input:focus {border:1px solid blue;} 
      
    2. :target 伪类:如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以 用:target 伪类选中它。

    结构化伪类

    结构化伪类的特点是可以具体到第几个标签,比如第一个标签、最后一个标签、第n个标签。

    1. :first-child 和:last-child

      :first-child 代表一组同胞元素中的第一个元素,而:last-child 则代表最后一个。

      例如:

      body:first-child {color:black;}<!-- 代表body标签中的第一个子标签设置为黑色 -->
      body:last-child {color:black;}<!-- 代表body标签中的最后一个子标签设置为黑色 -->
      
    2. :nth-child(n)

      :nth-child(n)代表第n个子标签。

      例如:

      body:nth-child(3) {color:black;}<!-- 代表body标签中的第三个子标签设置为黑色 -->
      

    参考《CSS设计指南第三版》

  • 相关阅读:
    iOS 将对象的属性和属性值拆分成key、value,通过字符串key来获取该属性的值
    [IOI2005] Riv 河流
    [洛谷P4549] [模板] 裴蜀定理
    [NOIp2013] 货车运输
    [NOIp2015] 运输计划
    18.10.01模拟赛总结
    [洛谷P3369] 普通平衡树 Treap & Splay
    [NOIp2016] 组合数问题
    [洛谷P4777] [模板] 扩展中国剩余定理
    [洛谷P3384] [模板] 树链剖分
  • 原文地址:https://www.cnblogs.com/JAVA-54188/p/13740977.html
Copyright © 2011-2022 走看看