CSS-选择器的基本用法

喜羊羊zz

已于 2022-05-14 09:08:12 修改

阅读量475

点赞数 4

分类专栏： HTML+CSS+JS 文章标签： css html

于 2022-05-04 15:59:32 首次发布

本文链接：https://blog.csdn.net/qq_55660421/article/details/124571574

版权

HTML+CSS+JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一，CSS的分类

1，行内样式

通过 style 属性，来指定某个标签的样式，只适合于写简单样式，只针对某个标签生效.

<div style="color:green"></div>

2，内部样式

写在 style 标签中，嵌⼊到 html 内部的样式叫做内部样式，理论上来说 style 放到 html 里. 但是⼀般都是放到 head 标签中

<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
     /* ⾏内样式 */
     body{
       color: green;
       font-size: 54px;
     }
   </style>
</head>

3，外部样式

创建⼀个 css 文件
使用 link 标签引入 css

<link rel="stylesheet" href="[CSS⽂件路径]">

二，选择器是什么

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点
样式的基本语法是：选择器 + {⼀条/N条声明}
● 选择器决定针对谁修改 (找谁)
● 声明决定修改啥. (干啥)

三，选择器具体种类

1，类选择器

类选择器根据类名来选择，前面以”.”来标志

特点:
①差异化表示不同的标签
②可以让多个标签的都使⽤同⼀个标签

<style>
.blue {
  color: blue;
}
</style>
<div class="blue">你好</div>

2，标签选择器

元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素

特点:

能快速为同⼀类型的标签都选择出来.
但是不能差异化选择

<style>
p {
  color: red;
}
div {
  color: green;
}
</style>
<p>佩奇</p>
<p>佩奇</p>
<div>猫南北</div>
<div>猫南北</div>

3，ID选择器

和类选择器类似

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

<style>
 #demo {
   width: 200px;
   height: 200px;
   background: #FF0000;
 }
 </style>
<div id="demo">ID选择器</div>

4，通配符选择器

通用选择器用*来表示，用来选择所有元素，也可以选择某个元素下的所有元素

* {
  color: red;
}

页面的所有内容都会被改成红色
不需要被页面结构调用

喜羊羊zz

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-选择器的基本用法

css-选择器的基本用法
复制链接

扫一扫

专栏目录