css选择器

最新推荐文章于 2024-07-25 11:52:08 发布

茶与斑马

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量89

点赞数

分类专栏：前端文章标签： html css html5

本文链接：https://blog.csdn.net/qu_learner/article/details/108991434

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
一、类选择器
- 1. 语法
- 2.示例及显示效果：
二、类选择器：多类名
三、id选择器
四通配符选择器
五标签选择器
- 1.语法
- 2.效果
总结

前言

HTML元素学习记录

提示：以下是本篇文章正文内容，下面案例可供参考

一、类选择器

1. 语法

可以将div元素看做是盒子，可以往里面加东西。
类选择器：样式点定义，结构类调用

2.示例及显示效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .green {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="red">红色</div>
  <div class="green">绿色</div>
  <div class="red">红色</div>
</body>

</html>

二、类选择器：多类名

提示：vscode中输入标签后，按Tab键可以补全标签尖括号。

1.语法

一个标签可以有多个类名，用空格分开。

2.优点

节省代码，修改方便

3.示例及显示效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      font-size: 40px;
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="red box">红色</div>
  <div class="green box">绿色</div>
  <div class="red box">红色</div>
</body>

</html>

三、id选择器

1.语法

#id名 {
	属性1:属性值1;
	...
}

id = id名

2.示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      font-size: 40px;
    }

    #pink {
      color: pink;
    }
  </style>
</head>
<body>
  <div class="box" id="pink">盒子</div>
</body>
</html>

3.区别

id选择器只能调用一次，一般用于页面唯一性的元素上和js搭配使用；
class选择器可以调用多次。

四通配符选择器

* {
	color : red;
	margin : 0;
	padding : 0;
	}

五标签选择器

1.语法

p {
color : red;
}

2.效果

选出所有相同的标签，不能差异化选择

总结

茶与斑马

关注

0
点赞
踩
0

收藏

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

文章目录前言一、类选择器1. 语法2.示例及显示效果：二、类选择器：多类名1.语法2.优点3.示例及显示效果：三、id选择器1.语法2.示例3.区别四通配符选择器五标签选择器1.语法2.效果总结前言HTML元素学习记录提示：以下是本篇文章正文内容，下面案例可供参考一、类选择器1. 语法可以将div元素看做是盒子，可以往里面加东西。类选择器：样式点定义，结构类调用2.示例及显示效果：<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫