复合选择器

作者: 7月28 | 来源:发表于2019-07-30 16:39 被阅读0次

前端学习之CSS——复合选择器
十一、CSS复合选择器
css的复合选择器
11-CSS选择器-复合选择器
2022-02-03 CSS第二天
CSS复合选择器
前端修炼の道 | 你知道哪些复合选择器？
css美化网页元素
CSS相关---复合选择器
CSS笔记2：选择器

先上代码

<ul>
  <li class = "header">
     <a href = "#">一级标题</a>
     <div>
          <a href = "#">二级标题</a>
          <a href = "#">二级标题</a>
          <a href = "#">二级标题</a>
     </div>
     <p class = "test_p">段落</p>
  </li>
  <li class = "footer">
     ...
  </li>
</ul>

后代选择器

1.说明：选择某个标签下的所有子标签
2.用法：把外层标签写在前面，内层标签写在后面，中间用空格分开，选择li标签下的所有a标签

<style>
    li a{
         color : red;
    }
</style>

3.延展：可以用类名来代替标签选择，例如

<style>
   .header a{
        color : red;
   }
</style>

子代选择器

1.说明：选择某个标签下的直属子标签
2.用法：用">"进行分割
3.示例: 选择一级标题

<style>
   li > a{
      color : green;
   }
</style>

交集选择器

1.说明：表示既又的关系，类似且的关系
2.示例：选一个类名叫header的li标签

<style>
   li.header{
   }
</style>

注意：类名不能以数字开头

并集选择器

1.说明：表示或的关系，应用于相同样式的标签
2.用法：用逗号进行连接
3.实例：将a标签和段落标签的背景颜色都设置为红色

<style>
  a,p{
     background-color : red;
  }

</style>

也可以用类名进行替换

<style>
   a,text_p{ 
      background-color : red;
   }
</style>

伪类选择器

1.说明：用于修改链接文本的颜色状态等(鼠标移动到文字身上时，点击链接跳转后，用户点击按下时)
2.用法：“:”加状态,必须按着规定顺序来，依次是":link"、":visited"、":hover"、":active" 顺序互换将不起作用
3.实例:

<head>
    <style>
       a:link{/*链接的基础状态*/
           color: #333333;
       font-size: 25px;
       text-decoration: none; /*取消下划线 */
       font-weight: 700;/*粗细*/
       }
     a:visited{/*链接点击过后的状态*/
          color : red; /*链接点击后颜色变为红色*/
     }
   a:hover{/*鼠标经过时的状态*/
          color:green;
   }
  a:active{/*用户选择按下时的状态*/
         color:skyblue;
}

    </style>
</head>
<body>
    <a href = "#">链接</a>
</body>