目录
案例：使only-child把类选择器为noChild并且没有兄弟元素为noChild的类变为圆形
1.属性值前缀包含选择器
- 概念：这个选择器用来匹配具有特定属性且该属性值以指定字符串开头的所有元素。
- 用途：当你想要基于属性值的开始部分来选择元素时使用。例如，如果想为所有指向外部链接（
href属性以http://或https://开头）的<a>标签设置样式。 - 语法：[属性名^=值] 选择器选择所有以指定值开头的属性
案例：使前缀为my的class的样式变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性前缀选择器</title> <style> /* 属性前缀选择器 选择器语法： [属性名^=值] 选择器选择所有以指定值开头的属性 */ div{ width: 200px; height: 200px; } div[class^=my] { border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div> <div style="background-color: brown;" class="classmyTwoStyle">这是第二个div标签</div> <div style="background-color: yellow;" class="classThreeStylemy">这是第三个div标签</div> <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div> </body> </html>
3）效果
只有前缀中包含才会被选中修饰
2.属性值后缀包含选择器
- 概念：这个选择器用来匹配具有特定属性且该属性值以指定字符串结尾的所有元素。
- 用途：当你需要根据属性值的结束部分来选择元素时使用。比如，你想给所有图片文件扩展名为
.jpg的<img>元素应用样式。 - 语法：[属性名$=值] 选择器选择所有以指定值结尾的属性
案例：使后缀为my的class的样式变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性后缀选择器</title> <style> /* 属性后缀选择器 选择器语法： [属性名$=值] 选择器选择所有以指定值结尾的属性 */ div { width: 200px; height: 200px; } div[class$=my] { border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div> <div style="background-color: brown;" class="classmyTwoStyle">class属性中包含my</div> <div style="background-color: yellow;" class="classThreeStylemy">class属性中后缀包含my</div> <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div> </body> </html>
2）效果
3.属性值包含选择器
- 概念：这个选择器用来匹配具有特定属性且该属性值中包含指定子字符串的所有元素。
- 用途：当属性值可能包含多个字符或单词，而你只关心其中的一部分时使用。例如，你可以通过它来选择所有含有 "large" 字样的 class 属性的元素。
- 语法：[属性名*=值] 选择器选择所有包含指定值的属性
案例：使包含my的class的样式变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性值包含选择器</title> <style> /* 属性值包含选择器 选择器语法： [属性名*=值] 选择器选择所有包含指定值的属性 */ div{ width: 200px; height: 200px; } div[class*=my] { border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div> <div style="background-color: brown;" class="classmyTwoStyle">class属性中包含my</div> <div style="background-color: yellow;" class="classThreeStylemy">class属性中后缀包含my</div> <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div> </body> </html>
2）效果
4.子元素选择器
- 概念：这个选择器用于匹配作为另一个元素直接子元素的所有元素。
- 用途：它可以帮助你更精确地控制样式，只应用于那些直接位于父元素下的子元素，而不是任何嵌套更深的后代元素。
-
选择器语法：
父元素 > 子元素
-
案例：使div下的p标签的字体颜色变为红色
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>子元素选择器</title> <style> /* 子元素选择器 选择器语法： 父元素 > 子元素 */ div > p{ color: red; } </style> </head> <body> <div> <p>这是第一个p标签</p> <p>这是第二个p标签</p> <p>这是第三个p标签</p> </div> <p>这是子元素</p> </body> </html>
2）效果
5.临近兄弟选择器(+)
- 概念：这个选择器用来匹配紧接在另一个元素之后的兄弟元素。
- 用途：它允许你对紧跟在某个元素后的特定兄弟元素应用样式，这在布局上很有用，如将段落置于标题之下并给予特殊格式。
- 选择器语法：
选择器1 + 选择器2
案例：使div下的后面的兄弟变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>临近兄弟选择器(+)</title> <style> /* 临近兄弟选择器(+) 选择器语法： 选择器1 + 选择器2 */ div{ width: 200px; height: 200px; } .myDiv + div{ background-color: rgb(161, 236, 236); border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div class="myDivTop" style="background-color: bisque;">myDivTop </div> <div class="myDiv" style="background-color: brown;">普通</div> <div class="myDivButtom" style="background-color: yellow;">myDivButtom</div> <div style="background-color: rgb(78, 48, 10);">普通</div> </body> </html>
2）效果
6.普通兄弟选择器(~)
- 概念：这个选择器用来匹配与另一个元素在同一层次上的所有后续兄弟元素。
- 用途：当你想要对一个元素后面的所有兄弟元素应用相同的样式时使用，但不包括那个元素本身。
案例：使用指定选择器后面的兄弟元素变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>普通兄弟选择器(~)</title> <style> div{ width: 200px; height: 200px; } .myDiv~div{ /** * ~:兄弟选择器 */ border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div class="myDivTop" style="background-color: bisque;">myDivTop </div> <div class="myDiv" style="background-color: brown;">普通</div> <div class="myDivButtom" style="background-color: yellow;">myDivButtom</div> <div style="background-color: rgb(78, 48, 10);">普通</div> </body> </html>
2）效果
7.:root选择器
- 概念：这个伪类选择器匹配文档树的根元素。
- 用途：通常用来设置全局样式变量或者影响整个页面的基础样式。
-
选择器语法：
:root
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>root选择器</title> <style> /* root选择器 选择器语法： :root */ :root{ background-color: rgb(231, 168, 168); width: 200px; height: 200px; border-radius: 20%; } </style> </head> <body> <p>这是第一个p标签</p> <p style="background-color: yellowgreen;">这是第二个p标签</p> <p style="background-color: yellow;">这是第三个p标签</p> <p style="background-color: cadetblue;">这是第四个p标签</p> <p style="background-color: springgreen;">这是第五个p标签</p> </body> </html>
2）效果
8.:not选择器
- 概念：这个伪类选择器用来排除符合括号内选择器条件的元素。
- 用途：当需要从一组元素中排除某些特定元素时非常有用，使得你可以更加灵活地控制样式。
-
选择器语法：
:not(选择器)
案例：选择器不是myClassStyle的标签变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>not选择器</title> <style> /* not选择器 选择器语法： :not(选择器) */ div{ width: 200px; height: 200px; } div:not(.myClassStyle){ border-radius: 50%; } .myClassStyle{ } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">类不是myClassStyle<</div> <div style="background-color: bisque;" class="myClassStyle">类是myClassStyle</div> <div style="background-color: brown;" class="classmyTwoStyle">类不是myClassStyle</div> <div style="background-color: yellow;" class="classThreeStylemy">类不是myClassStyle</div> </body> </html>
2）效果
9.:only-child选择器
- 概念：这个伪类选择器用来匹配没有兄弟节点的元素。
- 用途：常用于给唯一的子元素添加特殊样式，如高亮唯一的孩子项。
- 选择器语法：
:only-child 选择所有没有兄弟元素的元素
案例：使only-child把类选择器为noChild并且没有兄弟元素为noChild的类变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>only-child选择器</title> <style> /* only-child选择器 选择器语法： :only-child 选择所有没有兄弟元素的元素 */ div{ width: 200px; height: 200px; } .noChild:only-child { border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);" class="noChild">noChild</div> <div style="background-color: rgb(218, 202, 181);" class="noChild">noChild</div> <div style="background-color: bisque; display: flex; flex: center;"> <div class="noChild" style="width: 100px;height: 100px; background-color: aliceblue; "></div> </div> </body> </html>
2）效果
10.:first-child选择器
- 概念：这个伪类选择器用来匹配作为其父元素第一个子元素的元素。
- 用途：可以用来给列表中的第一个项目或表格中的第一行添加样式。
-
选择器语法：
:first-child 选择所有父元素中第一个子元素
案例：使第一个div标签变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>first-child选择器</title> <style> /* first-child选择器 选择器语法： :first-child 选择所有父元素中第一个子元素 */ div{ width: 200px; height: 200px; } div:first-child{ background-color: rgb(238, 138, 6); border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;">这是第一个div标签</div> <div style="background-color: brown;">这是第二个div标签</div> <div style="background-color: yellow;">这是第三个div标签</div> <div style="background-color: rgb(231, 220, 206);">这是第四个div标签</div> </body> </html>
2）效果
可以看到只有第一个div变为圆形
11.:last-child选择器
- 概念：这个伪类选择器用来匹配作为其父元素最后一个子元素的元素。
- 用途：适用于给列表的最后一项或表格的最后一行添加样式。
- 选择器语法：
:last-child 选择所有父元素中第一个子元素
案例：使最后一个标签变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>last-child选择器</title> <style> div{ width: 200px; height: 200px; } div:last-child{ /** * 选择器语法： :last-child 选择所有父元素中第一个子元素 */ background-color: rgb(223, 158, 73); border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;">这是第二个div标签</div> <div style="background-color: brown;">这是第三个div标签</div> <div style="background-color: yellow;">这是第四个div标签</div> </body> </html>
2）效果
12.:nth-child(n)选择器
- 概念：这个伪类选择器用来匹配其父元素的第n个子元素。
- 用途：可以通过数字、关键字（odd, even）或公式来指定模式，适用于创建条纹效果或每隔几个元素改变样式等。
- 选择器语法：
:nth-child(odd) 选择所有奇数子元素
:nth-child(even) 选择所有偶数子元素
案例：奇数div为方形，偶数div为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-child(n)选择器</title> <style> /* nth-child(n)选择器 选择器语法： :nth-child(odd) 选择所有奇数子元素 :nth-child(even) 选择所有偶数子元素 */ div{ width: 200px; height: 200px; background-color: aqua; } div:nth-child(odd){ background-color: rgb(223, 158, 73); } div:nth-child(even){ background-color: rgb(255, 148, 18); border-radius: 50%; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </body> </html>
2）效果
13.:nth-last-child(n)选择器
- 概念：这个伪类选择器与
:nth-child()类似，但它从最后一个子元素倒数计数。 - 用途：同样支持数字、关键字和公式，对于从末尾开始处理元素特别有用。
-
选择器语法：
:nth-last-child(n) 选择器选择所有指定位置的子元素
案例：使倒数第二个元素变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-last-child(n)选择器</title> <style> /* nth-last-child(n)选择器 选择器语法： :nth-last-child(n) 选择器选择所有指定位置的子元素 */ div{ width: 200px; height: 200px; } div:nth-last-child(2){ background-color:rgb(223, 158, 73); border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;">普通</div> <div style="background-color: brown;">普通</div> <div style="background-color: yellow;">普通</div> <div style="background-color: rgb(78, 48, 10);">普通</div> </body> </html>
2）效果
14.:nth-of-type(n)选择器
- 概念：这个伪类选择器用来匹配作为其父元素的特定类型的第n个子元素。
- 用途：仅考虑相同类型的子元素，并按出现顺序计数，可用于给每种类型元素的特定位置应用样式。
-
选择器语法：
:nth-of-type(n) 选择器选择所有指定类型的第n个元素
案例：使div中第二个元素变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-of-type(n)选择器</title> <style> /* nth-of-type(n)选择器 选择器语法： :nth-of-type(n) 选择器选择所有指定类型的第n个元素 */ div{ width: 200px; height: 200px; } div:nth-of-type(2){ background-color: rgb(223, 158, 73); border-radius: 50%;; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div> <div style="background-color: brown;" class="classmyTwoStyle">class属性中包含my</div> <div style="background-color: yellow;" class="classThreeStylemy">class属性中后缀包含my</div> </body> </html>
2）效果
15.:nth-last-of-type(n)选择器
- 概念：这个伪类选择器与
:nth-of-type()类似，但它也是从最后一个子元素倒数计数。 - 用途：适合于从末尾开始对特定类型的元素进行样式处理。
案例：使div元素中的倒数第二个变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-last-of-type(n)选择器</title> <style> /* nth-last-of-type(n)选择器 选择器语法： :nth-last-of-type(n) 选择器选择所有指定位置的元素 注意： 1、n为负数，从后往前数，从-1开始，依次递减 2、n为小数，只取整数部分*/ div{ width: 200px; height: 200px; } div:nth-last-of-type(2){ background-color: rgb(223, 158, 73); border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;">普通</div> <div style="background-color: brown;">普通</div> <div style="background-color: yellow;">普通</div> <div style="background-color: rgb(78, 48, 10);">普通</div> </body> </html>
‘
2）效果
16.：empty选择器
- 概念：这个伪类选择器用来匹配没有任何内容的元素，包括文本节点。
- 用途：可以用来清理或隐藏那些未被填充内容的空标签。
-
选择器语法：
:empty 选择器选择所有没有子元素的标签
案例：使用空标签变为圆形
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>empty选择器</title> <style> /* empty选择器 选择器语法： :empty 选择器选择所有没有子元素的标签 */ div{ width: 200px; height: 200px; } div:empty { background-color: rgb(65, 248, 9) !important; border-radius: 50%; } </style> </head> <body> <div style="background-color: rgb(223, 158, 73);">普通</div> <div style="background-color: bisque;" class="myClassStyle">惜己</div> <div style="background-color: brown;" class="classmyTwoStyle"></div> <div style="background-color: yellow;" class="classThreeStylemy">小久</div> </body> </html>
2）效果
17.::before伪元素选择器
- 概念：这个伪元素会在选中的元素之前插入生成的内容。
- 用途：常用于在元素前添加装饰性图标、引用符号或其他标记。
案例：在标签内部的前面添加指定的文字
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>before伪元素选择器</title> <style> .myBefore{ background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); width: 200px; height: 200px; } .myBefore::before{ content: "这是before伪元素"; color: rgb(255, 0, 0); background-color: rgb(0, 255, 255); } </style> </head> <body> <div class="myBefore"></div> <div class="myAfter"></div> </body> </html>
2）效果
18.::after伪元素选择器
- 概念：这个伪元素会在选中的元素之后插入生成的内容。
- 用途：类似于
::before，但在元素后方添加内容，比如清除浮动的块或者添加版权信息等。
案例：在元素内部最后面添加指定内容
1）代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>after伪元素选择器</title> <style> .myAfter{ background-color: rgb(235, 36, 36); width: 200px; height: 200px; border: 1px solid #000; position: relative; } .myAfter::after{ content: "这是after伪元素"; position: absolute; top: 50%; left: 50%; } </style> </head> <body> <div class="myAfter"></div> </body> </html>
2）效果
扫一扫
5725
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
