1 选择器介绍
1.1 #id
- id选择器可以为标有特定id的HTML元素指定特定的样式
- CSS中id选择器以"#"来定义
- id属性尽量不要以数字开头
实例： 匹配id="case"的元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#case {
color: red;
}
</style>
</head>
<body>
<p id="case">该段落为红色</p>
<p>该段落不受影响</p>
</body>
</html>
1.2 class
- class选择器用于描述一组元素的样式
- CSS中类选择器以一个点"."号显示
- class和id的区别：class可以在多个元素中使用
实例： 匹配class="case"的元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.case {
color: red;
}
</style>
</head>
<body>
<p class="case">该段落为红色</p>
<h3 class="case">该标题为红色</h3>
<p>该段落不受影响</p>
</body>
</html>
1.3 element
- 以html的标签作为CSS修饰所用的选择器
实例： 匹配<h1>标签元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>该标题为红色</h1>
<h2>该标题不受影响</h2>
<h3>该标题不受影响</h3>
<h4>该标题不受影响</h4>
</body>
</html>
1.4 *
- 匹配html中的所有元素标签
实例： 匹配所有标签的元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
color: red;
}
</style>
</head>
<body>
<h1>该标题为红色</h1>
<p>该段落为红色</p>
</body>
</html>
1.5 element.class
- 匹配使用class的element元素标签
实例： 匹配class="case"的<h1>标签元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1.case {
color: red;
}
</style>
</head>
<body>
<h1 class="case">该标题为红色</h1>
<h2 class="case">该标题不受影响</h2>
<h3 class="case">该标题不受影响</h3>
<h4 class="case">该标题不受影响</h4>
</body>
</html>
1.6 element1 element2
- 指定目标选择器必须处在某个选择器对应的元素内部
- 该选择器会作用于element1后续所有的子元素element2，不管中间隔了多少元素
实例： 匹配<div>元素内部的每个<p>标签为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>该段为红色</p>
<b><p>该段也是红色</p></b>
<b><i><p>该段还是红色</p></i></b>
</div>
<p>该段不受影响</p>
</body>
</html>
1.7 element1>element2
- 强制指定目标选择器作为包含选择器对应的标签内部的标签
- 该选择器仅会作用于element1后续的第一代子元素element2，不会影响后续元素
实例： 匹配父级元素是<div>的<p>子标签为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div>p {
color: red;
}
</style>
</head>
<body>
<div>
<p>该段为红色</p>
<b><p>该段不受影响</p></b>
<b><i><p>该段不受影响</p></i></b>
</div>
<p>该段不受影响</p>
</body>
</html>
1.8 element1~element2
- 该选择器仅会作用于element1元素出现后的所有相邻的element2元素
实例： 匹配<h1>标签后相邻的每个<p>标签的样式为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1~p {
color: red;
}
</style>
</head>
<body>
<p>该段不受影响</p>
<h1>标题</h1>
<p>该段为红色</p>
<p>该段为红色</p>
</body>
</html>
1.9 element+element
- 该选择器仅会作用于element1元素出现后的第一个挨着的element2元素
实例： 匹配<h1>标签后相邻的第一个<p>标签的样式为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1+p {
color: red;
}
</style>
</head>
<body>
<p>该段不受影响</p>
<h1>标题</h1>
<p>该段为红色</p>
<p>该段不受影响</p>
</body>
</html>
1.10 attribute
- 该选择器会匹配带有attribute属性的标签
实例： 匹配带有target属性的<a>元素为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a[target] {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/" target="_blank">百度搜索（红色）</a><br />
<a href="https://cn.bing.com/" target="_top">必应搜索（红色）</a><br />
<a href="www.google.com">谷歌搜索（不受影响）</a>
</body>
</html>
2 选择器优先级
2.1 优先级概念
- 优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
- 优先级仅由选择器组成的匹配规则决定的。
- 优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
2.2 优先级顺序
以下选择器的优先级逐级递增：
- 通用选择器（*）
- 元素选择器（<label>）
- 类选择器（.class）
- 属性选择器（attribute）
- ID选择器（#id）
- 内联样式
2.3 权重计算
各类选择器的权重：
| 选择器 | 权重 | 内联样式 | 1000 | ID选择器 | 100 | 类选择器 | 10 | 元素选择器 | 1 |
|---|
其优先级遵循以下法则：
- 选择器都有一个权值，权值越大越优先
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置
- 网页编写者设置的CSS样式的优先权高于浏览器所设置的样式
- 继承的CSS样式不如后来指定的CSS样式
- 在同一组属性设置中标有
!important规则的优先级最大
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！