CSS根本选择器

魏晓东 · 5 天前

1. 通配选择器

作用：可以选中全部的 HTML 元素。
语法：

* {
属性名: 属性值;
}

复制代码

举例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>学习css最重要的是坚持</p>
<p>学习web后端最重要的是仔细</p>
<p>这样才能找到工作</p>
</body>
</html>

复制代码

  2. 元素选择器

   作用：为页面中 某种元素 统一设置样式。
   语法

标签名 {
属性名: 属性值;
}

复制代码

举例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
p{
color: beige;
}
</style>
</head>
<body>
<p>学习css最重要的是坚持</p>
<p>学习web后端最重要的是仔细</p>
<p>这样才能找到工作</p>
</body>
</html>

复制代码

3. 类选择器

作用：根据元素的 class 值，来选中某些元素。语法

.类名 {
属性名: 属性值;
}

复制代码

举例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器</title>
<style>
.red {
color: red;
}
.bulue{
color: blue;
}
.px{
font-size: 30px;
}
</style>
</head>
<body>
<p class="red">学习css最重要的是坚持</p>
<p class="bulue">学习web后端最重要的是仔细</p>
<p class="px">这样才能找到工作</p>
</body>
</html>

复制代码

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。 2. class 值，是我们自定义的，按照尺度：不要使用纯数字、不要使用中文、尽量使用 英文与数字的组合，若由多个单词组成，使用 - 做连接，比方： left-menu ，且命名 要有意义，做到 “见名知意”。 3. 一个元素不能写多个 class 属性，下面是错误示例：  <h1 class = "speak" class = "big" > 你好啊 </h1> 4. 一个元素的 class 属性，能写多个值，要用空格隔开，比方： 4. ID选择器

作用：根据元素的 id 属性值，来 精准的 选中某个元素。语法：

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

复制代码

举例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器</title>
<style>
#red {
color: red;
}
#bulue{
color: blue;
}
#px{
font-size: 30px;
}
</style>
</head>
<body>
<p id="red">学习css最重要的是坚持</p>
<p id="bulue">学习web后端最重要的是仔细</p>
<p id="px">这样才能找到工作</p>
</body>
</html>

复制代码

      留意：       id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包罗空       格、区分巨细写。       一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。       一个元素可以同时拥有 id 和 class 属性。
   类选择器       选中全部特定类名（ class 值）的元素 —— 使用频率很高

  综合

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器综合</title>
<style>
#red{
color: red;
}
.gree{
font-size: 100px;
}
p{
background-color: azure;
}
</style>
</head>
<body>
<p id="red" class="gree blue">学习css最重要的是坚持</p>
<p id="bulue">学习web后端最重要的是仔细</p>
<p id="px">这样才能找到工作</p>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

CSS根本选择器

0 个回复

快速回复

楼主热帖

标签云