CSS让前端飞Web前端之路

这30个CSS选择器,你必须熟记,百益无一害。

2019-11-01  本文已影响0人  前端小咖

CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般,几秒钟就能得到一个想要的效果,是不是很酷呢。

CSS为我们提供了选择器,这个酷酷的魔法工具,让我们随意能够操作网页元素的样式,CSS选择器众多,我们不可能一次性学完,但是这30个CSS选择器我们必须熟练记忆,可能有的同学觉得没必要学这么多,掌握了id、class、后代选择器就够了,这算完事了吗?如果是这样你就错过了很多灵活运用CSS的机会,虽然这些新属性很多都属于CSS3,但是我们掌握这些新属性后还是有很大的好处的。

从本篇文章起,我给大家归纳了常用的30个CSS选择器,希望通过我的总结,你能够喜欢上这些常用的选择器,废话不多说,我们这篇文章将介绍前10个。

在介绍之前,我们先理解下文档结构树的父子关系

在学习CSS选择器之前,我们需要弄清楚文档结构的父子关系,什么是父元素、子元素以及祖辈元素和后代元素这些概念,清楚了这些逻辑关系后,你才能更好的掌握CSS选择器。如下图所示,我们用树形结构来表示一个文档结构。

如上图所示,相邻的两个节点(层级是连续的),他们之间是父子关系。如果两个元素之间跨越两个层级以上,它们是祖辈和后代的关系。

1、*:通用选择器

针对初学者来说,我们还是从简单的开始学起,首先我们来认识下通用选择器,然后再逐步深入学习其它高级的选择器,加入我们想让文档中的每个元素都显示成红色,我们可以这么做:

* {color:red;}

通用选择器,可以匹配页面所有的元素。 许多开发者可能会用这个技巧如下代码所示让元素居中,在开发测试阶段固然是好的,但是我不建议这么做,因为这样做会给浏览器增加很大的负担。

* {

 margin: 0;

 padding: 0;

}

浏览器兼容性:

IE6+

Firefox

Chrome

Safari

Opera

2、#X:ID选择器

ID选择器的开头使用#号,但是你在使用的时候,需要谨慎。

问问自己:是否真的需要使用ID选择器来定义样式

id选择器比较局限,不能重用。因此需要慎重考虑。

#container {

 width: 960px;

 margin: auto;

}

浏览器兼容性:

IE6+

Firefox

Chrome

Safari

Opera

3、.X:类选择器

类选择器的开头用.(点)进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式,好比按组进行归类,同一类的样式统一定义。

.error {

color: red;

}

如果把两个类串在一起,选择的就是同时具有两个类名的元素,类名的顺序则无所谓,比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

浏览器兼容性:

IE6+

Firefox

Chrome

Safari

Opera

4、X Y:后代选择器

后代选择器,英文名称:descendant selector,本文的开头我们学习了什么是后代元素,比如我们要选择在li元素中包含a标签的链接(不是所有的链接),取消下划线的默认样式,我们可以这样代码实现:

li a {

text-decoration: none;

}

经验分享: 如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的,后代元素的层级问题,可能会很深。

浏览器兼容性:

IE6+

Firefox

Chrome

Safari

Opera

5、X:元素选择器

假如你想针对Html预定义的标签,比如类似:p,h3,em,a这些标签,我们可以快速为某类标签定义样式。如下段代码所示:

a { color: red; }

ul { margin-left: 0; }

浏览器兼容性:

IE6+

Firefox

Chrome

Safari

Opera

6、X:visited and X:link :链接伪类选择器

:link 伪类来定义所有还没有点击链接的样式,:visited 伪类定义我们曾经点击过或者访问过的链接样式,示例代码如下:

a:link { color: red; }

a:visted { color: purple; }

浏览器兼容性:

IE7+

Firefox

Chrome

Safari

Opera

7、 X + Y:紧邻同胞选择器

若想选择同一个父元素中,相邻的同级别的元素,我们可以使用紧邻同胞选择器(adjacent selector)。如若想把紧跟在h1元素的段落上外边距去掉,你可以这么写:

h1 + p { margin-top:0 }

浏览器兼容性:

IE7+

Firefox

Chrome

Safari

Opera

8、 X > Y:子元素选择器

有时候我们并想选择所有的后代元素,而是想缩小范围,只选择一个元素的子元素,比如我们只想选择 #container>ul 定义id为container的div里的ul元素,而不是曾经更深的后代元素比如li里的ul。

html文档结构:

<div id="container">

<ul>

<li> List Item

<ul>

<li> Child </li>

</ul>

</li>

<li> List Item </li>

<li> List Item </li>

<li> List Item </li>

</ul>

</div>

css代码如下:

div#container > ul {

border: 1px solid black;

}

文档选择树形结构:

代码效果:

浏览器兼容性:

IE7+

Firefox

Chrome

Safari

Opera

9、 X ~ Y:后续同胞选择器

后续同胞选择器使用 ~ 表示,选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像,但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子,我们选择所有ul后面的P元素。

html文档结构:

  <div id="container">

<ul>

<li> List Item

<ul>

<li> Child </li>

</ul>

</li>

<li> List Item </li>

<li> List Item </li>

<li> List Item </li>

</ul>

<p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>

<p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>

</div>

css代码如下:

ul ~ p {

 color: red;

}

文档选择树形结构:

代码效果:

浏览器兼容性:

IE7+ Firefox Chrome Safari Opera

10、 X[title]:简单属性选择器

如果想选择具有某个属性的元素,而不管属性的值是什么,我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配,没有title属性的标签不会受到影响。你可以这么写代码:

a[title] {

 color: green;

}

浏览器兼容性:

IE7+ Firefox Chrome Safari Opera

小节

今天的内容就和大家分享到这里,CSS选择器是CSS的基础和重要内容,虽然简单,但是灵活掌握可不容易,接下来的文章,我将和大家继续分享CSS选择器的剩余内容。

本次给大家推荐一个免费的学习圈,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。对web开发技术感兴趣的同学,欢迎加扣扣qun:895757445,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时提供免费直播课。

上一篇下一篇

猜你喜欢

热点阅读