引言：所有的表现都是css，之前的html所带样式是浏览器自带的，为了更好的满足用户的样式需求，使用 css；特殊的写作小技巧：li*5—>可以直接得到5个
一. CSS简介
层叠样式表：网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层 ；总之，CSS用来设置网页中元素的样式；来修改元素样式的方式大致可以分为3种：
1） 内联样式（行内样式）：在标签内部通过 style 属性来设置元素的样式；缺点：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）
<p style="color: red; font-size: 50px;">海压竹枝低复举，风吹山脚晦还明</p>
2）内部样式表（批量复用）：将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可，实现批量化处理。内部样式表更加方便对样式进行复用；缺点：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用；
head中：<style>p{color: blue;font-size: 50px;}</style>body中：<p>海压竹枝低复举，风吹山脚晦还明</p>
3）外部样式表（开发中常用）：可以将css样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件建立联系，可以在不同页面之间进行复用；将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
外部文件.css中p{color: aqua;font-size: 50;}本地引入head中:<link rel="stylesheet" href="./style.css">本地body:<p>落霞与孤鹜齐飞，秋水共长天一色</p>
二. CSS基本语法
首先：在 body：
醒着
eg:2
醒着
<a name="z2rNT"></a>
### 2）并集选择器（选择器分组）-- 用，逗号连接
- 作用：同时选择多个选择器对应的元素`**（既选中p 家族又选中div 家族）**`
- 分组选择器，优先级并不会累加计算，是单独计算的html
head:
body:
是回忆时含泪的微笑
醒着
<a name="lEXAt"></a>
##
<a name="CgoO1"></a>
## 五. 关系选择器-- 里外级关系（>子/空格 后代/）
- 父元素：直接包含子元素的元素叫做父元素
- 子元素：直接被父元素包含的元素是子元素
- 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
- 兄弟元素：拥有相同父元素的元素是兄弟元素
<a name="s8jYS"></a>
### 1）子元素选择器（大于号>）
- 作用：选中指定父元素的指定子元素
- 语法：父元素 > 子元素
- 例子：A > Bhtml
head:
body：
我是一个div
我是div的子元素p（也是div后代元素） 我是p的子元素span
我是div的子元素span效果： 
<a name="LILH7"></a>
### 2）后代元素选择器--(空格 )
- 作用：选中指定元素内的指定**所有后代元素**
- 语法：祖先 后代( 即跨代指定 )（其实也可以直接指定后代，不用写祖先）html
head:
body:
我是一个div
我是div的子元素p（也是div后代元素） 我是p的子元素span
我是div的子元素spanhead:
效果： <a name="nNOZJ"></a>### 3）兄弟元素选择器 -- （加号+和波浪号~）- 作用：选择下边的一个+或者多个~兄弟- 例子1：A1 + A2 必须是A1**紧邻的 一个**标签元素//结果作用于A2- 例子2： A1 ~ An; A1**紧邻**后边**所有的元素An**元素//于所有的An```html<style>p+span{color:aqua ;}</style>body:<div>我是一个div<p>我是div的子元素p（也是div后代元素）<span>我是p的子元素span</span></p><span>我是div的子元素span</span></div>
head:<style>p~span{color:aqua ;}</style>body:<div>我是一个div<p>我是div的子元素p（也是div后代元素）<span>我是p的子元素span</span></p><span>我是div的子元素span</span><span>我是div的子元素span</span><span>我是div的子元素span</span><span>我是div的子元素span</span></div>
六. 伪类选择器（：冒号伪类表示）— 动态化去处理情况
伪类（不存在的**类**，特殊的类）；伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.… （伪类一般情况下都是使用:开头）；
- 标签元素 : first-child 第一个子元素
- 标签元素 : last-child 在每个最近的标签元素中 是最后一个子元素（可多个，参考：餐厅游戏17关）
标签元素 : nth-child(x) 选中第n个子元素
- x=n：第n个，n的范围0到正无穷—全选
- x=2n或even：选中偶数位的元素
- x=2n+1或odd：选中奇数位的元素(以上这些伪类都是根据包括所有类型的子元素进行排序的) ```html
11
22
33
44
55
66
效果：22 44 66
- **标签元素 : first-of-type** **同类型中的**第一个子元素- **标签元素 : last-of-type** **同类型中**的最后一个子元素- **标签元素 : nth-of-type()** 选中**同类型中**的第n个子元素```html<head><style>li:nth-child(2n){ color: aqua;}/*包括所有的类型*/p:nth-of-type(2n){ color: aqua;}/*同类型*/</style></head><body><ul><span>sssss</span><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li><li>66</li></ul><!----><br><br><span><div>sssssssssss</div><p title="abc">11</p><p title="abcde">22</p><p title="efgabc">33</p><p title="qqqabqc">44</p><p>55</p><p>66</p></span></body>效果：11 33 5522 44 66
- 标签元素 : not()否定伪类，将符合条件的元素从选择器中去除
- Examples
:not(#fancy) selects all elements that do not have id=”fancy”.
div:not(:first-child) selects every div that is not a first child.
:not(.big, .medium) selects all elements that do not have class=”big” or class=”medium”.<head><style>ul>li:not(li:nth-child(3)){color:blue;}ul>li:</style></head><body><ul><span>sssss</span><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li><li>66</li></ul><body>效果：11 33 44 55 66 //包括所有的元素排序去除11 22 44 55 66 //同类元素排序的去除
- 标签元素 : link 未访问的链接（正常的链接）
- :标签元素 : visited 已访问的链接 （一般不常用）
- 由于隐私的原因，所以visited这个伪类只能修改链接的颜色，并不能修改大小之类的样式
- 标签元素 : hover 鼠标悬停的链接
- 标签元素 : active 鼠标点击的链接 ```html
- **p span:only-of-type** selects a <span> within any <p> if it is the only <span> in there.在<p>元素中，选择<span> 类型唯一元素的（参考餐厅游戏23关）<a name="pRM2T"></a>## 7. 伪元素选择器（::开头）** 伪元素**，表示页面中一些特殊的并不真实的存在的元素**（特殊的位置）**- **::first-letter 表示第一个字母（段落的第一个字母或者汉字）**- **::first-line 表示第一行 （可随着网页的适应变动 而变动）**- **::selection 表示选中的内容（鼠标移动选中的）**- **::before 在元素的开始 （常用）**- **::after 在元素的最后（::before和::after 必须结合content属性来使用）**```html<head><style>p::first-letter{ color: aqua;}p::first-line{background-color: darkseagreen;}p::selection{background-color: chartreuse;}div::before{content: '111';color: blue;}div::after{content: '222';color: blue;}</style></head><body><div> hello </div><p>诗歌，是一种抒情言志的文学体裁。是用高度凝练的语言，生动形象地表达作者丰富情感，集中反映社会生活并具有一定节奏和韵律的文学体裁。《毛诗·大序》记载：“诗者，志之所之也。在心为志，发言为诗”。南宋严羽《沧浪诗话》云：“诗者，吟咏性情也”。只有一种用言语表达的艺术就是诗歌。</p></body>
8. CSS Dinner游戏（餐厅游戏）
- 练习地址： http://flukeout.github.io/
- 通关的方法是通过选择器选中正在活动的元素
- plate //第一关是对元素选择器考查
- bento //同第一关
fancy //考察id选择器的使用 语法：#id属性值{}
- plate>apple //考察对关系选择器的运用 父选子
fancy>pickle //同第四关
.small//考察对类选择器的使用 语法：.classs属性值- orange.small //对交集选择器的考察 语法：选择器1选择器2选择器3….选择器n{}
- bento>orange.small //对第4关和第7关知识的结合
- plate,bento //考察并集选择器 语法：选择器1，选择器2{}
- //通配选择器 语法：*{}
- plate * //7 和10的组合运用
- plate+apple //关系选择器 兄弟元素选择下个兄弟 语法：前一个+后一个
- bento~pickle //关系选择器 兄弟元素选择下面所有的兄弟 语法:兄~弟
- plate>apple //参考4
- orange:first-child //伪类选择器 ：first-child 第一个子元素
- plate>pickle,apple //或者 .plate>:only-child 伪元素选择器
.small:last-child// 符合条件的交集选择器；伪类元素选择器最后一个子元素- plate : nth-child(3) //伪元素选择器第几个
bento:first-of-type // 同类伪元素选择器
bento:nth-last-child(3) //选择所有伪元素 的倒数第三个
apple : first-of-type //同类伪元素第一个
- plate:nth-of-type(2n) // 同类伪元素选择器
- plate:nth-of-type(2n+3) // 同类伪元素选择器—根据公式选中即可
- apple:only-of-type //选择其apple类型的唯一元素。
- orange:last-of-type,apple:last-of-type //
- bento:empty // div:empty selects all emptyelements.
- apple:not(.small) // :not()伪元素选择器
若有收获，就点个赞吧
0 人点赞
