谈谈CSS中的几种选择器

今天本文主要和大家谈谈CSS中的几种选择器 ,需要的朋友可以参考下,希望能帮助到大家。

1、通配符选择器

通配符选择器用“*”号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素

/*设置当前页面中所有标签的颜色为红色*/* {color: red;}

 2、标签选择器

标签选择器就是选择当前页面中相同名字的标签

/*设置所有p标签的文字颜色为红色*/p {color: red;}

 3、ID选择器

id选择器使用”#”进行标识,后面紧跟id名

{:;}

这是标题

 注意HTML标签中ID的属性值在一个页面中必须是唯一的(是W3C规范而不是硬性规则)。

ID选择器命名规范

只允许出现字母(大小写均可,严格区分) 、下划线、数字,也就是说,id=”Head”和 id=”head”不冲突

只允许以字母开头

命名没有长度限制,可以是1个字母,也可以是很多个,不过不建议太长

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

不允许出现标签名(不是硬性规定)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示 

{:;}

这是标题1

这是标题2

 一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;}.subHead {font-size: 50px;}

这是标题2

 5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special  /* 需要满足标签是h3同时拥有special类 */

p#one /* 需要满足标签是p同时id为one */

 5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;}

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

以上就是谈谈CSS中的几种选择器 的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 00:39:00
下一篇 2025年12月24日 00:39:17

相关推荐

  • 使用html和css实现康奈尔笔记

    这次给大家带来使用html和css实现康奈尔笔记,使用html和css实现康奈尔笔记的注意事项有哪些,下面就是实战案例,一起来看一下。 缘起 人家都说 康奈尔笔记 法,很好用呢,能抵抗遗忘曲线,让你的笔记事半功倍,有兴趣的同学自行百度哈。 网上有很多现成的模板,下载下来之后吧,看着好像在上面写英文可…

    好文分享 2025年12月24日
    000
  • CSS的子代选择符

    这次给大家带来CSS的子代选择符,使用CSS的子代选择符的注意事项有哪些,下面就是实战案例,一起来看一下。 后代选择符用于选取一个标签的所有后代,包括子代和孙辈等;而子代选择符只选取指定父辈的子代标签(指定标签元素的第一代子元素)。 子代选择符使用一个额外的符号(尖括号> )表明两个元素之间的…

    2025年12月24日 好文分享
    000
  • 纯css实现树形结构

    这次给大家带来纯css实现树形结构,纯css实现树形结构的注意事项有哪些,下面就是实战案例,一起来看一下。 本文我给大家介绍如何使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构。树状结构我们在很多项目中要应用,如公司组织架构图、无限级分类等等。 纯css实现属性结构 css实现属性结…

    2025年12月24日
    000
  • CSS实现手风琴布局

    这次给大家带来CSS实现手风琴布局,CSS实现手风琴布局的注意事项有哪些,下面就是实战案例,一起来看一下。 昨天在做一个旅游页面的项目,前端页面实现的过程中遇到这样一个需求。需要把一组图片形成手风琴的展示效果。认真的思考一遍后,决定就用普通的HTML+CSS就可以实现这个需求。今天趁着空闲时间稍微梳…

    2025年12月24日
    000
  • CSS3中的transform功能详解

    这次给大家带来CSS3中的transform功能详解,CSS3中transform功能的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS3中的变形功能:在CSS3中可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动着四种类型的变形功能。 1、如何使用transform功能…

    2025年12月24日 好文分享
    000
  • CSS怪异盒模型和标准盒模型如何使用

    这次给大家带来CSS怪异盒模型和标准盒模型如何使用,使用CSS怪异盒模型和标准盒模型的注意事项有哪些,下面就是实战案例,一起来看一下。 在html文档中,每个渲染在页面中的标签都是一个个盒子模型。 盒子模型又分为 : W3C标准的盒子模型 和 IE标准的盒子模型。 由于目前大部分主流的浏览器支持的是…

    2025年12月24日 好文分享
    000
  • 三种CSS截图的方法

    本文主要为大家分享三种CSS截图的方法 ,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧,希望能帮助到大家。 CSS截图图片的几种方式 原图: DIV   使用background-position:Xpx Ypx (图片左上角坐标) 配合width和height .p_bg { w…

    2025年12月24日 好文分享
    000
  • css实现图片未加载完成时占位显示实例分享

    通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片; 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:relative;after设置position:absolute;img标签的src为网络图片,这样加…

    2025年12月24日
    000
  • 用CSS实现Tab页切换效果的示例代码_CSS教程_CSS_网页制作

    最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯css的选择器来实现切换效果。搜了一下大致有下面三种写法。 1、利用 :hover 选择器 缺点:只有鼠标在元素上面的时候才有效果,无法实现选中和默认显示某一个的效果 2、利用 a标签的锚点 + :target选择器 缺点…

    2025年12月24日
    000
  • css之分页打印

    这次给大家带来css之分页打印,css之分页打印的注意事项有哪些,下面就是实战案例,一起来看一下。 很久没写文章了,最近做了一个员工入职的项目,该系统有一个批量打印个人信息的功能需求。因为之前也没接触过打印这方面的功能,就上网查了下,发现jquery有个打印功能的 API(PrintArea) ,关…

    2025年12月24日
    000
  • 清除css浮动的方法

    这次给大家带来清除css浮动的方法,清除css浮动的注意事项有哪些,下面就是实战案例,一起来看一下。 一,我们为什么要浮动 为什么浮动,为什么要清除浮动,以及清除浮动的方法。在网页布局的时候有时需要元素并排显示,如果不选择浮动,那么那些块状元素就会一行一行显示,占用空间不说,用户体验也是极为不好的。…

    2025年12月24日 好文分享
    000
  • 使用CSS做出3D翻页效果

    这次给大家带来使用CSS做出3D翻页效果,使用CSS做出3D翻页效果的注意事项有哪些,下面就是实战案例,一起来看一下。 今天开始~小编将与大家分享一系列的web前端特效荟萃,喜欢把玩儿炫酷效果的小伙伴快快看过来^_^ ,希望大家喜欢呦~ 第一期,给大家分享一个使用纯CSS实现书籍3D翻页效果, 相关…

    2025年12月24日
    000
  • css3如何做出小于一像素的细线

    这次给大家带来css3如何做出小于一像素的细线,css3做出小于一像素的细线的注意事项有哪些,下面就是实战案例,一起来看一下。 Webapp中的CSS3实现 0.5px的细线 感觉很长时间没写过博客了,最近生活还算稳定,过得较为充实,所以又要开始写写东西了,一个是为了做些记录,是怕自己某一天,忘记了…

    2025年12月24日 好文分享
    000
  • css判断子元素个数

    这次给大家带来css判断子元素个数,css判断子元素个数的注意事项有哪些,下面就是实战案例,一起来看一下。 工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点。这也正好加深了我对css选择器的理解和运用。demo如下:…

    2025年12月24日 好文分享
    000
  • CSS的定位属性详解

    这次给大家带来CSS的定位属性详解,使用CSS定位属性的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS的定位属性有三种,分别是绝对定位、相对定位、固定定位。 position: absolute; position: relative; position: fixed; 下面逐一介绍。 相…

    2025年12月24日 好文分享
    000
  • CSS实现波浪移动

    这次给大家带来CSS实现波浪移动,CSS实现波浪移动的注意事项有哪些,下面就是实战案例,一起来看一下。 在某些页面上常常看到波浪的效果,虽然只有装饰的作用,但是却让页面看上去更生动了,同时某些情况下也能起到进度条的作用,而波浪的形式却比普通进度条更美观有趣。 如果想要实现波浪的效果,作者想到的第一个…

    2025年12月24日
    000
  • 你必须要知道的CSS三大特性

    这次给大家带来你必须要知道的css三大特性,使用css三大特性的注意事项有哪些,下面就是实战案例,一起来看一下。 CSS三大特性 : 继承,层叠,优先级 一. 继承性 1.什么是继承性? 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 立即学习“前端免费学习笔记(深入)”…

    好文分享 2025年12月24日
    000
  • CSS的显示模式如何使用

    这次给大家带来css的显示模式如何使用,使用css的显示模式的注意事项有哪些,下面就是实战案例,一起来看一下。 一. 标签补充  div 和s pan 1.什么是div? 作用: 一般用于配合css完成网页的基本布局 2.什么是span? 作用: 一般用于配合css修改网页中的一些局部信息 3.di…

    好文分享 2025年12月24日
    000
  • CSS的背景与精灵图

    这次给大家带来css的背景与精灵图,使用css的背景与精灵图的注意事项有哪些,下面就是实战案例,一起来看一下。 1.如何设置标签的背景颜色? 在CSS中有一个background-color:属性, 就是专门用来设置标签的背景颜色的 取值: 具体单词  rgb rgba 十六进制 立即学习“前端免费…

    好文分享 2025年12月24日
    000
  • HTML与CSS的盒子模型

    这次给大家带来html与css的盒子模型,使用html与css的盒子模型的注意事项有哪些,下面就是实战案例,一起来看一下。 一.边框 (上) 1.什么边框? 边框就是环绕在标签宽度和高度周围的线条 2.边框属性的格式 立即学习“前端免费学习笔记(深入)”; 2.1连写(同时设置四条边的边框)bord…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信