广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何使用Div和CSS编写中的包含选择器和通配选择器
  • 633
分享到

如何使用Div和CSS编写中的包含选择器和通配选择器

2024-04-02 19:04:59 633人浏览 独家记忆
摘要

这篇文章将为大家详细讲解有关如何使用Div和CSS编写中的包含选择器和通配选择器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。包含选择器包含选择器也叫派生选

这篇文章将为大家详细讲解有关如何使用Div和CSS编写中的包含选择器和通配选择器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

包含选择器
包含选择器也叫派生选择器,顾名思义,是一种具有包含关系的选择。
多个选择器以空格分开,组合成包含关系,且右边的选择器从属于左边(即右边的选择器只能在左边的选择器范围内选择)。
一个包含选择器的应用示例:

CSS Code复制内容到剪贴板

  1. #nav a{   

  2.     text-decoration: none;   

  3. }  

这个例子表示对“id="nav"”的元素里面的超链接<a>应用该样式(超链接取消下划线),而其他网页元素的超链接不受影响。
包含选择器是常用的选择器之一,它让我们能对一些元素做精确的个性化设定。
选择器组合
上面讲到的包含选择器,实际可以看着是一种选择器的组合。显然,利用选择器的组合,可以更加精确的将样式应用到网页元素,以实现丰富多彩的个性化显示。
除了这种包含组合之外,我们还可以有如下一些常见的组合:
类型限定类:如div.class ul li{ }
双重组合类:如div.class ul.catlist { }
伪类:如#nav h3 a:hover
以上这些例子只是为了说明选择器的组合,在实际应用中可能会有一定差异。善用选择器组合,可以使我们的CSS文档更有条理更简洁。
选择器分组
选择器分组表示将有多个有相同样式定义的选择器以逗号进行分组。
例子:

CSS Code复制内容到剪贴板

  1. h2,h3,h4,h5,h6,h7,div{   

  2.     font-size :14px;   

  3. }  

上面就表示将标题h2至h7及div标签内的字体统一设定为14像素。
注意选择器分组和包含选择器的区别。

通配选择器
和很多语言一样,“*”这个符号在CSS里代表所有,即通配选择器。
例子:

CSS Code复制内容到剪贴板

  1. *{ font-size: 12px; }  

这个例子表示将网页中所有元素的字体定义为12像素,当然这是举个例子,一般不会做这么极端的定义。
在实际应用中,更多的可能如下:

CSS Code复制内容到剪贴板

  1. *{   

  2.     margin: 0;   

  3.     padding: 0;   

  4. }  

这个定义的含义是将所有元素的外边距和内边距定义为0,而在具体需要设定内外边距的时候,再具体定义。从这个例子可以看出,通配选择器的作用更多是用于对元素的一种统一预设定。
通配选择器也可以用于选择器组合中:

CSS Code复制内容到剪贴板

  1. div *{ color: #FF0000; }  

该例子表示在<div>标签内的所有字体颜色为红色。
一种例外的情况

CSS Code复制内容到剪贴板

  1. body *{ font-size:120%; }  

这时候它表示相乘,当然body也可以换成别的选择器标签。由于这种效果取决的因素较多,一般不常使用。

关于如何使用Div和CSS编写中的包含选择器和通配选择器就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

--结束END--

本文标题: 如何使用Div和CSS编写中的包含选择器和通配选择器

本文链接: https://www.lsjlt.com/news/81434.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用Div和CSS编写中的包含选择器和通配选择器
    这篇文章将为大家详细讲解有关如何使用Div和CSS编写中的包含选择器和通配选择器,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。包含选择器包含选择器也叫派生选...
    99+
    2022-10-19
  • css如何使用包含选择器
    这篇文章主要介绍了css如何使用包含选择器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。包含选择器包含选择器,两个标签之间使用空格,给指定父...
    99+
    2022-10-19
  • CSS通配符选择器如何使用
    本篇内容介绍了“CSS通配符选择器如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! CSS2 引入...
    99+
    2022-10-19
  • css中串联选择器和后代选择器如何使用
    今天就跟大家聊聊有关css中串联选择器和后代选择器如何使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。 串联选择器:...
    99+
    2022-10-19
  • 如何正确使用CSS选择器通配符
    如何避免滥用CSS选择器通配符CSS(Cascading Style Sheets)是一种用于网页设计和样式设置的语言。CSS选择器通配符是一种特殊的选择器,可以匹配指定元素及其子元素的所有属性。在使用CSS选择器时,滥用通配符可能会导致选...
    99+
    2023-12-26
    避免 CSS选择器通配符 滥用
  • 如何理解CSS中的类型选择器和ID选择器以及class选择器
    这期内容当中小编将会给大家带来有关如何理解CSS中的类型选择器和ID选择器以及类选择器,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。类型选择器类型选择器,是以html元素...
    99+
    2022-10-19
  • 学习CSS选择器通配符的基础知识和用法
    了解CSS选择器通配符的基础知识及使用方法在CSS中,选择器是用来选择HTML文档中的元素并对其应用样式的工具。其中,CSS选择器通配符是一种强大的选择器,可以用来匹配符合特定条件的元素。本文将介绍通配符的基础知识以及使用方法,并提供具体的...
    99+
    2023-12-26
    基础知识 CSS选择器 通配符
  • CSS中的层级选择器如何使用
    这篇文章主要介绍“CSS中的层级选择器如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中的层级选择器如何使用”文章能帮助大家解决问题。层级选择器CSS层...
    99+
    2022-10-19
  • Dreamweaver中css选择器中的类如何使用
    这篇文章主要介绍Dreamweaver中css选择器中的类如何使用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Dreamweaver中的css选择器是定义css规则首选需要选择的,css选择器主要有:类\id\标签...
    99+
    2023-06-08
  • jquery和css3中的选择器nth-child如何使用
    这篇文章主要介绍“jquery和css3中的选择器nth-child如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery和css3中的选择器nth-child如何使用”文章能帮助大家解...
    99+
    2023-07-05
  • css中如何使用形似猫头鹰的选择器
    小编给大家分享一下css中如何使用形似猫头鹰的选择器,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!使用 “形似猫头鹰” 的选择器这个名字可能比较陌生,不过通用选择器 (*) 和 相邻兄弟选择器 (+) 一起使用,效果非凡:...
    99+
    2023-06-27
  • 如何使用:last-of-type伪类选择器选择同类型元素中的最后一个的CSS样式
    如何使用:last-of-type伪类选择器选择同类型元素中的最后一个的CSS样式CSS是一种用于描述网页样式的标记语言,通过CSS样式表,我们可以为HTML文档中的元素添加各种不同的样式。其中,选择器是CSS样式表中最重要的一部分,它用于...
    99+
    2023-11-20
    - last-of-type - 伪类选择器 - CSS样式
  • 如何在Java编程中优化数据类型和容器的选择?
    在Java编程中,选择正确的数据类型和容器是优化程序性能的重要一步。本文将介绍如何在Java编程中优化数据类型和容器的选择,并附有演示代码。 选择正确的数据类型 在Java中,每种数据类型都有不同的存储空间和范围,选择正确的数据类型可以...
    99+
    2023-06-19
    数据类型 容器 编程算法
  • 好用的阿里云服务器推荐如何选择和使用
    阿里云是全球领先的云计算服务提供商,提供多种类型的服务器,包括弹性计算、数据库服务、存储服务等。本文将介绍如何选择和使用好用的阿里云服务器。 一、阿里云服务器的种类阿里云服务器主要包括弹性计算型服务器、数据库服务器、存储服务器等。弹性计算型...
    99+
    2023-11-19
    阿里 好用 如何选择
  • 如何在 Go 中选择最适合编程算法的数据类型和容器?
    在 Go 编程中,正确选择适合的数据类型和容器是至关重要的。这有助于提高程序的性能和可读性,并且能够确保程序在处理数据时不会出现错误。本文将介绍如何选择最适合编程算法的数据类型和容器,并提供一些示例代码来演示如何在 Go 中实现这些算法。 ...
    99+
    2023-07-02
    数据类型 编程算法 容器
  • JAVA如何通过使用数组遍历和if条件实现选择数据中的最大值
    这篇文章给大家分享的是有关JAVA如何通过使用数组遍历和if条件实现选择数据中的最大值的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。前言:通过使用数组遍历和if条件实现选择数据中的最大值。public ...
    99+
    2023-06-02
  • 如何使用:first-line伪元素选择器改变段落中每行的第一行文字的CSS样式
    如何使用:first-line伪元素选择器改变段落中每行的第一行文字的CSS样式,需要具体代码示例CSS伪元素是CSS中常用的一种选择器,用于指定一个元素的特定部分或状态。其中,:first-line伪元素选择器用于选择元素中第一行的文字,...
    99+
    2023-11-20
    CSS样式 伪元素选择器 first-line
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作