一.Css伪类。
1.语法：selector:pseudo-class {property:value;}
如下链接的使用：
2.CSS :first-child 伪类
（1）匹配第一个子元素。
代码：p:first-child { color:blue; }
匹配任何元素下的第一个子元素，如在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：第一个p元素中的字体是蓝色的。
显示效果：
（2）匹配所有子元素中的第一个<i>元素。
代码： p > i:first-child { color:blue; }
效果展示：
（3）匹配所有作为第一个子元素的 元素中的所有 <i> 元素。
代码：q:lang(no) {quotes: "~" "~";}
如下：只有第一个<p>元素的所有<i>元素变成了蓝色。
效果展示：
3.CSS - :lang 伪类。
:lang 类为属性值为 no 的q元素定义引号的类型。
代码：q:lang(no) {quotes: "~" "~";}
二.Css伪元素。
1.语法。
selector:pseudo-element {property:value;}
Css类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
2.:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式
代码：p:first-line { color:#ff0000; font-variant:small-caps; }
如下只有文本第一行有特殊样式：
效果展示：
注意："first-line" 伪元素只能用于块级元素。
3.:first-letter 伪元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式。
代码：p:first-letter { color:#ff0000; font-size:xx-large; }
如下只有本段第一个首字为特殊样式；
效果展示：
4.before伪元素。
：before元素用于在每个元素前插入一个内容。
代码：h1:before { content:url(smiley.gif); }
如下在每个<h1>前插入了一张图片。
5.after伪元素。
":after" 伪元素可以在元素的内容之后插入新内容。
代码：h1:after { content:url(smiley.gif); }
如下在每个<h1>后插入一个笑脸。
所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
三.关系选择器。
1.后代选择器(以空格 分隔)。
代码：div p { background-color:yellow; }
如下只有<div>中的所有<p>元素有特殊样式：
效果展示：
2.子元素选择器(以大于 > 号分隔）。
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
代码：div>p { background-color:yellow; }
如下只有<div>中的第一级<p>元素有特殊样式。
效果展示：
3.相邻兄弟选择器（以加号“+”表示）
代码：div+p { background-color:yellow; }
相邻兄弟选择器，可选择紧接在另一元素后的元素，且两元素为同级元素。
如下<div>与<p>同一父元素为<body>，它们为同级元素。
效果展示：
4.后续兄弟选择器（以波浪号 ～ 分隔）。
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
如下所有<div>后的同级<p>元素都有黄色背景色。
效果展示：
四.Css盒子模型。
1.Css盒子模型。
HTML元素可以看作成一个由内边距、外边距、内容。
效果如下：
五.Css布局。
网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。头部区域位于网页顶部，一般用于设置网页的标题和logo。菜单导航区域用于放置其它网页的链接。
如下则是一个简单的网页布局：
Css代码：
Html代码：
效果展示：
六.Css导航栏
导航栏等于链接列表。
1.垂直导航栏。
Css代码：
Html代码：
效果展示：
2.水平导航栏。
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
Html代码：
Css代码：
效果展示：
7.Css调试。
1.使用浏览器的开发者工具：大多数现代浏览器都提供了开发者工具，可以用来检查元素、修改样式、调试JavaScript等。在开发者工具中，您可以通过选择元素并查看其样式来检查CSS。您还可以在样式面板中更改样式，并查看它们如何影响元素。
2.使用CSS预处理器的调试工具：如果您使用的是CSS预处理器（如Sass、Less等），则可以使用它们的调试工具来查看生成的CSS代码。这些工具通常会显示生成的CSS代码，并且可以帮助您检查其中的错误。
3.使用代码编辑器的调试工具：一些代码编辑器（如Visual Studio Code）提供了内置的CSS调试工具。这些工具可以帮助您检查CSS代码，并提供错误检查和修复建议。
1135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
