CSS - 类型、类和ID选择器 - 个人笔记
类型选择器
类型选择器也叫元素选择器或标签名选择器,因为它在文档中选择了一个HTML标签/元素的缘故。在下面的示例中,我们已经用了span、em和strong选择器,<span>
、<em>
和<strong>
元素的所有实例这样就都被样式化了。
全局选择器
全局选择器,是由一个星号(*)代指的,它选中了文档中的所有内容(或者是父元素中的所有内容,比如,它紧随在其他元素以及邻代运算符之后的时候)。下面的示例中,我们已经用全局选择器,移去了所有元素上的外边距。这就是说,和浏览器以外边距隔开标题和段的方式默认加上的样式不同的是,每个物件都紧紧地挨在一起,我们不能那么容易就看清楚不同的段。
* {margin: 0;
}
<h1>Universal selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
这种行为有时能在“重置样式表”中看到,其中所有浏览器所做的样式化都会被忽略。这些一度很受欢迎,但是把所有的样式化忽略掉的话,通常就是指,你必须做把这些样式带回来的工作!因此我们应小心使用全局选择器,以处理诸如下面所述之类的很特殊的情况。
使用全局选择器,让选择器更易读
全局选择器的一种用法是让选择器更易读,更明显地表明它们的作用。例如,如果我想选中任何<article>
元素的第一子元素,不论它是什么元素,都给它加粗,我可以将:first-child
选择器(我们将会在伪类和伪元素课中进一步了解)用作<article>
元素选择器的一个后代选择器:
article :first-child {}
但是这会和article:first-child
混淆,而后者选择了作为其他元素的第一子元素的<article>
元素。
为了避免这种混淆,我们可以向:first-child
选择器加入全局选择器,这样选择器所做的事情很容易就能看懂。选择器正选中<article>
元素的任何第一子元素:
article *:first-child {}
类选择器
类选择器以一个句点(.)开头,会选择文档中应用了这个类的所有物件。在下面的实时示例中,我们已经建立了一个名为.highlight的类,把它应用到了我的文档中的几个地方。所有包含此类的元素都被高亮了。
.highlight {background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
指向特定元素的类
你能建立一个指向应用一个类的特定元素。在下一个示例里面,我们将会用不同方式高亮一个带有highlight
类的<span>
和带有 highlight
类的<h1>
标题。我们通过使用附加了类的欲选元素的选择器做到这点,其间没有空格。
span.highlight {background-color: yellow;
}h1.highlight {background-color: pink;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p class="highlight">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
这种方式使CSS没那么可复用,因为类现在只会应用到那个特定元素,在认为规则也该应用到其他元素的时候,你会需要另外加上一个选择器。
多个类被应用的时候指向一个元素
你能对一个元素应用多个类,然后分别指向它们,或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上,构建可以以不同方式组合起来的组件的时候,这会有用。
在下面的示例中,有一个包含了一条笔记的
为了告诉浏览器我们只想匹配带有所有这些类的元素,我们可以将这些类不加空格地连成一串。
.notebox {border: 4px solid #666;padding: .5em;
}.notebox.warning {border-color: orange;font-weight: bold;
}.notebox.danger {border-color: red;font-weight: bold;
}
<div class="notebox">This is an informational note.
</div><div class="notebox warning">This note shows a warning.
</div><div class="notebox danger">This note shows danger!
</div><div class="danger">This won't get styled — it also needs to have the notebox class
</div>
ID选择器
ID选择器开头为#
而非句点,不过基本上和类选择器是同种用法。可是在一篇文档中,一个ID只会用到一次。它能选中设定了id的元素,你能把ID放在类型选择器之前,只指向元素和ID都匹配的类。在下面的示例里,你可以看看这两种用法。
#one {background-color: yellow;
}h1#heading {color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillomelon azuki bean garlic.</p><p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collardgreens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
备注:正如我们在和特定性相关的课里面学到的那样,ID所指特定,会优先于大多数其他选择器。所以很难处理它们。大多数情况下,给一个元素加个类,而不是使用ID,会更好。不过要是ID是唯一一种指定这个元素的方式的话——也许是因为你没法访问标记标记因此不能编辑——这种方式可行。
CSS - 类型、类和ID选择器 - 个人笔记相关推荐
- html:(27):类和ID选择器的区别和子选择器
类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素 不同点: 1.ID ...
- [css] css中class和id选择器有什么区别?
[css] css中class和id选择器有什么区别? id 在部分浏览器的 js 中会直接生成同名变量: id 的唯一性,获取该 id 的 dom 时,会取同名 id 的前者: id 层叠权重非常高 ...
- 学习记录 --【零基础CSS学习】03.ID选择器和类选择器
目录 一.ID选择器 二.类选择器 一.ID选择器 1.id属性是标准属性,任何元素都可以有id属性. 2.使用id选择器时,要在id值前加上"#" 3.id选择器只能选中一个元素 ...
- css学习06:id选择器
id选择器可以为标有特定id的HTML元素指定特有的样式 HTML元素以id属性来设置id选择器,css中id选择器以"#"来定义 语法: #id名 { 属性1:属 ...
- html类选择器和id选择器,类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素 不同点: 1.ID选择器只能在文档中使用 ...
- 零基础CSS入门教程(8)–id选择器
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. id选择器 3. 使用id选择器 4. 整体网页解析 5. 小结 1. 前言 上一篇介绍了元素选择的使用,本篇来介绍一种新的选择器:id ...
- css伪类元素及选择器
文章目录 伪类选择器使用 nth-child伪类选择器运用 伪元素:before和:after使用 伪类选择器使用 :first-child 选择某个元素的第一个子元素(IE6不支持):last-ch ...
- 前端面试那些事【dt/dd、audio、onerror、标签、类、ID选择器、伪类选择器......
前端的那些基本标签
- [前端笔记——CSS] 10.层叠与继承+选择器
[前端笔记--CSS] 10.层叠与继承+选择器 1.层叠与继承 1.1 冲突规则 1.2 继承 1.3 层叠 1.4 CSS位置的影响 2.选择器 2.1 选择器是什么? 2.2 选择器列表 2.3 ...
最新文章
- CentOS6.5 下sciki-learn numpy scipy 的安装
- Linux监控命令之==free
- 搭建OpenStack-M版的Cinder所碰到过的状况
- react中js文件中写html,javascript – 使用静态HTML与React
- 0基础linux运维,Linux运维基础
- LeetCode-73. Set Matrix Zeroes
- 裸辞,迎接2019年的春天
- 注解IOC案例-把自己编写的类使用注解配置
- 汇编语言(二)之数值求和
- Java高级特性——反射
- 【Linux】linux服务器下包管理器
- Leetcode算法题(C语言)10--两数之和
- 分布式定时器的实现原理
- Python3 CookBook | 数据结构和算法(一)
- 解决双击盘符后默认用ACDsee打开
- matlab中的out模块,matlab-simulink中out模块怎么用?
- 32岁了学python来的及吗_你要悄悄的学Python,然后惊艳所有人,后来都学的怎么样呢?...
- matlab中scalar意思,scalar是什么意思_scalar的翻译_音标_读音_用法_例句_爱词霸在线词典...
- 漫画 | 有人向我反馈了一个bug…
- puppet三种认证注册方式详解及常见报错分析
热门文章
- android壁纸和手机屏幕之间要怎么对应,android手机壁纸
- PyTorch学习系列教程:构建一个深度学习模型需要哪几步?
- Oracle 定时执行计划任务
- 【Python】Dpark例子分析
- Linux网络代理服务器搭建及使用
- 华为rstp配置实例
- nginx【nginx跨域、nginx开启gizp压缩、nginx服务器部署项目】
- veket linux能运行qq么,【veket系统】Veket Linux系统下载 v8.07 官方正式版-开心电玩...
- 静态网页轻松加载动态数据,让HTML开发更轻松
- ORA-01547、ORA-01194、ORA-01110