CSS扩展选择器

最新推荐文章于 2023-03-31 18:20:03 发布

稻田里展望者

最新推荐文章于 2023-03-31 18:20:03 发布

阅读量235

点赞数 1

分类专栏： Web前端技术文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_46441425/article/details/122881095

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

1、选择所有元素
语法*{}

2、并集选择器
选择器1,选择器2{}

3、子选择器：筛选选择器1下的选择器2
选择器1 选择器2{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p{
            color: red;
            /* 中央人民政府就不会生效 */
        }
    </style>
</head>
<body>
    <div>
        <p>中华人民共和国</p>
    </div>
    <p>中央人民政府</p>
</body>
</html>

4、父选择器:筛选选择器2的父元素选择器1 选择器1>选择器2{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div>p{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>中华人民共和国</p>
    </div>
    <div>中华人民共和国</div>
</body>
</html>

5、属性选择器
选择属性名称，属性名=属性值的元素
语法：
元素名称 [ 属性名称 = " 属性值 " ] { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        input[type="text"]{
            border: 5px solid;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
</body>
</html>

6、伪类选择器：选择一些元素具有的状态
语法：
元素：状态{ }
link 初始化的状态
visited 被访问过的状态
active 正在访问
hover 鼠标悬浮状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        a :link{
            color: pink;
        }
        a :hover{
            color: green;
        }
        a :active{
            color: yellow;
        }
        a :visited{
            color: red;
        }
    </style>
</head>
<body>    
    <a href="http://www.baidu.com">中国</a>
</body>
</html>