什么是css选择器

每一条css样式定义由两部分组成,形式如“选择器{样式}”;在“{}”之前的部分就是“选择器”。 “选择器”指明了“{}”中“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

什么是css选择器

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。

每一条css样式定义由两部分组成,形式如下:选择器{样式} ,在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

接下来我们就来看一个图,是对上述定义具体的分析。

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

什么是css选择器

如图,我们可以知道:

在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素

选择器通常是您需要改变样式的 HTML 元素,如:

,

,

等等

每一条格式声明语句由“属性名:属性值”对组成,属性名和属性值间以冒号隔开,每条声明语句以英文状态下的分号“;”结束。

介绍完css选择器是什么后,我们下面就来看看css选择器有哪些类型?

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选择器的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 06:19:08
下一篇 2025年12月24日 06:19:23

相关推荐

  • 关于css选择器的介绍

    标签选择器 例如: `p`、`a`、`h[1,6]`、`span`、`div`、、、 类选择器(class) class 选择器以 “.” 来定义。  如: 立即学习“前端免费学习笔记(深入)”; .id1{样式属性:值;} 命名尽量别用下划线,会出现兼容问题,下划线一般用于…

    2025年12月24日
    000
  • css权重是什么?css权重的介绍

    本篇文章给大家带来的内容是关于css权重是什么?css权重的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、什么是css权重?css6大基础选择器 css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然…

    2025年12月24日
    000
  • css选择器有哪些

    在css中,css的选择器有很多种,其中就包括标签选择器、id选择器、类选择器、继承选择器、伪类选择器、全局选择器等八种选择器。 本文操作环境:Windows7系统、css3版,Dell G3电脑。 css有哪些选择器?css选择器有几种?怎么使用css选择器?要想实现对html实现一对一的控制,就…

    2025年12月24日
    000
  • 什么是CSS选择器?css选择器有哪些类型

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

    2025年12月24日
    000
  • 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

发表回复

登录后才能评论
关注微信