Web前端入门：CSS选择器挑选元素！！

最新推荐文章于 2024-07-25 10:45:42 发布

像风一羊的女孩

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量103

点赞数

分类专栏： HTML 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45921611/article/details/120337453

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

废话不多说，直接上重点！

1.全局选择器(通配符选择器)

* {}

匹配包含html在内的所有标签

作用：清除标签的默认样式！！！

代码演示：

*{
    margin:0;
    padding:0;
}

2. 标签选择器

tagName {

匹配的是标签名字叫tagName的元素

}

a { }

em {}

作用：全局挑选用来设置公共样式

代码演示：

<html lang="en">
<head>
    <title>Document</title>
    <style>
        a{
            /* 取消超链接的下划线 */
           text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">这是一个a标签</a>
</body>
</html>

3. class类选择器

class="数字不开头字母数字-组成！！"

.E {

匹配的是class属性值为E的元素

}

作用的是在众多标签之中挑选同一个样式的元素！！！

代码演示：

<html lang="en">
<head>
    <title>Document</title>
    <style>
        .div{
            width:200px;
            height: 200px;
            background-color:blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">这是一个div</div>
</body>
</html>

4. id选择器

(1)给标签写id="数字不开头字母数字_组成！！"

（2） #E {} 匹配的就是id值为E的元素作用：唯一挑选！！

就只能挑一个！！！一般给js挑选元素去使用！css少用id选择器！！！

代码演示：

<html lang="en">
<head>
    <title>Document</title>
    <style>
        #text{
            width:200px;
            height: 200px;
            background-color:brown;
        }
    </style>
</head>
<body>
    <div id="text">这是一个div</div>
</body>
</html>

像风一羊的女孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端入门：CSS选择器挑选元素！！

废话不多说，直接上重点！1.全局选择器(通配符选择器)* {}匹配包含html在内的所有标签作用：清除标签的默认样式！！！代码演示：*{ margin:0; padding:0;}2. 标签选择器tagName {匹配的是标签名字叫tagName的元素}a { }em {}作用：全局挑选用来设置公共样式代码演示：<html lang="en"><head> <tit...
复制链接

扫一扫