简单的CSS选择器-常规选择器

简单的css选择器-常规选择器

* css常规选择器有5个

* tag标签选择器: $(‘div’),根据标签名选择,返回集合

* id选择器:$(‘#top’), 根据元素id属性选择,返回单个

* class选择器:$(‘.active’), 根据元素class属性选择,返回集合

立即学习“前端免费学习笔记(深入)”;

* *通配选择器: $(‘*’),选择全部元素,返回集合

* group组选择器: $(‘p, h2, li’),同时选择多个不同元素,返回集合

1简单的css选择器-常规选择器

标签选择器

标签选择器

id选择器

类选择器

类选择器

我是一个段落

  • 我是一个列表项
  • //1.标签选择器:选择页面中具有相同标签名称的元素,返回集合$('h2').css('color', 'red')//2.id选择器: 根据标签中的id属性来选择元素,返回单个$('#green').css('color', 'green')//3.类选择器: 也叫class选择器,根据标签中的class属性来选择元素,返回集合$('.blue').css('color', 'blue')//4.通配选择器: 选择所有的元素,返回集合$('body *').css('background-color', 'wheat')//5.群组选择: 同时选择多个不同类型的元素,返回集合$('h2.blue, p, li').css('border', '2px solid red')

    以上就是简单的CSS选择器-常规选择器的详细内容,更多请关注创想鸟其它相关文章!

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
    如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
    发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1610786.html

    (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    上一篇 2025年12月24日 01:43:31
    下一篇 2025年12月9日 21:29:21

    相关推荐

    • 简单的CSS选择器-层级选择器

      简单的css选择器-层级选择器  * css层级选择器有4个 * 1.后代选择器: $(‘div p’),在祖先元素的所有后代(子孙)中,查询指定元素 * 2.子元素选择器: $(‘div > p’),在父元素的所有子元素中进行查找 * 3.相邻…

      好文分享 2025年12月24日
      000
    • css基本选择器

      1.基本选择器/*元素选择器*/ul { padding: 0;margin: 0;width: 450px;border: 1px dashed #666;padding: 10px 5px;}ul:after { /*子块撑开父块*/content:”; /*在子元素尾部添加空内容元素*/di…

      好文分享 2025年12月24日
      000
    • css属性选择器实例

      2.属性选择器 /*元素选择器*/ ul { padding: 0;margin: 0;width: 450px;border: 1px dashed #666;padding: 10px 5px;}ul:after { /*子块撑开父块*/content:”; /*在子元素尾部添加空内容元素*/…

      好文分享 2025年12月24日
      000
    • css伪类选择器

      css伪类选择器 /*元素选择器*/ ul {    padding: 0; margin: 0; 立即学习“前端免费学习笔记(深入)”; width: 450px; border: 1px dashed #666; padding: 10px 5px; } ul:after {  /*子块撑开父块…

      好文分享 2025年12月24日
      000
    • css上下文选择器

      家族: 祖宗,父辈,兄弟同辈关系 1.祖先元素: 包括多级后代的元素; 2.父级元素: 仅包括一级子元素的元素; 3.相邻元素: 拥有同一个父级的元素; 1.后代选择器:先找到祖先元素,再选择它下面的所有指定后代元素 立即学习“前端免费学习笔记(深入)”;   语法: 祖先与目标之间用空格分开,可以…

      好文分享 2025年12月24日
      000
    • 关于CSS Selector的学习

      这篇文章主要介绍了css 学习笔记之css selector的相关资料,需要的朋友可以参考下 CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/}body,p { /*同时选择多种标签元素…

      2025年12月24日
      000
    • CSS选择器的权重与优先规则

      在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定…

      2025年12月23日
      000
    • html5怎么写css_html5用style标签内嵌或外部css文件编写样式【编写】

      可通过内嵌CSS、引入外部CSS文件或使用行内style属性为HTML5页面元素添加样式:一、用标签在中写CSS;二、用标签引用外部.css文件;三、在元素标签中直接写style属性。 如果您希望在HTML5文档中为页面元素添加样式,则可以通过内嵌CSS或引入外部CSS文件来实现。以下是具体操作方法…

      2025年12月23日
      000
    • html表格标题如何写_编写HTML表格标题的正确标签【正确】

      HTML表格标题必须使用语义化的标签,置于内且在等元素之前;禁用–等非语义标签替代;可通过CSS的caption-side和text-align调整位置与对齐。 如果您在编写HTML表格时发现标题显示不正确或未被识别,则可能是由于使用了错误的标签或未遵循标准语义结构。以下是编写HTML表格标题的正确…

      2025年12月23日
      000
    • html5怎么添加文字_HTML5用p/span等标签加CSS设字体颜色添文字【添加】

      在HTML5中设置文字颜色需结合语义化标签(如p、span)与CSS样式,支持内联style、内部style标签、外部CSS文件、选择器定位及CSS变量等多种方式实现灵活精准控制。 如果您希望在HTML5页面中添加文字并设置字体颜色,则需要使用语义化文本标签配合CSS样式控制外观。以下是实现此目标的…

      2025年12月23日
      000
    • HTML5怎么文本聚焦_HTML5用JS focus()方法让input/textare获焦点【聚焦】

      可通过focus()方法使文本框自动获焦,具体包括:一、用ID获取元素后调用focus();二、用querySelector按选择器聚焦;三、用setTimeout延迟聚焦防渲染未完成;四、结合scrollIntoView确保可见;五、表单验证失败时聚焦首个错误字段。 如果您希望在HTML5页面中通…

      2025年12月23日
      000
    • CSS样式如何转换为HTML内联_样式整合方案【攻略】

      CSS转内联样式有四种方案:一、手动提取并逐元素标注;二、用PostCSS插件自动注入,忽略伪类和媒体查询;三、Python脚本批量解析注入,需处理!important;四、在线工具临时转换,需人工修正失效引用。 如果您拥有外部或内部CSS样式表,但需要将这些样式转换为HTML元素的内联style属…

      2025年12月23日
      000
    • 如何添加样式html5_HTML5添加样式步骤与CSS美化技巧【详解】

      需通过CSS控制HTML5元素外观,具体包括:一、内联样式(style属性);二、内部样式表(标签);三、外部样式表(.css文件+);四、选择器精准定位;五、响应式布局(viewport+媒体查询)。 如果您希望为HTML5页面添加视觉样式并实现美观效果,则需要通过CSS来控制元素的外观表现。以下…

      2025年12月23日
      000
    • html5 css怎么修饰_html5用CSS选择器设颜色布局动画修饰元素【修饰】

      需掌握CSS选择器、Flexbox/Grid布局、keyframes/transition动画、伪类/伪元素及CSS变量五方面技能。具体包括:一、用元素/类选择器设色;二、用Flexbox/Grid实现响应式布局;三、用keyframes和transition添加动画;四、用伪类/伪元素增强细节;五…

      2025年12月23日
      000
    • html5怎么写样式_html5用style内嵌或外部css文件写元素样式【写法】

      HTML5样式设置有三种方式:一、内联style属性,仅作用于当前元素;二、标签内嵌CSS,作用于整个文档;三、引入外部CSS文件,实现结构与样式分离;优先级为内联>内嵌/外部,后加载覆盖先加载。 如果您希望为HTML5文档中的元素设置样式,可以通过内嵌style属性或引入外部CSS文件来实现…

      2025年12月23日
      000
    • 如何调制html_调整HTML页面样式与布局【样式】

      应从内联样式、内部样式表、外部CSS文件、Flexbox布局和Grid布局五方面入手:一用style属性快速调试;二在head中嵌入style标签统一控制;三用link引入外部CSS文件实现复用;四以display: flex重构一维布局;五用display: grid实现二维网格划分。 如果您希望…

      2025年12月23日
      000
    • html5怎么定义字体_HT5用@font-face引入自定义字体文件【定义】

      可通过CSS的@font-face规则引入自定义字体,需声明字体族名、指定多格式文件路径(WOFF2/woff/TTF)、应用时匹配名称并设回退字体,注意%ignore_a_1%限制及用开发者工具验证渲染效果。 如果您希望在HTML5网页中使用非系统默认字体,可以通过CSS的@font-face规则…

      2025年12月23日
      000
    • JS如何操作HTML元素_DOM编程核心方法【教程】

      必须掌握操作HTML元素的核心DOM方法:一、通过ID获取单个元素;二、通过类名获取元素集合;三、通过标签名获取元素集合;四、通过CSS选择器获取元素;五、为元素绑定事件监听器;六、创建并插入新元素;七、替换或删除现有元素。 如果您希望使用JavaScript动态修改网页内容、响应用户交互或构建交互…

      2025年12月23日
      000
    • 如何读取HTML元素内容_DOM文本提取技巧【教程】

      DOM提供五种文本提取方法:一、textContent获取含空白的纯文本;二、innerText获取渲染后可见文本;三、innerHTML配合临时div安全剥离标签;四、childNodes遍历提取文本节点;五、querySelectorAll结合textContent批量提取。 如果您需要从网页中…

      2025年12月23日
      000
    • html5怎么使用font_html5用font-face引入自定义字体或style设字体【使用】

      需通过@font-face规则加载自定义字体文件并声明font-family,再在CSS选择器、style属性或CSS类中应用;须提供多格式字体提升兼容性,且font-family必须包含至少两个后备字体并建议设置font-display: swap。 如果您希望在HTML5页面中使用自定义字体,而…

      2025年12月23日
      000

    发表回复

    登录后才能评论
    关注微信