CSS之复杂选择器

选择器

选择器可以分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的对基础选择器进行组合的形式。
复合选择器可以更加高效的，选择目标元素或者标签。
复合选择器由两个或者多个基础选择器，通过不同方式组合而成的。
常用的复合选择器包括，后代选择器，子选择器，并集选择器，伪类选择器等等。

1. 复合选择器之后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是将外层标签写在前面，内层标签写在后面，中间用空格分开，当标签发生嵌套时内层标签就称为外层标签的后代。

    <ul>
            <li>ni</li>
            <li>12</li>
            <li>3445</li>
        </ul>



<ol>
    <li>34</li>
    <li>44</li>
    <li>66</li>
</ol>

用后代选择器来确定ul标签中的li

uo li
{ color: pink; }


其语法格式是，
元素1 元素2 {样式声明}

元素1和元素2 一定使用空格分开。
元素1是父级，元素2是子级，最终选择元素2。

2.子选择器

只能选择作某元素的最近一级子元素，简单理解就是选择亲儿子元素标签。

 <div class="nav">
            <a href="">
                <p>我是你大爷！</p>
            </a>
            <p><a href="#">你大爷的！！！</a></p>
        </div>


.nav>a{
 color: pink; 
}



其语法格式是，
元素1 >元素2 {样式声明}

#3.并集选择器

可以选择多组标签，同时为他们定义相同样式，通常用于集体声明。

  <div> 熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul class="pig">
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>

        </ul>

其中style的写法是

div,p
{
color: pink;
}
其中的div，p，中的，号是和的意思。

其语法格式是，
元素1 ,元素2 {样式声明}
其中任何形式的选择器都可以作为并集选择器的一部分。

4.伪类选择器

用于某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第一个，或第n个元素。
伪类选择器书写的最大特点是用冒号表示，比如：hover，first-child。
伪类选择器有很多，比如说，链接伪类，结构伪类，最常用的是链接伪类。

链接伪类选择器

a：link	选择所有未被访问的链接
a:visited	选择所有已经被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起的链接）

 a:visited {
        color: #000;


    }

    a:link {
        color: rgb(255, 0, 0);
        text-decoration: none;

    }
    a:active{ color: blue;}

链接选择器注意事项
1.为了确保生效，请按照LVHA的顺序声明：：link-，：visited-,:hover-,active
2.记忆法，love hate或者lv包包hao。
3.因为a链接在浏览器中具有默认样式，所以在实际工作中，都需要给链接单独指定样式。

：focus伪类选择器

用于选择获得焦点的表单元素。
焦点就是光标，一般情况小，input标签表单元素才能获取，因此这个选择器也主要对于表单元素来说。

input:focus
{
  background-color: yellow;
  
}

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格，.van a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是>，.van>a
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号，.van，a
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover实际开发的写法
：focus选择器	选择获得光标的表单	跟表单相关	较少	input：focus记住这个写法