web前端css的复习（三）伪类选择器

目录

1. 通配符选择器
2. 链接伪类选择器
3. 结构伪类选择器（css3）
4. 目标伪类选择器

本篇文章将为大家介绍css注释的作用，通配符选择器，和伪类选择器的介绍。冲鸭，小伙伴们

1. 通配符选择器
   
   让页面内所有的标签全部起作用，能匹配页面内所有的元素。一般用来清除html标记的默认间距。

* {
padding: 0;
margin: 
}

       上面的写法是清除浏览器本身自带的默认间距，不过一般在真正项目中不常用，用的话也是在局部加，不会用通配符，知道就好。

2. 链接伪类选择器
   
   用处：主要针对a标签。
   
   具体使用：

       a: link{伪类选择器紧靠标签或选择器}
       简写:
       一般实际的企业开发中，只会用到hover这个伪类，其他的非常非常的不常见，这样我们就没有必要去把这几个链接伪类都写上，完全可以先设定a的基本标签，然后直接a:hover{}省空间，并且简洁。

       注：四个伪类一起用时，千万不要功能冲突的伪类一起用，比如link和visited一起用，hover和active一起用。

3. 结构伪类选择器（css3）
   
   本来不想怎么快的介绍css3的，但是这个放在这里讲的话更容易很深刻的记住它。下面开始吧。
   
   上面的总结可能不是很通俗易懂，那就让我们来几个例子尝试下吧。

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

       复习一下我们前面学习过的无序列表，就是上面的拿那种写法。

       那我们用上面的结构伪类来为无序列表添加简单的样式吧。

<style>
        li:first-child{
            color: red;
        }
        li:last-child{
            color: blue;
        }
        li:nth-child(2){
            color: pink;
        }
        li:nth-last-child(2){
            color: green;
        }
    </style>

       再加入了我们上面的样式的时候，我们会发现，这个无序列表发生了很大的变化。即这样。

       这是直接选择的写法，上面不是在nth-child那里说了什么偶数，奇数啊什么的嘛，接下来你看看这几行代码。

        li:nth-child(even){
            偶数位全部被选中。
        }
        li:nth-child(odd){
            奇数位全部被选中。
        }
        li:nth-child(n){
            全部被选中。
        }
        li:nth-child(2n){
            偶数位全部被选中。
        }
        li:nth-child(2n-1){
            奇数位全部被选中。
        }

       上面的代码介绍了nth-child（）里面的公式的写法，在大型网站，例如后面会出的比较典型的小米官网将会大量的采用这种方法。

4. 目标伪类选择器
   
          :target目标伪类选择器，选择器可用于选取当前活动的目标元素。通俗地讲吧，html页面里有一个p标签，当你鼠标作用到html里的p标签的时候，它就会发生你设定的变化。

       用法：

:target{
直接这样写，修改当前活动的目标元素。
}