css选择器

最新推荐文章于 2023-07-13 15:13:44 发布

马东超

最新推荐文章于 2023-07-13 15:13:44 发布

阅读量164

点赞数 1

文章标签： css sass html vscode

本文链接：https://blog.csdn.net/MCdongchao/article/details/124612700

版权

CSS书写位置

1、行内样式

行内样式是在标签内部通过style属性设置元素的样式，但是这种方式修改起来不方便，不推荐使用

<!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>
</head>
<body>
    <p style="color:red ; font-size:20px;">我要努力学习</p>
</body>
</html>

2、内部样式表

内部样式是在<head>中间插入<style>并将CSS样式写在里面：通过选择器来选中元素，再设置样式。这种方式修改起来比较方便，但只能单页面使用，不能多页面复用。

格式：选择器｛｝

<!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">
    <style>
        P{color: red;font-size: 20px;}
    </style>
    <title>Document</title>
</head>
<body>
    <p >我要努力学习</p>
</body>
</html>

3、外部样式表

外部样式是在html文件外部设置一个.css文件，通过link标签引入到html文件中，所有的CSS样式都写在.css文件中。这种方式可以多页面复用。

CSS常用选择器

1、元素选择器

根据标签名来选中指定元素格式：标签名｛｝例如：h1{}、p{}...

2、ID选择器

给元素标签赋予id属性值再通过元素的id属性值来选中元素格式：#属性值｛｝

例如：#p1{}选中第一行，#p2{}选中第二行；注意的是id选择器的属性值一个网页只能用一次

<p id="p1">我要努力学习</p>
<p id="p2">我也要努力学习</p>

3、CLASS选择器

给元素标签赋予class属性值再通过元素的class属性值来选中元素格式：.属性值{}

例如：.p1{}选中了第一和第三行，.p2{}选中第二行； class选择器是可以复用的

<p class="p1">我要努力学习</p>
<p class="p2">我也要努力学习</p>
<p class="p1">我要努力学习</p>

4、通配选择器

选中页面中所有的标签格式：*{}

通常清除默认样式时可用（不推荐，影响网页效率）

5、复合选择器

（1）、交集选择器

交集选择器是选中符合多个条件的元素格式：选择器1选择器2......

例如：span.p1{}选中第一行（既是span又是p1）

<span class="p1">我要努力学习</span>
<p >我要努力学习</p>
<span>我要努力学习</span>

（2）、并集选择器

并集选择器是同时选中多个元素格式：选择器1，选择器2.....

例如：span，p｛｝同时选中第一行和第二行

<p >我要努力学习</p>
<span>我要努力学习</span>

马东超

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

CSS选择器
复制链接

扫一扫