什么是选择器

浏览 789

课文

CSS 选择器可以帮助我们选择元素,毕竟如何我们要对某些元素进行样式的修改,首先就是要定位到这些元素才能说去作修改。而 选择器就是帮我们来从中选择这些元素的一种规范

打个比方,就像我们要区分人群一样,我们可以根据性别区分,汉族壮族之类的民族作区分,还可以通过打标签的方式区分,甚至通过唯一的身份证号来定位人员。

常见的选择器

类型选择器

顾名思义,就是根据元素的类型来选择元素,就像我们根据民族来区分人群一样。

**应用场景:**由于会影响到页面的所有同类型的元素,影响范围很大,所以我们通常会用来修改比较统一的一些样式。比如从设计上来说,一个网站的文本最好使用同一个字体,文本的间距保持一致,所有的页面最好使用同样的背景色(很多网站的背景其实不是纯白色,为了保证阅读的舒适度多采用偏微暖的白色,文本也不是纯黑色而是偏灰),这些样式就应该通过类型选择器来设置。

**写法:**直接写元素类型,比如 p { color: red; } ,就是把所有 p 元素的文本设为红色。

看实例,敏锐的同学应该发现了,我们之前的例子都是使用的类型选择器。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            p {
                color: red;
                font-size: 24px;
            }
        </style>
    </head>
    <body>
        <h3>同学名单</h3>
        <p>鸣人</p>
        <p>柯南</p>
        <p>王路飞</p>
    </body>
</html>

类选择器

类选择器就是通过设置元素的 class 属性,将元素区分为不同的类别,在设置 CSS 样式时就可以针对某个类别设置样式。就像疫情期间,老实呆家里的就被打上安全的标签(类别),设置你的样式(健康码)为绿码,去过中高风险地区的就被打上危险的标签,设置你的样式(健康码)为红码。

**应用场景:**类选择器是最常用的选择器了,在网站中针对不同的按钮不同的文本等等都会事先分好类,比如错误警告的文本用红色,就会事先定义个 .danger { color: red; } ,之后所有的警告文本设置 class="danger" 即可。

写法: . + 类名 , 比如 .danger { color: red; } 就是设置所有类名为 danger 的元素文本为红色。

看实例。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .male {
                color: blue;
            }
            .female {
                color: red;
            }
        </style>
    </head>
    <body>
        <h3>同学名单</h3>
        <p class="male">鸣人</p>
        <p class="male">柯南</p>
        <p class="female">春野樱</p>
    </body>
</html>

image

ID 选择器

ID 选择器与类选择器的区别在于,它是 唯一的 ,就像身份证号一样。

当然 ID 重复了通常也能正常运行,但为了规范考虑千万别重复!

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #mingren {
                color: red;
            }
            #kenan {
                color: green;
            }
            #xiaoying {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h3>同学名单</h3>
        <p id="mingren">鸣人</p>
        <p id="kenan">柯南</p>
        <p id="xiaoying">春野樱</p>
    </body>
</html>

image

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1