CSS选择器精要-优快云博客

本文链接：https://blog.youkuaiyun.com/yimtcode/article/details/111127534

CSS：选择器

1. 标签选择器

按标签名挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

2. 类选择器

按类名挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        .test {
            color: red;
        }
    </style>
</head>
<body>
    <p class="test">类选择器</p>
</body>
</html>

3. ID选择器

按id值挑选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        #p1 {
            color:green;
        }
    </style>
</head>
<body>
    <p id="p1">id选择器</p>
</body>
</html>

4. 选择器组

同时多种选择条件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        .test, #p1 {
            color:red;
        }
    </style>
</head>
<body>
    <p class="test">类选择器</p>
    <p id="p1">id选择器</p>
</body>
</html>

5. 派生选择器

5.1. 后代选择器

选择某元素的子孙

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        #p5 b {
            color: red;
        }
    </style>
</head>
<body>
    <p id="p5">
        人生一世，草木一<b>秋</b>。
    </p>
</body>
</html>

5.2. 子元素选择器

选择某元素的儿子

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        #p5>b {
            color: red;
        }
    </style>
</head>
<body>
    <p id="p5">
        人生一世，草木一<b>秋</b>。
    </p>
</body>
</html>

6. 交集选择器

由两个选择器构成
第一个必须是标签选择器
第二个必须是类或id选择器

<!DOCTYPE html>
<html>
<head>
    <title>交集选择器</title>
    <style type="text/css">
        p.txt {
            color: red;

        }
    </style>
</head>
<body>
    <p>恰是一江<strong class="txt">春水</strong>向东流</p>
</body>
</html>

7. 并集选择器

同时选择多个采用某个样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        h1, p {
            color: red;
        }
    </style>
</head>
<body>
    <h1>并集选择器</h1>
    <p>并集选择器</p>
</body>
</html>

8. 通配符*

选择所有元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <h1>通配符选择器</h1>
    <p>通配符选择器</p>
</body>
</html>

9. 伪类选择器

根据元素状态选择元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        /*未访问的链接*/
        a:link {
            color: green;
        }
        /*已访问的链接 */
        a:visited {
            color: red;
        }
        /*当有鼠标悬停在链接上 */
        a:hover {
            color: blue;
        }
        /*被选择的链接 */
        a:active {
            color: blueviolet;
        }
        /*选择有焦点(光标)的框*/
        a:focus {
            background-color: green;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>