zoukankan      html  css  js  c++  java
  • 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 {
            .......
    }
    
          
  • 相关阅读:
    Vue双向绑定的实现原理系列(一):Object.defineproperty
    TCP协议中的三次握手和四次挥手
    一切事物皆对象_进阶篇
    一切事物皆对象_基础篇
    自成一派的正则表达式
    超好用的模块
    软件目录开发规范
    迭代器与生成器
    不怎么好吃的语法糖
    你可造什么是函数
  • 原文地址:https://www.cnblogs.com/zhaoyingli/p/5414206.html
Copyright © 2011-2022 走看看