Web基础关键_003_CSS（一）
目 录
一、概述
二、选择器
1.基本选择器
（1）标签选择器（元素选择器、类型选择器）
（2）类选择器
（3）id 选择器
（4）全局选择器
2.属性选择器
（1）p[id]
（2）p[id="i1"]
（3）p[id~="i1"]
（4）p[class|="c3"]
3.子字符串匹配选择器
（1）p[class^="c3"]
（2） p[id$="2"]
（3）p[id*="i"]
4.忽略大小写匹配
5.伪类选择器
（1）说明
（2）普通伪类选择器
（3）行为伪类选择器
6.关系选择器
（1）交集选择器
（2）并集选择器
（3）后代选择器
（4）子代选择器
（5）兄弟选择器
一、概述
- Cascading Style Sheets，层叠样式表。是一种样式表语言，用来描述 HTML 或 XML 文档的呈现方式；
- 将文档结构和样式控制分离，可以降低代码冗余、提高代码可读性；
- 包含：
- 选择器：对页面标签进行选择；
- 属性；
- 值。
- 语法格式：【选择器 { 属性:值}】；
- 非语义化标签：
- div：块级标签；
- span：行级标签。
二、选择器
1.基本选择器
（1）标签选择器（元素选择器、类型选择器）
<html><head><title>Test CSS</title><style>h1 {text-align: center;}p {font-family: 楷体;font-size: 20px;color: darkcyan}strong {color: indianred;}em {color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p>再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p>再小的光圈，也清晰不了<strong>人生的百态</strong></p><p>再快的快门，也捕捉不到<em>你对我的爱</em></p><p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p>再低的感光度，也降低不了我对你的思念</p><p>再长的焦距，也拉不近你我的距离</p>
</body></html>
（2）类选择器
将多个元素划分为一类，使其具有相同的效果。
<html><head><title>Test CSS</title><style>.c1 {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p class="c1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p>再快的快门，也捕捉不到<em>你对我的爱</em></p><p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p>再低的感光度，也降低不了我对你的思念</p><p class="c1">再长的焦距，也拉不近你我的距离</p>
</body></html>
（3）id 选择器
虽然 id 选择器可以作用于多个标签，但是建议只将其作用于一个标签。
<html><head><title>Test CSS</title><style>#i1 {color: aqua;}#i2 {color: blueviolet;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p id="i1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i2">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p>再快的快门，也捕捉不到<em>你对我的爱</em></p><p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p>再低的感光度，也降低不了我对你的思念</p><p>再长的焦距，也拉不近你我的距离</p>
</body></html>
（4）全局选择器
<html><head><title>Test CSS</title><style>* {font-family: "Arial";color: deepskyblue;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p id="i1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i2">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p>再快的快门，也捕捉不到<em>你对我的爱</em></p><p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p>再低的感光度，也降低不了我对你的思念</p><p>再长的焦距，也拉不近你我的距离</p>
</body></html>
2.属性选择器
（1）p[id]
匹配任何有 id 属性的选择器
<html><head><title>Test CSS</title><style>p[id] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3-a">再低的感光度，也降低不了我对你的思念</p><p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body></html>
（2）p[id="i1"]
匹配 id="i1" 的选择器。
<html><head><title>Test CSS</title><style>p[id="i1"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3-a">再低的感光度，也降低不了我对你的思念</p><p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body></html>
（3）p[id~="i1"]
匹配 id 值包含 i1，并以空格分隔的选择器。
<html><head><title>Test CSS</title><style>p[id~="i1"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3-a">再低的感光度，也降低不了我对你的思念</p><p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body></html>
（4）p[class|="c3"]
匹配 class 值以 c3 开头并以连字符连接的选择器。
<html><head><title>Test CSS</title><style>p[class|="c3"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3-a">再低的感光度，也降低不了我对你的思念</p><p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body></html>
3.子字符串匹配选择器
（1）p[class^="c3"]
匹配 class 属性值中，任何以 c3 开头的选择器。
<html><head><title>Test CSS</title><style>p[class^="c3"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3a">再低的感光度，也降低不了我对你的思念</p><p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body></html>
（2） p[id$="2"]
匹配 id 属性值中，任何以 2 结尾的选择器。
<html><head><title>Test CSS</title><style>p[id$="2"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3a">再低的感光度，也降低不了我对你的思念</p><p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body></html>
（3）p[id*="i"]
匹配 id 属性值中，任何包含 i 的选择器
<html><head><title>Test CSS</title><style>p[id*="i"] {font-family: 楷体;font-size: 20px;color: lightpink;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3a">再低的感光度，也降低不了我对你的思念</p><p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body></html>
4.忽略大小写匹配
<html><head><title>Test CSS</title><style>/* p[class^="c"] {font-family: 楷体;font-size: 20px;color: lightpink;} */p[class^="C" i] {font-family: 黑体;font-size: 40px;color: lightskyblue;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p class="C1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p class="c2">再快的快门，也捕捉不到<em>你对我的爱</em></p><p class="C2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3">再低的感光度，也降低不了我对你的思念</p><p class="C3">再长的焦距，也拉不近你我的距离</p>
</body></html>
5.伪类选择器
（1）说明
伪类是选择器的一种，它用于选择处于特定状态的元素。如当它们是这一类型的第一个元素时，或当鼠标指针悬浮在元素上时。它们表现像是向文档的某个部分应用了一个类一样，帮助在标记文本中减少多余的类，让代码更灵活、更易于维护；
伪类就是开头为冒号的关键字；
伪类如下：
| 选择器 | 示例说明 |
|---|---|
| :checked | 选择所有选中的表单元素 |
| :disabled | 选择所有禁用的表单元素 |
| :empty | 选择所有没有子元素的p元素 |
| :enabled | 选择所有启用的表单元素 |
| :first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | 选择元素指定范围内的值 |
| :invalid | 选择所有无效的元素 |
| :last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | 选择所有p以外的元素 |
| :nth-child(n) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | 选择所有仅有一个子元素的p元素 |
| :optional | 选择没有"required"的元素属性 |
| :out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | 选择只读属性的元素属性 |
| :read-write | 选择没有只读属性的元素属性 |
| :required | 选择有"required"属性指定的元素属性 |
| :root | 选择文档的根元素 |
| :target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | 选择所有有效值的属性 |
| :link | 选择所有未访问链接 |
| :visited | 选择所有访问过的链接 |
| :active | 选择正在活动链接 |
| :hover | 把鼠标放在链接上的状态 |
| :focus | 选择元素输入后具有焦点 |
| :first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | 选择每个<p> 元素的第一行 |
| :first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | 在每个<p>元素之前插入内容 |
| :after | 在每个<p>元素之后插入内容 |
| :lang(language) | 为<p>元素的lang属性选择一个开始值 |
（2）普通伪类选择器
<html><head><title>Test CSS</title><style>/* 将第一个<p>标签设置格式 */p:first-child {color: pink;font-size: 20px;font-weight: bold;}</style>
</head><body><h1>用快门定格瞬间，用光影捕捉生活</h1><div><p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p><p class="C1">再小的光圈，也清晰不了<strong>人生的百态</strong></p><p class="c2">再快的快门，也捕捉不到<em>你对我的爱</em></p></div><div><p class="C2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p><p class="c3">再低的感光度，也降低不了我对你的思念</p><p class="C3">再长的焦距，也拉不近你我的距离</p></div>
</body></html>
（3）行为伪类选择器
<html><head><title>Test CSS</title><style>/* 初始蓝色 */a:link {color: blue;}/* 鼠标移入时变成红色 */a:hover {color: red;}/* 鼠标点击变成绿色 */a:active {color: green;}/* 点击过后变成粉色 */a:visited {color: pink;}</style>
</head><body><a href="https://baidu.com">百度一下我知道</a>
</body></html>
6.关系选择器
（1）交集选择器
<html><head><title>Test CSS</title><style>p.c {color: pink;}</style>
</head><body><span class="c">何为喜欢？</span><p class="c">一见你，就笑的人；</p><p id="i">一见，你就笑的人。</p>
</body></html>
（2）并集选择器
<html><head><title>Test CSS</title><style>p,.c {color: pink;}</style>
</head><body><span class="c">何为喜欢？</span><p class="c">一见你，就笑的人；</p><p id="i">一见，你就笑的人。</p>
</body></html>
（3）后代选择器
<html><head><title>Test CSS</title><style>ul li {color: coral;}</style>
</head><body><ul><li>炒菜</li><ol><li>宫保鸡丁</li><li>红烧茄子</li></ol><li>凉菜</li><li>主食</li><ol><li>米饭</li><li>面条</li></ol></ul>
</body></html>
（4）子代选择器
<html><head><title>Test CSS</title><style>ul>li {color: coral;}</style>
</head><body><ul><li>炒菜</li><ol><li>宫保鸡丁</li><li>红烧茄子</li></ol><li>凉菜</li><li>主食</li><ol><li>米饭</li><li>面条</li></ol></ul>
</body></html>
（5）兄弟选择器
<html><head><title>Test CSS</title><style>/* 邻接兄弟选择器 *//* h3+p {color: coral;} *//* 通用兄弟选择器 */h3~p {color: blue;}</style>
</head><body><h3>你是我触碰不到的风，醒不来的梦</h3><p>寻不到的天堂，医不好的痛</p><p>点不着的香烟，松不开的手</p><p>忘不了的某某某</p><span>你是我寻觅不到的风，哭不完的红</span><p>说不出的保重，熬不过的冬</p><div><p>忍不住的欢笑，喝不完的酒</p></div><p>愈合不了的伤口</p></body></html>
