css选择器学习（一）
2024-09-05 03:16:16
1、通用选择器“*”和元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器练习</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h3>h3标签</h3>
<p>h标签</p>
<div>div内容</div>
</body>
</html>
@charset "UTF-8";
/* 通用选择器 “*” 作用于所有元素*/
*{
color: #639;
}
/* 元素选择器 优先级高于通用选择器，即使将p样式置于*样式上面*/
p{
color:#294;
}
2、id选择器
<body>
<h3>h3标签</h3>
<p id="hid">h标签</p>
<div>div内容</div>
</body> /* id选择器，优先级高于元素选择器，即使置于元素样式上面 */
#hid{
color:#269;
}
3、类选择器
/***********************************两个类选择样式***********************************************/
/*******************************************************************************************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器练习</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h3 class="class1">h3标签</h3>
<h3>未引用h3.class1样式的h3标签，显示通用样式颜色</h3>
<p class="class1" id="hid">h标签</p>
<!-- 元素多类名，样式叠加，同种样式，根据优先级覆盖样式 -->
<div class="class1 class2">div内容</div>
</body>
</html>
css.css文件代码
@charset "UTF-8";
/* 通用选择器 “*” 作用于所有元素*/
*{
color: #639;
}
/* 元素选择器 优先级高于通用选择器，即使将p样式置于*样式上面*/
p{
color:#294;
}
/* id选择器，优先级高于元素选择器，即使置于元素样式上面 */
#hid{
color:#269;
}
/* 类选择器，颜色重新设置，在同时引用id选择器和类选择器时，虽然class1在下面，但最后效果是font-size叠加hid的color效果 */
/* 类选择器优先级低于id选择器 */
/* 同为类选择器，代码执行从上到下，不论引用顺序，则都会执行最下面代码样式（class2样式） */
.class1{
font-size: 30px;
color:#909;
}
.class2{
font-size: 50px;
color: aquamarine;
}
/* 指定某一特定元素 */
h3.class1{
font-size: 20px;
background: rgb(243, 188, 160);
padding: 20px;
}
/****************************************总结**********************************************/
可以一步步屏蔽代码，看执行效果
最新文章
- Ubuntu 上搭建 Samba 服务器
- java web学习总结(六) -------------------servlet开发(二)
- Ubuntu14.04LTS系统输入法的安装
- http知识
- SpringMVC +mybatis+spring 结合easyui用法及常见问题总结
- [转载]实战Linux下VMware虚拟机根目录空间扩充
- jira汉化，破解，升级
- 如何成为出色的IT项目经理：成功的五个关键因素
- 面向对象 "一"
- 21 viewPager--- hzScrollView ----llContainer
- Java实现检验一串数字的出栈合法性
- ckeditor_学习(1) 基本使用
- Python全栈之路----函数----返回值
- ubuntu crontab python 定时任务备记
- python内置模块之unittest测试（五）
- Python：Windows8下安装BeautifulSoup
- RedHat Enterprise Linux7.0安装Oracle12c
- 配置文件备份方案（expect+shell）
- go语言基础之数组指针做函数参数
- Delphi跨平台下的GetTickCount,GetCurrentThreadID