12.伪类选择器与伪元素的应用

Posted jieling

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;

以上是关于12.伪类选择器与伪元素的应用的主要内容,如果未能解决你的问题,请参考以下文章

CSS之复合选择器与伪类选择器

CSS之复合选择器与伪类选择器

CSS之复合选择器与伪类选择器

伪类与伪元素

高手说一说css类与伪类,对象与伪对象的区别,简单易懂一些

css知识点总结