CSS---复合选择器

一：复合选择器的介绍

二、复合选择器的讲解

（1）后代选择器

（2）子元素选择器

（3）并集选择器

（4）链接伪类选择器

（5）focus伪类选择器

一：复合选择器的介绍

前面介绍了基础选择器，那什么是复合选择器呢？复合选择器是建立在基础选择器的基础上对目标元素进行更准确更高效的选择，常用的复合选择器有：后代选择器，子选择器，并集选择器，伪类选择器等等。本文就对这四种复合选择器进行讲解介绍。

二、复合选择器的讲解

（1）后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。当然不仅仅是子元素，孙子元素也可以，只要是它的后代元素就可以。


ul li {
 
}
选择的<ul>标签中的<li>标签

出现多个标签，想选择固定的就是用class取名字来区分


<style>
        .s9 {
            color: red;
        }
style>
 
<body>
    <ul class="s9">
        <li>`````li>
    ul>
    <ul>
        <li>>>>>>li>
        <li><a href="#">点我a>li>
    ul>
    <ol>
        <li>sdli>
        <li>88sdli>
        <li>opopopoli>
    ol>
body>


html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        ul a {
            color: red;
        }
    style>
head>
 
<body>
    <ul>
        <li>>>>>>li>
        <li><a href="#">点我a>li>
    ul>
    <ol>
        <li>sdli>
        <li>88sdli>
        <li>opopopoli>
    ol>
body>
 
html>

（2）子元素选择器

子元素选择器只能选择最近一级的子元素，可不仅仅只是一个元素，只要是它的亲儿子就行，也可能是多个。像下面的例子中

标签里的标签就不会选中，因为是孙子元素。

元素1 > 元素2


<style>
        .ss>a {
            color: red;
        }
style>
 
<body>
    <div class="ss">
        <a href="#">牛逼a>
        <p>
            <a href="#">哦哦哦哦哦哦a>
        p>
        <a href="#">99999a>
    div>
body>

（3）并集选择器

并集选择器可以选择多组标签同时定义相同的样式。并集选择器是通过英文逗号连接。

元素1,元素2,元素3......


<style>
        div>a,
        .ss .o,
        .k9 {
            color: red;
        }
 style>
<body>
    <div class="ss">
        <a href="#">牛逼a>
        <p>
            <a href="#">哦哦哦哦哦哦a>
        p>
        <a href="#">99999a>
    div>
    <ul class="k9">
        <li>安徽li>
        <li>江南li>
    ul>
    <ul class="ss">
        <li class="o">北京li>
        <li>浙江li>
    ul>
body>

（4）链接伪类选择器


a:link      选择所有未被访问的链接
a:visited   选择所有已经被访问的链接
a:hover     选择鼠标指针位于其上的链接
a:active    选择活动链接(鼠标按下为松开的链接)

如果想要全部写的话，是按照一定的顺序的。linked---visited---hoverr---active。


<style>
        a {
            color: aliceblue;
        }
        
        a:hover {
            color: red;
        }
style>
<body>
    <a href="#">点我a>
body>

（5）focus伪类选择器

foucus伪类选择器可以帮助我们选择光标的，一般我们用来与一起使用。


 <style>
        input:focus {
            background-color: deeppink;
        }
 style>
 
<body>
    <input type="text"> <input type="text"> <input type="text">
body>

相关阅读:
使用 Dumpling 备份 TiDB 集群数据到兼容 S3 的存储
vite + vu3 + ts 项目，npm run build 报错
vue监听表单输入的身份证号自动填充性别和生日
Java中对date数据做加减时间运算——Calendar类
[Gradle]IDEA GradleUse Gradle from选项
商家收款码1000需要多少手续费
MogaFX提供查看即时结果的机会
基于左序遍历的数据存储实践
【鲁棒电力系统状态估计】基于投影统计的电力系统状态估计的鲁棒GM估计器（Matlab代码实现）
一个简单的HTML篮球网页【学生网页设计作业源码】

原文地址：https://blog.csdn.net/gaoqiandr/article/details/127955515