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

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2899459.html

(0)
上一篇 2025年3月10日 23:46:24
下一篇 2025年3月7日 01:47:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

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

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

    编程技术 2025年3月10日
    200
  • CSS的子代选择符

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

    2025年3月10日 编程技术
    200
  • 纯css实现树形结构

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

    2025年3月10日
    200
  • CSS实现手风琴布局

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

    2025年3月10日
    200
  • CSS3中的transform功能详解

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

    2025年3月10日 编程技术
    200
  • CSS怪异盒模型和标准盒模型如何使用

    这次给大家带来CSS怪异盒模型和标准盒模型如何使用,使用CSS怪异盒模型和标准盒模型的盒模型有哪些,下面就是实战案例,一起来看一下。 在盒模型中,每个渲染在页面中的标签都是一个个盒模型。 盒子模型又分为 : W3C标准的盒子模型 和 IE标…

    2025年3月10日 编程技术
    200
  • css3的动画序列animation

    这次给大家带来css3的动画序列animation,使用css3动画序列animation的注意事项有哪些,下面就是实战案例,一起来看一下。 首先复习一下animation动画添加各种参数 (1)infinite参数,表示动画将无限循环。在…

    2025年3月10日 编程技术
    200
  • 用css隐藏input的光标

    这次给大家带来用css隐藏input的光标,用css隐藏input的光标的有哪些,下面就是实战案例,一起来看一下。 前言 最近公司的ui突然跑过来问我一个问题:“如何在不影响操作的情况下,把input的光标隐藏了?”。 我相信很多人会跟我一…

    2025年3月10日
    200
  • css实现缩略图悬停界面

    这次给大家带来css实现缩略图悬停界面,css实现缩略图悬停界面的注意事项有哪些,下面就是实战案例,一起来看一下。 前言 前端本身很杂,想必在学前端的大家都懂,前端技能的各种学习心得,各种教程,只要你有一颗学习的心都可以搞定,关键在于你有没…

    2025年3月10日
    200
  • CSS用图换字多种方法

    这次给大家带来CSS用图换字多种方法,CSS用图换字的注意事项有哪些,下面就是实战案例,一起来看一下。 前面的话 CSS以图换字的技术,很久都没人提起了。它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡。…

    编程技术 2025年3月10日
    200

发表回复

登录后才能评论