伪类和伪元素

伪类:

    伪类用于定义元素的特殊状态.spa

   伪类的做用:  

    • 当用户将鼠标悬停在元素上时为其设置样式
    • 样式访问和未访问的连接不一样
    • 在得到焦点时设置元素的样式

   伪类的语法:  

selector:pseudo-class {
    property:value;
}

  

  伪类的种类(以a做为selector):

    a:link : 鼠标点击后selector的效果
code

    a:visited: 鼠标移过去后selector的效果blog

    a:hover: 鼠标停留在该selector上的效果element

    a:active: 鼠标点击该selector的效果it

    (还有更多的种类在此就不一一列举了.)io

   注意: 在CSS定义中 a:hover必须在 a:linka:visited 以后能生效.  a:active 必须在 a:hover 以后才能有效!伪类名称不区分大小写。class

 

伪元素:

      CSS伪元素用于设置元素的指定部分的样式。select

   伪元素做用:

  • 设置元素的第一个字母或行的样式
  • 在元素内容以前或以后插入内容

   伪元素的语法:

selector::pseudo-element {
    property:value;
}

伪元素的种类(以p为selector)

 

      p::after : 在每一个<p>元素的内容后面插入一些内容语法

 

      p::before: 在每一个<p>元素的内容前面插入一些内容样式

 

      p::first-letter: 选择每一个<p>元素的第一个字母

 

      p::frist-line: 选择每一个<p>元素的第一行

 

      p::selection: 选择由用户选择的元素的部分

 

 伪类与伪元素的异同点:

   相同点:

      1.语法都是  "选择器 + 单/双冒号 + 内容(属性值)".

      2.都是对指定选择器的样式的设定起做用.

   不一样点:

      1.伪类使用的是单冒号" : ",而伪元素使用的是双冒号" :: " .

      2.伪类的做用范围为整个选择器的全部内容,如 a:hover{ color:red }; 当你把鼠标移动到这个a这个标签的时候,整个a标签的颜色会变成红色.

相关文章
相关标签/搜索