Css复合选择器

子元素选择器

后代选择器 包含选择器，选择父元素中的子元素

/*选择元素1中的元素2 */
元素1 元素2 { 样式 }

元素1、元素2可以是任意基础选择器

<head>
    <style>
        .nav ul li a{
            color:red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li><a href="https://blog.csdn.net/qq_44156869/article/details/108582039">复合选择器</a></li>
            <li><a href="https://blog.csdn.net/qq_44156869/article/details/108582039">复合选择器</a></li>
        </ul>
    </div>
</body>

交集选择器 同时选择满足多个条件的，之间没有空格

元素1元素2 {样式声明}

<head>
    <style>
        /*把jjxz都变成粉色 */
        .person.jjxz{
            color:pink;
        }
        div.pig{
            font-size:50px;
        }
    </style>
</head>
<body>
    <div class="person pig">挤挤小猪</div>
    <div class="jjxz">紧急小子</div>
    <div class="pig">小猪佩奇</div>
</body>

并集选择器 用来集体声明，可以是各类选择器，通过逗号连接

/*选择元素1和元素2 */
元素1,元素2 {样式声明}

<head>
    <style>
        /*把小猪变成粉色 */
        div,
        p,
        .pig li{
            color:pink;
        }
    </style>
</head>
<body>
    <div>挤挤小猪1</div>
    <p>挤挤小猪2</p>
    <span>jjxz</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>乔治</li>
        <li>猪妈妈</li>
        <li>猪爸爸</li>
    </ul>
</body>

一般兄弟选择器

/*修改div后的所有p*/
div~p{
    color: red;
}

紧邻兄弟选择器

/*修改div后紧挨的p*/
div+p{
    color: red;
}

常用的伪类选择器 选择处于特殊状态的元素,用： 动态伪类 1.:link----未被访问的超链接 2.:visit----访问过的超链接 3.:hover----鼠标悬停 4.:active----元素激活 5.:focus----获取焦点

<head>
    <style>
        /*未访问*/
        a:link {
            color: black;
        }
        /*单机不松*/
        a:visited {
            color: red;
        }
        /*悬停*/
        a:hover {
            color: orange;
        }
        /*访问后*/
        a:active {
            color: blue;
        }
        /* */
        input:focus {
            background-color: green;
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https://www.taobao.com/">去淘宝购物</a>
    用户名：<input type="text">
</body>
</html>

结构伪类

:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第n个
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第n个

n的值： 2n 或 even ：选中序号为偶数的子元素。 2n+1 或 odd ：选中序号为奇数的子元素。 -n+3 ：选中的是前3个。

否定伪类 排除满足条件的元素:not()

<head>
    <style>
        /* 在div标签中排除.text3类 */
        div:not(.text3) {
            color: red;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>这是第1行文字</div>
    <div>这是第2行文字</div>
    <div class="text3">这是第3行文字</div>
    <div>这是第4行文字</div>
</body>

UI伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有disabled 属性）

checked

<head>
    <style>
        input:checked{
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    性别：<input type="radio">男 <input type="radio">女
</body>

enable & disabled

<head>
    <style>    
        input:enabled {
            background-color: red;
        }
        input:disabled {
            background-color: blue;
        }
    </style>
</head>
<body>
    用户名：<input type="text" disabled><br>
    密码：<input type="password">
</body>

语言伪类 根据指定的语言选择文字:lang()

 <head>
     <style>    
         div:lang(zh-CH) {
             background-color: green;
             color: orange;
         }
     </style>
 </head>
 <body>
     <div lang="zh-CH">一段文字1</div>
     <div>一段文字2</div>
 </body>

CSS复合选择器

Css复合选择器