【CSS】CSS 选择器 ② ( ID 选择器 | 通配符选择器 | CSS 选择器使用注意事项 )
CSS ID 注意事项 选择器 通配符 使用
2023-09-14 09:07:26 时间
一、 ID 选择器
1、简介
ID 选择器 使用 " #id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 :
- 首先 , 在 HTML 中 设置 标签的 ID ;
<p id="name">标签内容</p>
- 然后 , 在 CSS 样式中使用 ID 选择器 ;
#name {
color: blue;
font-size:20px;
}
在一个 HTML 页面中 , 标签的 ID 是唯一的 , 不允许重复 ;
** ID 选择器 与 类选择器 的使用方法基本一致 ;**
在开发时 , ID 选择器 不推荐使用 , 使用频率不高 , 推荐使用 类选择器 ;
2、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.fontsize80 {
font-size: 80px;
}
#blue {
color: blue;
}
#red {
color: red;
}
#orange {
color: orange;
}
#green {
color: green;
}
</style>
</head>
<body>
<span class="fontsize80" id="blue">G</span>
<span class="fontsize80" id="red">o</span>
<span class="fontsize80" id="orange">o</span>
<span class="fontsize80" id="blue">g</span>
<span class="fontsize80" id="green">l</span>
<span class="fontsize80" id="red">e</span>
</body>
</html>
运行效果 :
二、通配符选择器
1、简介
通配符选择器 * 可以 选择所有标签 ;
语法如下 : 下面的样式会 将 html 中所有的标签都设置如下 样式 ;
* {
color: blue;
font-size:20px;
}
通配符选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ;
2、代码示例
通配符选择器代码示例 : 使用通配符选择器 * 将 HTML 所有页面标签的文本设置成了 黑色 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.fontsize80 {
font-size: 80px;
}
* {
color: black;
}
</style>
</head>
<body>
<span class="fontsize80" id="blue">G</span>
<span class="fontsize80" id="red">o</span>
<span class="fontsize80" id="orange">o</span>
<span class="fontsize80" id="blue">g</span>
<span class="fontsize80" id="green">l</span>
<span class="fontsize80" id="red">e</span>
</body>
</html>
运行效果 :
三、CSS 选择器使用注意事项
CSS 选择器使用注意事项 :
- 尽量不使用 ID 选择器 ;
- 尽量不使用 通配符选择器 ;
- 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span 标签 ;
相关文章
- 关于CSS Hacks
- css规则定义的分类,CSS规则定义英汉对照表[通俗易懂]
- 怎么创建css样式表,怎样创建可反复使用的外部CSS样式表?[通俗易懂]
- web前端设计与开发期末作品: 服装主题网页设计——女装下拉菜单带特效 (11页) HTML+CSS+JavaScript 网页设计期末作业个人主页…[通俗易懂]
- html中相对定位怎么写,css相对定位
- css使用自定义字体教程
- CSS text-decoration 属性
- php 获取连续id,WordPress文章ID连续及ID重新排列的方法
- 【CSS】固定定位示例 ( 屏幕左右两侧广告栏 | 开发要点分析 | 代码示例 )
- 【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 )
- MySQL获得最大ID的方法分析(mysql最大id)
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- MySQL设置自增长ID的指南(mysql设置自增长id)
- MySQL获取最大ID的方法(mysql获取最大的id)
- MySQL中实现自增ID的方法(id自增mysql)
- Linux系统下如何更改用户ID(linux更改用户id)
- Linux简易操作:更改用户ID(linux更改用户id)
- MySQL:轻松学会按ID排序(mysql按id排序)
- MongoDB自动生成唯一ID的方法(mongodb自增id)
- Linux文件ID:文件识别的完美方案(linux文件id)
- Linux 下如何快速获取进程ID的秘诀(linux 打印进程id)
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL中ID出现乱码解决方法(mysql中id数字乱码)
- MySQL中如何使用ID取余分组(mysql中id取余分组)
- Redis集群实现节点ID分布式管理(redis集群分布id)
- Oracle中ID为0的特殊性(oracle 中id 0)
- CSS中div、span和center元素
- CSS教程之css选择器、属性、值
- css网页布局中注意的几个问题小结