青岛网站建设平台,旅游类网站做百度竞价,wordpress网页模板制作,wordpress4.6 手册Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器#xff08;详解#xff09;以及部分理论知识 #x1f349;欢迎点赞 #x1f44d; 收藏 ⭐留言评论 #x1f4dd;私信必回哟#x1f601; #x1f349;博主收将持续更新学习记录获#xf…Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器详解以及部分理论知识 欢迎点赞 收藏 ⭐留言评论 私信必回哟 博主收将持续更新学习记录获友友们有任何问题可以在评论区留言 目录 ⭐ CSS基本选择器 ⭐ CSS高级选择器 一、层次选择器重点 1、概念 2、使用附示例以及效果图 3、总结 二、结构伪类选择器不常用 1、概念 三、属性选择器重点 1、概念 2、使用附示例以及效果图 3、总结 CSS基本选择器 CSS基本选择器是使用最广泛和最常见的选择器类型用于选择HTML文档中的元素。基本选择器包括以下几种 ①标签选择器标签(HTML标签作为标签选择器的名称){声明} 标签选择器总结标签选择器直接应用于HTML标签示例p测试标签选择器/p CSS: p { color: pink; } 效果图②类选择器 创建.class(类选择器也是类名称){声明}使用标签名 class类名称标签内容/标签名类选择器总结类选择器可在页面中多次使用示例label classlabel_test测试类选择器/label CSS.label_test {width: 200px;height: 200px;border: 4px solid black;background-color: pink; }效果图③ID选择器#ID(ID选择器也是ID名称){声明}  ID选择器总结ID选择器在同一个页面中只能使用一次示例a ida_test测试id选择器/a CSS: #a_test{width: 300px;height: 301px;border: 1px solid black; } 效果图 基本选择器的优先级ID选择器类选择器标签选择器 CSS高级选择器 一、层次选择器重点 1、概念 层次选择器是CSS中一种常见的选择器用于选择具有特定层次关系的元素。通过层次选择器可以选择父元素、子元素、兄弟元素等。 常见的层次选择器包括 1、后代选择器用空格表示。它选择某个元素的所有后代元素。例如选择所有段落元素内部的 strong 元素可以使用 p strong 选择器。2、子元素选择器用表示。它选择某个元素的直接子元素。例如选择 ul 元素下的所有 li 元素可以使用 ul li 选择器。3、相邻兄弟选择器用表示。它选择某个元素的下一个相邻兄弟元素。例如选择某个元素后面紧邻的 p 元素可以使用 p p 选择器。4、通用兄弟选择器用~表示。它选择某个元素后面的所有兄弟元素。例如选择某个元素后面的所有 p 元素可以使用 p ~ p 选择器。 层次选择器可以根据层次关系选择特定的元素使得选择更加灵活和具体。 2、使用附示例以及效果图 ①、后代选择器p strong 示例pstrong后代选择器示例/strong/p CSSp strong{ color: pink; } 效果图 ②、子元素选择器 ul li 示例ul li子选择器1/lili子选择器2/li /ulCSSulli{ background-color: #acacac; }效果图 ③、相邻兄弟选择器p p 示例p第一位同志/p p第二位同志/p p第三位同志/p CSS: p p {color: pink;background-color: #acacac; } 效果图 ④、通用兄弟选择器p ~ p 示例p第一位同志/p p第二位同志/p p第三位同志/p p ~ p {color: pink;background-color: #acacac; } 效果图 3、总结 选择器名称选择器表示形式选择器作用后代选择器p  strong选择某个元素的所有后代元素子元素选择器ul li选择某个元素的直接子元素相邻兄弟选择器p p选择某个元素的下一个相邻兄弟元素通用兄弟选择器p ~ p择某个元素后面的所有兄弟元素 二、结构伪类选择器不常用 1、概念 结构伪类选择器是CSS中一种常见的选择器用于选择页面中满足特定结构的元素。它们根据元素在文档树中的位置和关系来进行选择。 常见的结构伪类选择器包括 1、first-child 选择器选择某个元素作为其父元素的第一个子元素。2、last-child 选择器选择某个元素作为其父元素的最后一个子元素。3、nth-child(n) 选择器选择某个元素作为其父元素的第n个子元素。4、nth-last-child(n) 选择器选择某个元素作为其父元素的倒数第n个子元素。5、only-child 选择器选择某个元素作为其父元素的唯一一个子元素。6、nth-of-type(n) 选择器选择某个元素作为其父元素中特定类型的第n个元素。7、nth-last-of-type(n) 选择器选择某个元素作为其父元素中特定类型的倒数第n个元素。 结构伪类选择器可以根据元素在文档树中的位置和关系灵活地选择特定的元素从而实现页面样式的控制和布局。 三、属性选择器重点 1、概念 属性选择器是CSS中一种常见的选择器用于根据元素的属性值来选择元素。属性选择器可以根据元素的属性值、属性存在与否或属性值的特定关系来选择元素。 1、A[attr]选择具有指定属性的元素。2、A[attrval]选择匹配具有属性attr的A元素并且属性值为val其中val区分大小写3、A[attr^val]选择匹配元素A且A元素定义了属性attr其属性值是以val开头的任意字符串4、A[attr$val]选择匹配元素A且A元素定义了属性attr其属性值是以val结尾的任意字符串5、A[attr*val]选择匹配元素A且A元素定义了属性attr其属性值包含了“val” 属性选择器提供了一种根据元素属性值来选择元素的灵活方式可以根据实际需要进行选择和样式设置。 2、使用附示例以及效果图 ①、选择指定属性元素div[ class ] 示例div classdiv_test属性选择器使用测试/div CSSdiv[class] {color: aqua;width: 100px;height: 100px;background-color: #acacac; } 效果图 ②、选择匹配指定属性的元素区分大小写div[ class div_test ] 示例div classdiv_test属性选择器使用测试/div CSSdiv[classdiv_test] {color: red;width: 100px;height: 100px;background-color: aqua; } 效果图 ③、选择匹配元素其属性以指定值开头div[ class  ^ div] 示例div classdiv_test属性选择器使用测试/div CSSdiv[class^ div] {color: black;width: 100px;height: 100px;background-color: aliceblue; } 效果图 ④、选择匹配元素其属性以指定值结尾div[ class $ test] 示例div classdiv_test属性选择器使用测试/div CSSdiv[class$ test] {color: antiquewhite;width: 100px;height: 100px;background-color: beige; } 效果图 ⑤、选择匹配元素其属性中包含了指定值div[ class * v ] 示例div classdiv_test属性选择器使用测试/div CSSdiv[class* _] {color: crimson;width: 100px;height: 100px;background-color: darkcyan; } 效果图 3、总结 选择器表示形式选择器作用div[ class ]标签包含的属性div[ class div_test ]选择指定值div[ class  ^ div]开头指定值div[ class $ test]结尾指定值div[ class * v ]包含指定值 高级选择器可以让我们更加精确地选择目标元素实现更复杂和细致的样式效果。但需要注意的是过多的选择器和复杂的选择规则可能会影响页面性能和维护性因此在使用高级选择器时应保持简洁和合理。 总结不易希望uu们不要吝啬亲爱的哟()ノ~如有问题欢迎评论区批评指正