CSS基础扫盲-CSS选择器
为什么会有CSS选择器
一个HTML文件由很多HTML标签构成,我们有很多CSS规则或者描述文件让这些HTML长得异常炫酷。但是问题是我们如何找到这些HTML标签?又如何让一个CSS对一组标签起作用,又如何让某个标签在这些统一的CSS中长得又别样一些?如何让这些CSS规则又只对某个标签的子标签起作用?这就涉及到CSS选择器,也就是让CSS找到匹配的标签(可能是一个,也可能是多个)。
常见CSS选择器
鉴于上面的场景诞生了很多种CSS选择器。下面我们介绍下常见的CSS选择器,为了方面下文描述类选择器,下面预先给一段HTML片段,所有的CSS都是基于该HTML(建议大家可以对着下面的代码在浏览器里实践一遍加深印象)。
<div class="hello" id="hello-p">
<p class="hello" id="hello-s">
Hello<strong>strong</strong>
</p>
<p class="world" id="world">
world!
</p>
<p class="hello" id="hello-coder">
Hello coder!
</p>
<strong>strong2</strong>
</div>
-
标签选择器
标签选择器就是匹配某一类标签的选择器。直接用标签名字后面接CSS描述内容,如下:
div { background-color: red; }
这就表示整个html文档中所有div标签的背景色都为红色。如果有多个同样的标签选择器,那么顺序靠后的生效。如下:
div { background-color: red; } div { background-color: green; }
最终效果是div的背景色为绿色。
-
类选择器
类选择器是会匹配具有同样类名的一组标签的选择器。用“.”+类名 来描述类选择器,如下:
.hello { background-color: red; }
这样就会让div以及div下面的第一个和第三个p标签的背景色都为红色。也就是类选择器可以做到选择一组不同类型的标签。突破了标签选择器只能选择同一类标签的限制。典型场景:多个标签都有外观,比如背景色,大小,圆角等。
-
id选择器
id选择器就是精准匹配某一个元素的选择器。如其名所说,id通常具有唯一性,也就是定位某个单一元素;如果细心的同学就能够发现前面两个选择器都是组选择器(也就是能够选择到多个标签)。用“#”+id 名描述id选择器,如下:
#hello-p { background-color: red; }
id为hello-p的p标签背景色会变为红色。注意优先级id选择器>类选择器>标签选择器。
-
后代选择器
后代选择器选择器表示匹配指定标签后代的选择器。通常后台选择器由两部分构成:父选择器 + 空格 + 子类选择器。比如我们想让div标签的第二个p标签背景色变为红色,可以如下写
.hello .world { background-color: red; }
注意两个选择器之间有空格。表示在所有类为hello的标签的子标签中,将类名为world的标签背景色置为红色。注意如果是想多个选择器共用一个CSS描述规则,选择器之间用逗号隔开。如下将id为hello-s和world背景色均置为红色:
#hello-s,#world { background-color: darkred; }
-
子类选择器
子类选择器是匹配标签的直接子标签,不影响其子标签的后代的选择器。也就是只影响第一代。父选择器 + “>” + 子类选择器,如下我们想将div标签的直接strong标签背景色置为红色:
div > strong { background-color: red; }
可以看到div的直接strong子标签的背景色改变变为了红色,而id为hello-s的标签p标签里的strong标签则没有任何变化。注意在表达子类时候也可以用选择器嵌套。
-
相邻兄弟选择器
相邻兄弟选择器会匹配标签的兄弟标签(前提是这两个兄弟标签具有共同父标签)。通常是选择器 + “+” + 标签。如下将id为hello-s的p标签紧接着p标签背景色变为红色:
#hello-s + p { background-color: red; }
基本上能看到的复杂CSS选择器都是上面的几种组合,万变不离其宗。
网友评论