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

Posted 2021-12-20 jieling

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

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；