CSS中的伪类和伪元素

1、和链接(<a>标签)相关的

  1. a:link--定义未访问的链接;
  2. a:visited--定义已经访问(根据浏览器中的历史记录)的链接;
  3. a:hover--定义鼠标滑过时的样式;
  4. a:active--定义鼠标单击时的样式

2、和段落(<p>标签)相关的

  1. :first-letter  创建下落的首字母,使得首字母更大更粗(只能用于块级元素);
  2. :first-line   用一种不同的颜色定义首行

  在CSS3中为了区分伪类和伪元素,表示时在伪元素前面加两个冒号,如下:

    ::first-letter和::first-line(若网站兼容Chrome、Opera、FF和Safari等浏览器,为了符合CSS3的规范,最好用两个冒号;但若不得不兼容IE浏览器,还是用CSS2的单冒号安全)

3、其他的伪类和伪元素(主流浏览器的最新版本都支持)

  1. :focus  (焦点落在某处时触发)
  2. :before  可在制定元素的前面添加内容(缺点是不支持:before选择器的浏览器不可见)

    还可以用before选择器为其改变固有样式(就像改变<ul>、<li>标签的样式一样)

   例:

<p class="tip">
  Hello World!
</p>
p.tip:before {
       content: "This is a tip!";
       color: red;  
}
  1. :after  伪元素,在元素后面添加内容
  2. ::selection  CSS3中的新伪元素,必须要写成双冒号

    针对访问者已经在网页上选中的项目(选中的文本);浏览器会高亮显示该文本(一般来说,IE是白色),也可以通过定义样式来改变

    IE8和Firefox不支持,需要加供应商前缀使支持:

     

 ::-moz-selection {
        .......
}

      
原文地址:https://www.cnblogs.com/zhaoyingli/p/5414206.html