不得不掌握的css选择器

网友投稿 619 2022-05-30

前言

什么是 css 选择器呢?首先,css 是 Cascading Style Sheet(层叠样式表)的简称,CSS 技术用来美化 html 页面,来达到所预期的效果。而 css 选择器则可以帮助我们选中需要添加样式的特定标签。

选择器分类

在这里将选择器分为两大类:基本选择器和高级选择器

一、 基本选择器

二、高级选择器

选择器用法

由于选择器过多,这里只简单介绍几种常用的选择器

通配符选择器

通配符选择器经常用于样式的初始化,比如笔者经常用到的

上述样式表示去除掉所有元素默认的 margin、padding 值,优点是简单粗暴一次性完成所有元素的样式重置,缺点是不能精准控制

2. 标签选择器

选择我们所需要的标签并设置样式,这里会选择所有该标签元素并改变样式

效果:

3. 类选择器

给标签取 class 名,以点(.)加 class 名开头,选择所有该 class 名的元素

效果:

4. id 选择器

你不得不掌握的css选择器

给标签取 id 名,以#加 id 名开头,具有唯一性,选择”id = ‘wrap’”的元素

效果:

5. 子选择器

以>隔开父子级元素

效果:

6. 后代选择器

以空格隔开包含关系的元素

效果:

7. 兄弟选择器

以~隔开兄弟关系的元素,所有兄弟元素

效果:

8. 相邻选择器

以+隔开相邻关系的元素,只有一个

效果:

9. 属性选择器

[type=text]修饰属性为type=text的元素

效果:

总结

熟练掌握 css 选择器的运用,将会为我们对页面的控制做到手到擒来,减少弯路。

云搜索服务 CSS

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:《scikit-learn机器学习常用算法原理及编程实战》—2.5 Matplotlib简介
下一篇:Nodejs on Docker
相关文章