css选择器

1. 通用选择器

通用选择器用星号*表示,它不匹配某个特定的 HTML 元素,而是匹配 HTML 文档中的每个元素。在开发中,我们通常使用通用选择器来清除 HTML 元素中默认的内外边距,如下所示

  1. * {
  2. margin: 0 auto;
  3. padding: 0;
  4. }

注意:虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素,但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点,频繁的使用会给浏览器带来太多不必要的压力。

2. 标签选择器

一个完整的 HTML 文档由各式各样的标签组成,而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签,如下所示:

  1. p {
  2. color: blue;
  3. }

p选择器能够匹配文档中所有的<p>标签。

3. ID 选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签,ID 选择器的定义需要用到井号#,后面紧跟 ID 属性的值,如下所示:

  1. #nav {
  2. color: red;
  3. }

#nav选择器能够匹配文档中具有id="nav"属性的标签。

4. 类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签,所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.,后面紧跟 class 属性的值,如下所示:

  1. .black {
  2. color: black;
  3. }

.black选择器能够匹配文档中所有具有class="black"属性的标签。

由于 class 属性不是唯一的,可以应用于不同的标签,因此您还可以在定义类选择器时指定具体的标签,如下所示:

  1. p.black {
  2. color: black;
  3. }

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的<p>标签中,对于其它的具有class="black"属性的标签则没有影响。

另外,一个 HTML 标签中 class 属性可能不止一个,例如:

  1. <p class="info selected"></p>
  2. <p class="info"></p>

假如我们要为所有 class 属性包含 info 的元素设置粗体,为所有 class 属性包含 selected 的元素设置红色字体,为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景,则可以写成下面这样:

  1. .info {
  2. font-weight:bold;
  3. }
  4. .selected {
  5. color: red;
  6. }
  7. .info.selected {
  8. background: blue;
  9. }

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”,而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意:多类选择器中,多个 class 属性之间是紧挨着的(例如 .info.selected),不需要使用空格分开。

5. 后代选择器

当一个<p>标签嵌套在一个<div>标签内部的时候,就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时,就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列,中间使用空格分开,如下所示:

  1. ul li a {
  2. text-decoration: none;
  3. }

ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签。

6. 子选择器

子选择器与后代选择器类似,不过子选择器只会匹配某个元素的直接后代(元素与其子元素之间只有一层嵌套关系),子选择器由两个或多个选择器组成,选择器之间用大于号>分隔开,如下所示:

  1. p > sprong {
  2. color:red;
  3. }

p > strong选择器会将下面代码中第一个<p>标签的子标签<strong>内的文字设置为红色,但对第二个<p>标签中的<strong>标签则没有影响。

  1. <p>欢迎访问<strong>编程帮</strong>!</p>
  2. <p><em><strong>编程帮(biancheng.net)</strong></em>,一个在线学习编程的网站,专注于分享优质编程教程。</p>

7. 相邻兄弟选择器

相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+,加号两边为相邻的两个元素,选择器会匹配加号后面的元素,如下所示:

  1. h1 + p {
  2. color: blue;
  3. font-size: 18px;
  4. }
  5. ul.task + p {
  6. color: #f0f;
  7. text-indent: 30px;
  8. }

h1 + p选择器会匹配同一父级元素下紧邻<h1>标签并在其后的<p>标签。ul.task + p选择器则会匹配同一父级元素下紧邻<ul>标签并在其后的<p>标签,但<ul>要具有class="task"属性。

8. 通用兄弟选择器

通用兄弟选择器与相邻兄弟选择器非常相似,但却没有那么严格。通用兄弟选择器同样会匹配同一父级元素下的兄弟元素,但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面的元素,如下所示:

  1. h1 ∼ p {
  2. color: blue;
  3. font-size: 18px;
  4. }

h1 ∼ p选择器会匹配同一父级元素下<h1>标签之后的所用<p>标签。

9. 分组选择器

分组选择器可以将同样的样式规则应用到多个选择器中,每个选择器之间使用逗号,进行分隔,这么做可以避免定义重复的样式规则,最大程度地减少 CSS 样式表中的代码。例如,在 CSS 样式表中,不同的选择器中可能包含同样的样式规则,如下所示:

  1. h1 {
  2. font-size: 36px;
  3. font-weight: normal;
  4. }
  5. h2 {
  6. font-size: 28px;
  7. font-weight: normal;
  8. }
  9. h3 {
  10. font-size: 22px;
  11. font-weight: normal;
  12. }

我们可以看到选择器h1h2h3中包含相同的样式font-weight: normal;,这时就可以先使用分组选择器为h1h2h3定义它们之间同样的样式规则,然后再分别定义它们之间不同的样式规则,如下所示:

  1. h1, h2, h3 {
  2. font-weight: normal;
  3. }
  4. h1 {
  5. font-size: 36px;
  6. }
  7. h2 {
  8. font-size: 28px;
  9. }
  10. h3 {
  11. font-size: 22px;
  12. }

10. 属性选择器

属性选择器用来匹配具有特定属性的元素。属性选择器的定义方式与标签选择器相似,只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息,如下所示:

  1. input[type="text"] {
  2. color: blue;
  3. }

input[type="text"]选择器会匹配所有具有type="text"属性的<input>标签。

属性选择器中方括号[ ]内的属性信息还支持以下几种写法:

  • [target]:选择所有带有target属性元素;
  • [target=_blank]:选择所有具有target="_blank" 属性的元素;
  • [title~=flower]:选择title属性包含单词“flower”的所有元素;
  • [lang|=en]:选择lang属性正好是“en”或以“en”为开头的所有元素。

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

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340