CSS伪类和为元素

CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(例如 :visited),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置(例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式。

 

伪类与伪元素

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。下面分别对伪类和伪元素进行解释:

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

伪类

CSS伪类和为元素_第1张图片

 

伪元素

CSS伪类和为元素_第2张图片

伪类与伪元素的区别

下面是一个简单的html列表片段:

  • 我是第一个
  • 我是第二个

现在,我想给第一个元素添加样式,可以在为第一个

  • 添加一个类,并在该类中定义对应样式:

    //HTML
    
    • 我是第一个
    • 我是第二个
    //CSS .first-item{ color:pink; font-size:18px; }

    如果不用添加类的方法,我们可以通过给第一个

  • 设置:first-child伪类来为其添加样式。这个时候,被修饰的
  • 元素依然处于文档树中。

    li:first-child{
      color:pink;
      font-size:18
    }
    

    下面是另一个简单的html段落:

      

    Hello world,and wish you have a happy day!

    如果想要给该段落的第一个字母添加样式,可以在第一个字母中包裹一个元素,并设置该span元素的样式:

    //HTML
      

    Hello world,and wish you have a happy day!

    //CSS span{ color:pink; font-size:18px; }

     

    如果不创建一个元素,我们可以通过设置

    的:first-letter伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的元素并添加了样式,但实际上文档树中并不存在这个元素。

    p:first-letter{
      color:pink;
      font-size:18px;
    }
    

    从上述例子中可以看出,伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档数外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

    下面是一个简单的代码片段

    //HTML
    hello world
    

    现在,我想当鼠标悬停时,元素被激活时,元素被选中时有相同的样式:

    span:focus, span:hover, span:active{
                border-bottom: 4px solid #b4a078;
                color: #b4a078!important;
     }
    

    现在,我想给段落中的第一个字母和第一行设置相同的样式:

    //HTML 
     

    Hello world,and wish you have a happy day!

    //CSS p:first-letter:first-line{ color:pink; font-size:18px; }

    上述代码实现不了预想的结果。

    根据上面的例子我们可以发现,可以同时使用多个伪类,而只能同时使用一个伪元素;

     

    伪元素是使用单冒号还是双冒号?

    CSS3规范中的要求使用双冒号(::)表示伪元素,以此来区分伪元素和伪类,比如::before和::after等伪元素使用双冒号(::),:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。
    然而,除了少部分伪元素,如::backdrop必须使用双冒号,大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after也可以正确运行。

    一些老旧的浏览器不支持双冒号的写法,因此如果必须兼容旧浏览器,则应该使用单冒号写法。IE 从 9 开始支持双冒号写法。

    伪类

    CSS伪类和为元素_第3张图片

    伪元素

    CSS伪类和为元素_第4张图片

     

    转载:css伪类和伪元素区别

  • 你可能感兴趣的:(css)