CSS3 基础

Myth丶恋晨 2021-11-29 08:50 250阅读 0赞

style 标签

**行内样式　　**————使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
    <p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

**内部样式       **————CSS代码写在<head>的<style>标签中

优点——方便在同页面中修改样式

缺点——不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

**外部样式表**　　————代码保存在扩展名为.css的样式表中

链接外部样式表

![1544757-20190715111430832-1527453338.png][]

导入外部样式表

![1544757-20190715111453764-2060821092.png][]

**链接式与导入式的区别**

*  <link/>标签属于XHTML，@import是属于CSS2.1
 *  使用<link/>链接的CSS文件**先加载到网页当中，再进行编译显示**
 *  使用@import导入的CSS文件，客户端**显示HTML结构，再把CSS文件加载到网页**当中
 *  @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

** CSS样式优先级**

1.  行内样式>内部样式表>外部样式表
2.  就近原则

**css基本选择器**

*  标签选择器
 *  类选择器
 *  ID选择器

![1544757-20190715111751191-1236863009.png][]

![1544757-20190715111954624-1085807347.png][]

![1544757-20190715112045173-631873611.png][]

*  标签选择器直接应用于HTML标签
 *  类选择器可在页面中多次使用
 *   ID选择器在同一个页面中只能使用一次

**优先级**

**ID选择器>类选择器>标签选择器**

【不遵循就近原则】

**高级选择器**

*  层次选择器
 *  结构伪类选择器
 *  属性选择器

![1544757-20190715112340186-1046452891.png][]

![1544757-20190715112442935-1094479496.png][]

![1544757-20190715112551339-905475627.png][]

![1544757-20190715112645793-667781375.png][]

![1544757-20190715112756767-26471520.png][]

** 结构伪类选择器**

![1544757-20190715145850086-569835846.png][]

![1544757-20190715150004977-453329637.png][]

**使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点**

*  E F:nth-child(n)在父级里从一个元素开始查找，不分类型
 *  E F:nth-of-type(n)在父级里先看类型，再看位置

**属性选择器**

![1544757-20190715150459905-1160325317.png][]

** 结构伪类选择器详解及注意事项**

**1、nth-child和nth-last-child**

**   1）E:nth-child(n)** 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：

p:nth-child(n)\{background:red\}  表示父元素中第n个字节点  
**      p:nth-child(odd)\{background:red\}/\*匹配奇数行\*/**  
**      p:nth-child(even)\{background:red\}/\*匹配偶数行\*/**  
**      p:nth-child(2n)\{background:red\}/\*其中n是从0开始计算\*/**

经验与技巧:当“E:nth-child(n)”选择器中的**n为一个表达式时，其中n是从0开始计算**，**当表达式的值为0或小于0的时候，不选择任何匹配的元素。**

例子（Html代码）：

1.  <!DOCTYPE html**>**  
2.  **<html** lang="en"**>**  
3.  **<head>**  
4.  **<meta** charset="UTF-8"**>**  
5.  **<title>**Title**</title>**  
6.  **<style>**  
7.  p,h1\{  
8.  height:30px;  
9.  width:300px;  
10. border:1px solid \#00A2E9;  
11. \}  
12. p:nth-child(2n)\{  
13. 
14. \}  
15. **</style>**  
16. **</head>**  
17. **<body>**  
18. **<p>**p1**</p>**  
19. **<p>**p2**</p>**  
20. **<p>**p3**</p>**  
21. **<p>**p4**</p>**  
22. **<p>**p5**</p>**  
23. **<p>**p6**</p>**  
24. **</body>**  
25. **</html>**

效果：

![1544757-20190715153556539-158543312.png][]

但是某些情况下会有问题，比如我将上面的例子改写成下面：

**\[html\]** [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<html** lang="en"**>**  
3.  **<head>**  
4.  **<meta** charset="UTF-8"**>**  
5.  **<title>**Title**</title>**  
6.  **<style>**  
7.  p,h1\{  
8.  height:30px;  
9.  width:300px;  
10. border:1px solid \#00A2E9;  
11. \}  
12. p:nth-child(2n)\{  
13. 
14. \}  
15. **</style>**  
16. **</head>**  
17. **<body>**  
18. **<p>**p1**</p>**  
19. **<h1>**h1**</h1>**/\*增加了h1标签\*/  
20. **<p>**p2**</p>**  
21. **<h1>**h2**</h1>**/\*增加了h1标签\*/  
22. **<p>**p3**</p>**  
23. **<p>**p4**</p>**  
24. **<p>**p5**</p>**  
25. **<p>**p6**</p>**  
26. **</body>**  
27. **</html>**

**效果就变成如下图所示，发现p2的样式并没有应用。因为nth-child选择器在计算子元素是第n个元素，是连同所有父元素中所有子元素一起计算的，这样的话，p2其实是第三个元素，但是h1和h2由于没有被选中，所以颜色不变。**

![1544757-20190715153638084-1915097590.png][]

这个问题 就需要用E:nth-of-type(n) 来解决，后面会详细介绍。

2）E:nth-last-child(n) 选择器和前面的“E:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-child(n)”选择器有所区别，**从某父元素的最后一个子元素开始计算**，来选择特定的元素。这里的使用就不举例说明了。

**2、E:nth-of-type(n) 和E:nth-last-of-type(n)**

** 1）“E:nth-of-type(n)”选择器和“E:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“E:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。**在“E:nth-of-type(n)”选择器中的“n”和“E:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

刚才的那个例子就可以直接利用这个选择器实现，它可以只选中p元素。

**\[css\]** [view plain][] [copy][view plain]

1.  p:nth-of-type(2n)\{  
2.  **background-color**: \#64b0ff;  
3.  \}

效果图如下，完美的实现了^\_^。

![1544757-20190715153715990-1814036967.png][]

2）E:nth-last-of-type(n)d(n) 选择器和前面的“E:nth-of-type(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“E:nth-of-type(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。这里的使用就不举例说明了。

**3、E:first-child和E:last-child**

1）**“E:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。**

案例代码：

**\[html\]** [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<html** lang="en"**>**  
3.  **<head>**  
4.  **<meta** charset="UTF-8"**>**  
5.  **<title>**Title**</title>**  
6.  **<style>**  
7.  p,h1\{  
8.  height:30px;  
9.  width:300px;  
10. border:1px solid \#00A2E9;  
11. \}  
12. p:first-child\{  
13. 
14. \}  
15. **</style>**  
16. **</head>**  
17. **<body>**  
18. **<p>**p1**</p>**  
19. **<p>**p2**</p>**  
20. **<p>**p3**</p>**  
21. **<p>**p4**</p>**  
22. **<p>**p5**</p>**  
23. **<p>**p6**</p>**  
24. **</body>**  
25. **</html>**

效果图：

** 2）“E:last-child”选择器与“E:first-child”选择器作用类似，不同的是“E:last-child”选择器选择的是元素的最后一个子元素。**

**       **其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。

转载于:https://www.cnblogs.com/expedition/p/11187847.html

[1544757-20190715111430832-1527453338.png]: /images/20211129/a128ff47327845b6a58b23118a3c3026.png
[1544757-20190715111453764-2060821092.png]: /images/20211129/f9666dcfa2d542609f584f877500a708.png
[1544757-20190715111751191-1236863009.png]: /images/20211129/c07e05ae91804407957dd4db67d0f4a5.png
[1544757-20190715111954624-1085807347.png]: /images/20211129/c5f63678dcc44026b462f8a99e58ab42.png
[1544757-20190715112045173-631873611.png]: /images/20211129/a9d4bfc7b7ee4d0dabba052ee6893a06.png
[1544757-20190715112340186-1046452891.png]: /images/20211129/c36d870493ff4d1a8b52bf273e65fd9b.png
[1544757-20190715112442935-1094479496.png]: /images/20211129/7270f3e297fd4df69e5591a1cb267b0d.png
[1544757-20190715112551339-905475627.png]: /images/20211129/54d38d006c5d4ba6b43ff55107c1d09d.png
[1544757-20190715112645793-667781375.png]: /images/20211129/6ba7ab43ffbb4d94b8a3c3653790113a.png
[1544757-20190715112756767-26471520.png]: /images/20211129/398ab2176a864331a0121c0a3ff7c3ef.png
[1544757-20190715145850086-569835846.png]: /images/20211129/098c4b09e2174e09a811e677c0c1b467.png
[1544757-20190715150004977-453329637.png]: /images/20211129/a413d5918c554a4ea982c94acacc98e1.png
[1544757-20190715150459905-1160325317.png]: /images/20211129/40fde0b066cc4a0dba6d41bd397490e4.png
[1544757-20190715153556539-158543312.png]: /images/20211129/b1eeed4e2b224467a21cd9745b87a5c5.png
[view plain]: https://blog.csdn.net/u010297791/article/details/53968089
[1544757-20190715153638084-1915097590.png]: /images/20211129/23212fa4188d49fba00e645ef6f55864.png
[1544757-20190715153715990-1814036967.png]: /images/20211129/7087ed078af64eb38ea34d7d251e74c8.png