CSS的基本选择器及高级选择器(附详细示例以及效果图) | 您所在的位置:网站首页 › css中的选择器包括超文本标记选择器类选择器 › CSS的基本选择器及高级选择器(附详细示例以及效果图) |
Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器(详解)以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言 目录 ⭐ CSS基本选择器: ⭐ CSS高级选择器 🍧一、层次选择器(重点) 1、概念 2、使用(附示例以及效果图) 3、总结 🍧二、结构伪类选择器(不常用) 1、概念 🍧三、属性选择器(重点) 1、概念 2、使用(附示例以及效果图) 3、总结 CSS基本选择器:CSS基本选择器是使用最广泛和最常见的选择器类型,用于选择HTML文档中的元素。基本选择器包括以下几种: ①标签选择器:标签(HTML标签作为标签选择器的名称){声明} 标签选择器总结:标签选择器直接应用于HTML标签示例:测试标签选择器 CSS: p { color: pink; } 效果图:![]() ![]() ![]() 基本选择器的优先级:ID选择器>类选择器>标签选择器 CSS高级选择器 一、层次选择器(重点) 1、概念层次选择器是CSS中一种常见的选择器,用于选择具有特定层次关系的元素。通过层次选择器,可以选择父元素、子元素、兄弟元素等。 常见的层次选择器包括: 1、后代选择器:用空格表示。它选择某个元素的所有后代元素。例如,选择所有段落元素内部的 strong 元素可以使用 p strong 选择器。2、子元素选择器:用>表示。它选择某个元素的直接子元素。例如,选择 ul 元素下的所有 li 元素可以使用 ul > li 选择器。3、相邻兄弟选择器:用+表示。它选择某个元素的下一个相邻兄弟元素。例如,选择某个元素后面紧邻的 p 元素可以使用 p + p 选择器。4、通用兄弟选择器:用~表示。它选择某个元素后面的所有兄弟元素。例如,选择某个元素后面的所有 p 元素可以使用 p ~ p 选择器。层次选择器可以根据层次关系选择特定的元素,使得选择更加灵活和具体。 2、使用(附示例以及效果图) ①、后代选择器:p strong 示例:后代选择器示例 CSS:p strong{ color: pink; } 效果图:![]() ![]() 第一位同志 第二位同志 第三位同志 CSS: p + p { color: pink; background-color: #acacac; } 效果图:![]() 第一位同志 第二位同志 第三位同志 p ~ p { color: pink; background-color: #acacac; } 效果图:![]() 结构伪类选择器是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[attr=val]:选择匹配具有属性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 ] 示例:属性选择器使用测试 CSS:div[class] { color: aqua; width: 100px; height: 100px; background-color: #acacac; } 效果图:![]() ![]() ![]() ![]() ![]() 高级选择器可以让我们更加精确地选择目标元素,实现更复杂和细致的样式效果。但需要注意的是,过多的选择器和复杂的选择规则可能会影响页面性能和维护性,因此在使用高级选择器时应保持简洁和合理。 总结不易,希望uu们不要吝啬亲爱的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁 |
CopyRight 2018-2019 实验室设备网 版权所有 |