CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

Jason_LH1024

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量98

点赞数

分类专栏： JavaEE

本文链接：https://blog.csdn.net/Jason_LH1024/article/details/101151664

版权

JavaEE 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

选择器：筛选具有相似特征的元素

分类：

1.基础选择器

1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一。

语法：#id值{}

2.元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器优先级高于元素选择器

3.类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

注意：类选择器优先级高于元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

    <style>
        #div1{
            color: red;
        }
        div{
            color: blue;
        }
        .class1{
            color: blueviolet;
        }
    </style>
</head>
<body>
<div ID="div1">你是大哥</div>
<div>兄弟你好吗</div>
<div class="class1">嗯嗯 好的</div>

</body>
</html>

2.扩展选择器：

1.选择所有元素：

语法： *{}

2.并集选择器：

选择器1，选择器2{}

3.子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}

4.父选择器：筛选选择器2的父元素选择器1

语法：选择器1>选择器2{}

5.属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]{}

6.伪类选择器：选择一些元素具有的状态

语法：元素：状态{}

如：<a>

状态：

link：初始化的状态

visited：被访问过的状态

active：正在访问的状态

hover：鼠标悬浮的状态


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p {
            color: red;
        }

        div > p {
            border: 1px solid greenyellow;
        }

        input[type='text']{
            border: 6px solid purple;
        }

        a:link{
            color: darkblue;
        }
        a:active{
            color: darkmagenta;
        }
        a:hover{
            color: red;
        }
        a:visited{
            color: purple;
        }
    </style>
</head>
<body>

<div>
    <p>你是大佬！</p>
</div>

<p>不不不 我不是啊</p>

<input type="text">
<input type="password"><br>

<a href="https://www.baidu.com">百度一下咯</a>
</body>
</html>