css伪类选择器用法

1.静态伪类 超链接

在a标签中伪类的用法 :link :visited

:link 未被访问过的链接

:visited 已经被访问过的链接

系统会默认给访问过与没访问过的超链接显示不同的颜色

例：

<a href="http://www.baidu.com">百度</a>     如果访问过百度了 颜色会是 #551a8b

<a href="http://www.alibaba.com">阿里巴巴</a>    如果没访问过阿里巴巴 颜色会是 #0000ee

如果想要修改未访问过的链接颜色 

a:link{color: aqua;}

如果要修改已经访问过的链接的颜色

a:visited{color:red}

注意：visited只能改变颜色属性，其他都都不能改变 link可以改变颜色也可以改变字体大小 

 不管是访问过还是没有访问过的链接，他都改变了字体

a:visited{color:red;font-size:50px} 无效

a:link{color: aqua;font-size:10px}所有的链接都改变了字体大小 

2.动态伪类：针对所有标签都适用的样式

• :hover “悬停”：鼠标放到标签上的时候
• :active “激活”： 鼠标点击标签，但是不松手时。
• :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

我要写一个鼠标悬停变色，我就得用伪类选择器的:hover来选择

<ul>

        <li>1234</li>         li:hover{color:red;font-size: 25px;}//鼠标放在标签上显示红色并字体颜色变                                        为25px 离开标签显示原来的颜色并字体颜色为原来的字体大小

</ul>

:active可以让你鼠标点击但是不松开时显示你的CSS效果 

<ul>

        <li>1234</li>         li:active{color:red;font-size: 25px;}//鼠标点击标签上显示红色并字体颜色                                         变为25px 松开鼠标标签显示原来的颜色并字体颜色为原来的字体大小

</ul>

:focus选择是针对于输入框等其他内容的

<input type="text">          input:focus{height: 100px;}//输入框获取焦点时输入框的高度会变100px                                            失去焦点时会变回原来的高度

3.我们有时候会用到一些像列表一样的结构，比如这样 需求：让第一个li的颜色变为红色

<ul>

        <li>1</li>                                ul li:nth-child(1){color:red}//第一个li的颜色会变为红色

        <li>2</li>

        <li>3</li>

        <li>4</li>

</ul>

嵌套时的选择器用法 选择第一个li的颜色为红色

<ul>

        <a>

            <li>1</li>                   ul a:nth-child(1) li{color:red} 或者 a:first-child li{color: red}//第一个li的                                                颜色会变为红色

        </a>

        <a>

            <li>2</li>

        </a>

        <a>

            <li>3</li>

        </a>

        <a>

            <li>4</li>                               ul a:nth-child(4) li{color:red} 或者 a:last-child li{color: red}//最                                                           后一个li的颜色会变为红色

        </a>

    </ul>

4.选择单数双数有更简单的，odd （奇数）和 even（偶数） 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

<ul>

        <a>

            <li>1</li>                                 ul a:nth-child(odd) li{color:red;}//第一个和第三个都是红色

        </a>

        <a>

            <li>2</li>                               ul a:nth-child(even) li{color:red;}//第二个和第四个都是红色

        </a>

        <a>

            <li>3</li>

        </a>

        <a>

            <li>4</li>

        </a>

    </ul>

5.反选 除了我选中的 其余相同的元素添加css效果 需求：除了第一个 其他的颜色为红色

<ul>

        <a>

            <li>1</li>                   ul a:not(:first-child) li{color: red;}//除了第一个 其他的颜色为红色

        </a>

        <a>

            <li>2</li>

        </a>

        <a>

            <li>3</li>

        </a>

        <a>

            <li>4</li>

        </a>

    </ul>

6.另一个选择方式——:first-of-type这个是直接选择父元素标签内指定标签的第一个元素

<ul>                                   在ul中不仅仅只有li元素 这时候我们选择li用ul li:nth-child(1){color:red}                                              就会失效 可以用:first-of-type是直接选择父元素标签内指定标签的第一                                            个元素

                                           例： li:first-of-type {color: red;} //第一个就会变红色 用li:last-of-type也                                               可以让最后一个li变色 用li:nth-of-type(1) {color: red;}可以选择让谁                                               变色 下标也是从1开始

        <p>123</p>                

        <p>456</p>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>