首页 前端知识 CSS选择器基础1.1(查找标签)

CSS选择器基础1.1(查找标签)

2024-04-16 17:04:37 前端知识 前端哥 42 512 我要收藏

1,标签选择器(以标签名命名的选择器)

结构:

 标签名{CSS属性名:属性值;}

 注:选中所有的这个标签都生效CSS。

2,类选择器

结构:

.类名{CSS属性名:属性值;}

 作用:通过类名,找到页面中所有带有这个类名的标签,设置样式。

注:

①所有标签上都有class属性,class属性值称为类名。

②类名不能由数字或中划线开头。

③一个标签可以同时有多个类名,类名之间空格隔开。

④类名可以重复,一个类选择器可以同时选中多个标签。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .color{
            color: purple;
        }
    </style>
</head>
<body>
    <p class="color">这是第一句话</p>

    <p>这是第二句话</p>

    <p>这是第三句话</p>

    <h1 class="color">这是第一个标题</h1>
</body>
</html>

页面效果展示:

 3,id选择器(配合Javascript找标签使用)

结构:

#id属性值{CSS属性名:属性值;}

 注:

①所有标签都有id属性。

②id属性值类似于身份证号,在一个页面中是唯一的,不可重复。

③一个标签上只能有一个id属性值。

④一个id选择器只能选中一个标签。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #color
        {
            color: red;
        }
    </style>
</head>
<body>
    <p id="color">这是第一句话</p>

    <p>这是第二句话</p>

    <p>这是第三句话</p>

    <h1 id="color">这是第一个标题</h1>
</body>
</html>

页面效果展示:

4,通配符选择器

结构:

*{CSS属性名:属性值;}

 作用:找到页面中所有标签,设置样式。

注:

①开发中使用极少,只会在极特殊情况下用到。

②可能会用于去除标签默认margin和padding(清除标签默认间距)

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是第一句话</p>

    <p>这是第二句话</p>

    <p>这是第三句话</p>

    <h1>这是第一个标题</h1>
</body>
</html>

 页面效果展示:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5047.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!