CSS入门---复合选择器学习与掌握

最新推荐文章于 2024-04-06 19:41:17 发布

thorn豆豆

最新推荐文章于 2024-04-06 19:41:17 发布

阅读量149

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_45067479/article/details/109824823

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css基础选择器的学习与掌握

一.
css复合选择器分为：后代选择器，子选择器，并集选择器，伪类选择器（css选择器具体分类看我css选择器思维导图）

二.
（1）后代选择器
元素1 元素2{ 声明 }
1.上述语法表示选择元素1中的所有元素2
2.元素1 2用空格分开，元素1是父集，元素2是子集；最终选的是元素2
3.元素2可以是儿子，孙子；层层查找就可以
4.元素1，元素2可以是任意选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器的后代选择器（最重要）</title>
    <style>
        /* 语法：
        元素1 元素2{ 声明 }
        1.上述语法表示选择元素1中的所有元素2
        2.元素1 2用空格分开，元素1是父集，元素2是子集；最终选的是元素2
        3.元素2可以是儿子，孙子；层层查找就可以
        4.元素1，元素2可以是任意选择器
         */
        /* 把ol中的li选出来改成红色 */
        ol li {
            color: red;
        }

        ol li p {
            color: rosybrown;
        }

        .hai li {
            color: slateblue;
        }

        .hai a {
            color: tomato;
        }
    </style>
</head>

<body>
    <ol>
        我的娃
        <li>我是ol的孩子1</li>
        <li>我是ol的孩子2</li>
        <li>
            <p>我是ol的孩子3</p>
        </li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <ul class="hai">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>

</html>

（2）子选择器
语法：元素1>元素2{样式声明}
子选择器：
1.只能选择作为元素1里面最近的一级子元素也就是直接后代元素2；
2.元素1与与元素2用>隔开。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器</title>
</head>
<style>
    /* 
    语法：元素1>元素2{样式声明}
    子选择器：只能选择作为元素1里面最近的一级子元素也就是直接后代元素2；
        元素1与与元素2用>隔开。
     */
    .nav>a {
        color: red;
    }
</style>

<body>
    <div class="nav">
        <p>
            <a href="#">我是孙子</a>
            <a href="#">我是孙子</a>
            <a href="#">我是孙子</a>
        </p>

        <a href="#">我是孙子</a>
        <a href="#">我是孙子</a>

        <!-- <a href="#">我是儿子</a> -->

    </div>

</body>

</html>

（3）并集选择器
并集选择器：
1. 语法：元素1，元素2{样式声明}
2. 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
3.并集选择器用英文逗号，隔开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        /*
        并集选择器：
         1. 语法：  元素1，元素2{样式声明}
         2. 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
         3.并集选择器用英文逗号，隔开
         */
        /* 流泪猫和委屈猫改成紫色
        div,
        p {
            color: purple;
        }
        流泪猫和想吃啥改成红色 */
        div,
        .eat li {
            color: red;
        }
    </style>
</head>

<body>
    <div>流泪猫</div>
    <P>本拉豆猫</P>
    <span>委屈猫</span>
    <ul class="eat">
        <li>想吃榴莲披萨</li>
        <li>想吃螃蟹</li>
        <li>想吃榴莲蛋挞</li>
    </ul>
</body>

</html>

（4）伪类选择器
1 链接伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .eat a {
            color: darkblue;
        }

        /* a:link把没有被访问过的链接选择出来 ，改成黑色，去掉下划线*/
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*a:visited 把所有访问过的链接选择出来，改成红色 */
        a:visited {
            column-count: #ff3344;
        }

        /* 选择鼠标位于上面的那个链接 */
        a:hover {
            color: #ff5;
        }

        /* 选择鼠标按下还没有弹起的链接 */
        a:active {
            color: #0000;
        }
    </style>
</head>

<body>

    <div class="eat">
        <a href="#">大闸蟹</a>
        <a href="#">榴莲</a>
    </div>
</body>

</html>

3 :foucus伪类选择器
:foucs伪类选择器：用于选取获得焦点（光标）的表单元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器</title>
    <style>
        input:focus {
            background-color: blue;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

thorn豆豆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS入门---复合选择器学习与掌握

css基础选择器的学习与掌握一.css复合选择器分为：后代选择器，子选择器，并集选择器，伪类选择器（css选择器具体分类看我css选择器思维导图）二.（1）后代选择器元素1 元素2{ 声明 }1.上述语法表示选择元素1中的所有元素22.元素1 2用空格分开，元素1是父集，元素2是子集；最终选的是元素23.元素2可以是儿子，孙子；层层查找就可以4.元素1，元素2可以是任意选择器<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫