zoukankan      html  css  js  c++  java
  • 12.伪类选择器与伪元素的应用

    在之前的文章中我们已经了解过选择器的使用, 如果想对同一个元素在不同的状态时,展示不同的效果,则需要使用到今天要讲的伪类选择器

    A. 伪类选择器: 是一个以冒号作为前缀,被添加到一个选择器的末尾的关键字;

        依据使用的方式,可以分为如下三种类型:

        a. 状态类伪类选择器: 

              :checked;  当表单元素被选中时的样式;  

              :hover;  当鼠标在元素上时的样式;

              :active; 当元素被时的样式; (一般为按下鼠标未松开时的状态)

              :focus; 当按TAB使某个元素获得焦点时的样式;(现在一般不对本状态做特殊处理了,因为好少用TAB来切换了)

              -----------------------------------------------

              对于<a>标签,还有一些特定的状态类伪类选择器

              :link;  初始未被点击跳转的状态;

              :visited;  已经被点击过的状态;

        b. 结构类伪类选择器:  :nth-child(n);  :nth-last-child(n);  :nth-of-type(n);   :nth-last-of-type(n);   :first-child;  :first-of-type;

             :nth-child(n);  以伪类选择器前面的选择器选中的元素的所有兄弟元素为基础, 若第n个选择也刚好符合选择器的规则,则应用相应的样式;

             :nth-lat-child(n); 规则与nth-child(n)一样,只不过是在兄弟元素中倒着来数

             

      

        :nth-of-type(n);  这个伪类选择器,只考虑冒号前选择器兄弟元素中的同类元素, 不考虑其它元素; 

        :nth-last-of-type(n); 在同类元素中倒着来数就好了

        :first-child; 等价于 :nth-child(1);  是考虑所有兄弟元素的;  倒着来就是  :last-child;  最后一个

        :first-of-type;  等价于 :nth-of-type(1); 不考虑非选择器指定的元素; 倒着一就是 :last-of-type;

        c. 属性类伪类选择器: 

         [attr]  取包含了指定属性的元素;  

         [attr=value]    取包含了指定属性元素,并且属性值完全等于value的元素

         [attr^=value],   取包含了指定属性的元素, 并且属性值是以value开始的元素

         [attr~=value]   取包含了指定属性的元素, 并且属笥值中, 独立存在的一部分内容为value

         [attr$=value]   取包含了指定属性的元素,并且是以value结束的元素

         [attr*=value]   取包含了提定属性的元素性,并且属性中任何位置包含value的元素

       

    B. 伪元素的应用

         伪元素, 就是通过::before, :after 在元素的前面或后面创建出来的一个元素, 

         

        注意: 由于::before; ::after 生成的伪元素, 包含在元素格式框内(即:开始和结束标签之间)

                 因此不能应用在替换元素上;  比如 <img> 或 <input>元素.

       注意:  伪元素必须要有 content 属性, 哪怕将值设置成空都可以,要不然,伪元素无效;

                 使用方法:              content:"文本内容";   或                content:url(图牌路径);

        注意: 伪元素不会影响结构选择器; 

                    伪元素不会被搜索引擎收录; 不会影响网页的SEO;

  • 相关阅读:
    WebApi-JSON序列化循环引用
    Android ImageSwitcher
    Android Gallery
    理解URI
    WebApi入门
    URL的组成
    Http协议
    python __new__和__init__的区别
    11.6
    win7 32位用pyinstaller打包Python和相关html文件 成exe
  • 原文地址:https://www.cnblogs.com/jieling/p/10975675.html
Copyright © 2011-2022 走看看