CSS四大基础选择器

xhhhx_

已于 2022-04-27 16:18:01 修改

阅读量422

点赞数

文章标签： vscode css

于 2022-04-27 16:17:19 首次发布

本文链接：https://blog.csdn.net/xhhhx_/article/details/124436297

版权

基本语法规范
CSS 不区分大小写, 但一般统一使用小写字母
选择器 + {一条/N条声明}

注意:

CSS 要写到 style 标签中
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

使用方式

行内

```css
 <style>
    div {
        color: red;
   }
</style>
<div style="color:green">生活</div>

内部
写在 style 标签中. 嵌入到 html 内部.

html文件中：
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式</title> 
    <style>
    ......
    </style>     
</head>

<body>
    <div>我是内部</div>
</body>

外部

创建一个 css 文件
创建html 文件
在html文件使用 link 标签引入 css文件

css文件中：
div {
    color: red;
}

html文件中：使用link标签
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式</title>
    <link rel="stylesheet" href="CSS文件路径">
</head>
<body>
    <div>外部</div>
</body>

四大基础选择器

标签选择器：
特点:
能快速为同一类型的标签都选择出来.
但是不能差异化选择

<style>
p {
    color: red;
}
div {
    color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>

类选择器
特点:
差异化表示不同的标签
可以让多个标签的都使用同一个标签.

<style>
    .blue {
        color: blue;
   }
</style>
<div class="blue">咬人猫</div>
<div>咬人猫</div

语法细节:
1.类名用 . 开头的
2.下方的标签使用 class 属性来调用.
3.一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
4.如果是长的类名, 可以使用 - 分割. 不要使用纯数字, 或者中文, 以及标签名来命名类名

使用多个标签：
<style>
    .box {
        width: 200px;
        height: 150px;
   }
    .red {
        background-color: red;
   }
 
</style>

<div class="box red"></div>
<div class="box "></div>

id 选择器
1.CSS 中使用 # 开头表示 id 选择器
2.id 选择器的值和 html 中某个元素的 id 值相同
3.html 的元素 id 不必带 #
4.id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>
<div id="ha">蛤</div>  //错误，因为 蛤蛤蛤 标签已经使用过 #ha 了

姓名是类选择器, 可以重复.
身份证号码是 id 选择器, 是唯一的.

通配符选择器
使用 * 的定义, 选取所有的标签.

* {
 color: red;
}

则所有标签的字体都会为红色

选择器	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择, 最灵活, 最常用
id 选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次
通配符选择器	选择所有标签	选择所有标签

xhhhx_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS四大基础选择器

基本语法规范CSS 不区分大小写, 但一般统一使用小写字母选择器 + {一条/N条声明}注意:CSS 要写到 style 标签中style 标签可以放到页面任意位置. 一般放到 head 标签内.CSS使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .使用方式行内```css <style> div { color: red; }</style><div style="color:green"&g
复制链接

扫一扫