• CSS基础——复合选择器

    一、定义

    复合选择器是建立在基础选择器的基础上的，对基本选择器进行组合形成的

    复合选择器可以更精确的，更高效的选择目标元素（标签），精确指出想要选择的标签，避免多选，错选。

    复合选择器是由两个或多个基础选择器，通过不同方式组合而成的

    常用的复合选择器：

    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器

    二、后代选择器

    1、标签选择器的后代

    1.     <ol>
    2.         加倍方法
    3.         <li>我是ol 的孩子li>
    4.         <li>我是ol 的孩子li>
    5.         <li>我是ol 的孩子li>
    6.         <li><a href="#">我是孙子a>li>
    7.     ol>

    像这种情况下，我们要选择里面的a标签的话，需要用到后代选择器来定位，而不是给全部的li标签都加属性，当然style属性是添加在head标签里面的，没写在body标签里面

    1.     <style>
    2.         ol li a {
    3.             color: red;
    4.         }
    5.  
    6.     style>

    2、类选择器+标签选择器的后代

    像这样：

    1.     <ul class="nav">
    2.         <li>我是ul 的孩子li>
    3.         <li>我是ul 的孩子li>
    4.         <li>我是ul 的孩子li>
    5.         <li><a href="#">不会变化的a>li>
    6.     ul>

     既有类选择器，又有标签选择器的，我们需要通过后代选择器，逐层深入，精确定位我们想要的添加属性标签位置

    1.     <style>
    2.         .nav li a {
    3.             color: yellow;
    4.         }
    5.     style>

    特点：

    • 在后代选择器中，多个元素之间是用空格隔开的，
    • 元素1是父级，元素2是自己，则最终选择是元素2
    • 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
    • 元素1和元素2可以是任意基础选择器 

    三、子选择器

    子选择器只能选择某一元素的子元素，不能选择其孙子元素，即只能选择器最近一级的元素

    需要使用大于号（英文状态下）

    如：

    1.     <style>
    2.         .nav>a {
    3.             color: red;
    4.         }
    5.     style>
    1. <body>
    2.     <div class="nav">
    3.         <a href="#">我是儿子a>
    4.         <p>
    5.             <a href="#">我是孙子a>
    6.         p>
    7.     div>
    8. body>

    特点：

    • 元素1和元素2之间要用大于号隔开
    • 元素1 是父级，元素2是子级，则最终选择的是元素2 
    • 元素2必须是亲儿子，其孙子，重孙之类的都不选择，区别于后代选择器，后代选择器是只要在它标签下的元素都会选定，需要层层深入

    四、并集选择器

    并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

    使用逗号隔开

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <style>
    5.         div,
    6.         p,
    7.         .pig li {
    8.             color: pink;
    9.         }
    10.     style>
    11. head>
    12.  
    13. <body>
    14.     <div>熊大div>
    15.     <p>熊二p>
    16.     <span>光头强span>
    17.     <ul class="pig">
    18.         <li>小猪佩奇li>
    19.         <li>猪爸爸li>
    20.         <li>猪妈妈li>
    21.     ul>
    22. body>
    23.  
    24. html>

    特点：

    • 元素1 和 元素2 中间用逗号隔开

    • 逗号可以理解为和的意思

    • 并集选择器通常用于集体声明

    五、伪类选择器

    分为：链接伪类，结构伪类，

    伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

    伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

    a:link 没有点击过的(访问过的)链接

    ​ a:visited 点击过的(访问过的)链接

    ​ a:hover 鼠标经过的那个链接 ​

    a:active 鼠标正在按下还没有弹起鼠标的那个链接

    为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>复合选择器之链接伪类选择器title>
    9.     <style>
    10.         /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
    11.         a:link {
    12.             color: #333;
    13.             text-decoration: none;
    14.         }
    15.  
    16.         /*2. a:visited 选择点击过的(访问过的)链接 */
    17.         a:visited {
    18.             color: orange;
    19.         }
    20.  
    21.         /*3. a:hover 选择鼠标经过的那个链接 */
    22.         a:hover {
    23.             color: skyblue;
    24.         }
    25.  
    26.         /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
    27.         a:active {
    28.             color: green;
    29.         }
    30.     style>
    31. head>
    32.  
    33. <body>
    34.     <a href="#">小猪佩奇a>
    35.     <a href="http://www.xxxxxxxx.com">未知的网站a>
    36. body>
    37.  
    38. html>

    六、focus伪类选择器

    :focus 伪类选择器用于选取获得焦点的表单元素。

    焦点就是光标，一般情况 类表单元素才能获取

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>focus伪类选择器title>
    9.     <style>
    10.         /* // 把获得光标的input表单元素选取出来 */
    11.         input:focus {
    12.             background-color: pink;
    13.             color: red;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <input type="text">
    20.     <input type="text">
    21.     <input type="text">
    22. body>
    23.  
    24. html>

    七、总结

  • 相关阅读:
    django ajax jquery csrf_exempt 设置favicon.ico
    手机备忘录如何批量导出来,备忘录整体导出方法介绍
    电脑性能参数了解
    Camunda 7.x 系列【50】任务服务 TaskService
    电脑复制和粘贴的时候会出现Hello!
    memcpy内存拷贝函数
    【漏洞复现】​金和OA存在任意文件读取漏洞
    数据库内容快速回顾
    积加（跨境ERP）与金蝶云星空单据集成对接
    【实战-08】flink DataStream 如何实现去重
  • 原文地址：https://blog.csdn.net/wujianrenn/article/details/127546073