02.选择器
3.1 派生选择器
- 定义
- 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
- 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
- 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
- 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>派生选择器</title>
<style type="text/css">
body{
background-color: red;
}
p{
color: green;
}
li{
color: blue;
}
li strong{
font-style:italic ;
font-weight: normal;
}
</style>
</head>
<body>
<p>
<strong>
我是粗体字，不是斜体字，因为我不在列表中，所以这个规则对我不起作用
</strong>
</p>
<ol>
<li>
<strong>我是斜体字，因为我在列表中</strong>
</li>
<li>
我是正常的字体
</li>
</ol>
</body>
</html>
3.2 id选择器
- 定义
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
body{
background-color: #8A2BE2;
font-size: 50px;
color: wheat;
}
#red{
background: red;
font-size: 50px;
color: wheat;
}
#green{
background: white;
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<p id="title">标题</p>
<p id="red">内容</p>
<p id="green">内容</p>
</body>
</html>
3.3 类选择器
-
定义
-
在 CSS 中，类选择器以一个点号显示
-
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
body{
background: blue;
}
.title{
background: red;
color: blue;
font-size: 30px;
}
.content{
background: skyblue;
color: blueviolet;
}
</style>
</head>
<body>
<p class="title">标题</p>
<p class="content">内容</p>
<p class="content">内容</p>
<p class="content">内容</p>
<p class="content">内容</p>
</body>
</html>
3.4 属性选择器
- 定义
- 对带有指定属性的 HTML 元素设置样式。 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
- 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[title]{
color: red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello">Hello World</h2>
<a title="baidu" href="https://www.baidu.com/">百度一下</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello World</h2>
<<a href="https://www.baidu.com/">百度一下</a>
</body>
</html>
3.5 元素选择器
-
定义
-
直接用标签名定义
-
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
/**/
body{
background: skyblue;
color: black;
margin: 0 5;
}
h1{
size: 50px;
background:blueviolet ;
color: red;
}
p{
font-size: 20px;
color: blue;
}
div{
size: 60px;
color: aquamarine;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
<p>备注内容</p>
<div>
节1
</div>
<div>
节2
</div>
<div>
节3
</div>
</body>
</html>
网友评论