CSS选择器(基础)

CSS选择器(基础)

CSS选择器:用于“查找”(或选取)要设置样式的 HTML 元素。

目录

CSS选择器(基础)

CSS 选择器常用类型

标签选择器

类别选择器

id选择器

嵌套选择器

集体选择器

通用选择器


标签选择器

标签选择器通过标签来选择设置样式的HTML元素。

实例
在这里,页面上的所有<p>元素都将居中对齐,并带有红色文本颜色:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            text-align: center;
            color: red;
        } 
    </style>
</head>
<body>

    <p>每个段落都会受到样式的影响。</p>
    <p id="para1">我也是!</p>
    <p class="center">还有我!</p>

</body>
</html>

效果

每个段落都会受到样式的影响。

我也是!

还有我!

类别选择器

类别选择器选择有特定 class 属性的 HTML 元素,使用(.)标记。

实例
在此例中,所有带有 class="center" 属性的 HTML 元素将为红色且居中对齐:

.center {
    text-align: center;
    color: red;
}

id选择器

id 选择器通过 id 属性来选择特定HTML元素,使用(#)标记。

实例
这条 CSS 规则将应用于 id="para1" 的 HTML 元素:

#para1 {
    text-align: center;
    color: red;
}

注意:id 不能以数字开头。

id选择器与类别选择器的区别

从语义化的角度,元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!而具有同样class属性的HTML元素可以有多个。

嵌套选择器

标签内部的span部分会被设置为指定样式。

实例
在此例中,<p>标签内部的<span>部分将为红色:

p span{
    color: red;
}

应用

<p>Hello<span>World</span>!</p>

效果

HelloWorld!

集体选择器

当不同标签的HTML元素需要设置为相同样式时,可以使用集体选择器。

实例

在这个例子中,<h1>,<h2>,<p>标签被设置为相同样式:

h1, h2, p {
    text-align: center;
    color: red;
}

通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

实例
通用选择器会影响页面上的每个 HTML 元素:

* {
    text-align: center;
    color: blue;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值