什么是CSS选择器?css选择器有哪些类型

在css样式中,一般都是由三部分组成,选择器和属性,属性值,但是很多css小白对css选择器并不是很熟悉,下面我们就来讲解一下什么是css选择器?css选择器有哪些类型?【推荐阅读:30个css3选择器用法总结】

我们先看一段代码:

     什么叫CSS选择器?    
php1
php2
php3

效果如下:

微信截图_20181103144006.png

如果我们想要把php2设置成蓝色,怎么办呢?我们必须通过一种方式来“选中”第二个div,然后把它的CSS属性颜色color改为蓝色,像这种把某一个元素改成你想要的效果,把你想要的标签选中的方式就是所谓的“选择器”,也就是说选择器就是一种选择元素的方式。

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

所谓选择器,说白了就是用一种方式把你想要的那一个标签选中!把它选中了,你才能操作这个标签的CSS样式。这样够简单了吧。CSS有很多把你所需要的标签选中的方式,这些不同的方式就是不同的选择器。

二:css选择器有哪些类型

1.标签选择器(如:body,div,p,ul,li)

2.类选择器(如:class=”head”,class=”head_logo”)

3.ID选择器(如:id=”name”,id=”name_txt”)

4.全局选择器(如:*号)

5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

6.继承选择器(如:div p,注意两选择器用空格键分开)

7.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

8.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

以上就是对什么是CSS选择器?css选择器有哪些类型的全部介绍,如果你想了解更多有关CSS3教程,关注创想鸟。

以上就是什么是CSS选择器?css选择器有哪些类型的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 03:23:51
下一篇 2025年12月24日 03:24:13

相关推荐

  • CSS选择器的代码实例以及css优先级的代码实例

    本篇文章给大家带来的内容是关于CSS选择器的代码实例以及css优先级的代码实例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 CSS入门第一节 p { color: yellowgreen; } 我是DIV 我是段落标签 我是大标题 /*index.css文件*/ p { /* 设…

    好文分享 2025年12月24日
    000
  • css选择器有哪些类型?css常用选择器的简单介绍

    本篇文章给大家带来的内容是关于如何使用css选择器有哪些类型?css常用选择器的简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 css标签选择器 作用:选中页面中的所有指定元素 语法:标签名:{} id选择器 立即学习“前端免费学习笔记(深入)”; 作用:通过元素的id属性…

    好文分享 2025年12月24日
    000
  • 什么是css选择器?css基本选择器的总结(九种)

    什么是css选择器?css选择器就是指定css要作用的标签,那个标签的名称就是选择器。意味:选择哪个容器。html页面中的元素就是通过css选择器进行控制的。那么,css选择器有哪些呢?下面我们来看一看css常用的选择器 1 : css通配符选择器 通配符选择器用星号(*)来表示,例如:  *{ f…

    2025年12月24日
    000
  • 简单的CSS选择器-常规选择器

    简单的css选择器-常规选择器 * css常规选择器有5个 * tag标签选择器: $(‘div’),根据标签名选择,返回集合 * id选择器:$(‘#top’), 根据元素id属性选择,返回单个 * class选择器:$(‘.active…

    好文分享 2025年12月24日
    000
  • 简单的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

发表回复

登录后才能评论
关注微信