CSS选择器

最新推荐文章于 2024-10-22 09:22:43 发布

原创最新推荐文章于 2024-10-22 09:22:43 发布 · 232 阅读

0 ·

CC 4.0 BY-SA版权

CSS选择器

一、标签选择器

选择某个标签

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

二、类选择器

选择class=某值的所有元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        /*类选择器：选择class=某值的所有元素*/
        .test {
            color: red;
        }
    </style>
</head>
<body>
    <p class="test">类选择器</p>
</body>
</html>

三、ID选择器

选择id=某值的所有元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <style>
        /*ID选择器：选择id=某值的所有元素*/
        #p1 {
            color:green;
        }
    </style>
</head>
<body>
    <p id="p1">id选择器</p>
</body>
</html>

四、选择器组

写出一组选择器，逗号隔开

<!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>

五、派生选择器

4.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>

4.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>

六、交集选择器

由两个选择器构成
第一个必须是标签选择器
第二个必须是类或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>

七、并集选择器

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

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

八、通配符*

选择所有元素

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

九、伪类选择器

根据元素状态选择元素

<!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>