CSS选择器

• ， 2 2月 2021
• 作者 847954981@qq.com
• 前端学习, 我的编程之路

CSS选择器

在之前的文章中，我们知道对于繁杂的网页内容，我们可以通过引用内部样式来完成集体修改。

如

p {
　font-size:20px
}

这其实涉及到了 “标签选择器” 的概念即统一选择 标签 进行样式引入。

除了选择标签，我们还可以使用其他选择器

|类选择器|

当我们在标签内部用 “class” 属性来定义，那么这个标签就会归为这一 “class” 类。

如：

<p class="类名">小虫</p>

当然，一个标签可以属于多个类，不同类之间用空格隔开，且层叠性（优先级）是依据CSS中类的前后而不是标签的类定义前后。

此时我们在内(外)部样式处写上 |”.”+类名| 即可选择类 　如：

.fireinsect {
　　　　　　　font-size:20px
　　　　　}

同理，以此方法使用 “id” 属性来选择叫 id选择器

不过 “id选择器” 需要添加的是 “#” 而不是 “.” 　　如：

#fireinsect {
　　　　　　　font-size:20px
　　　　　}

高级选择器

在网页制作中，我们常常会遇到各种标签的嵌套的嵌套，此时我们不免就会需要特点标签内引入样式，因而我们就需要高级选择器。

后代选择器：

标签内嵌套标签时使用，如：

<li><p>测试</p></li>

时我们可以在CSS中以 |”父级”+空格+”子级”| 方式来选择　如：

li p {
font-size:20px
}

交集选择器：

当我们需要选取某一标签内，类名为xxx的标签，即可使用 交集选择器

方法：|”标签名”+”.”+”类名”|

p.fireinsect{
font-size:20px
}

子选择器：

|”父标签”+”>”+”子标签”|

li>p {
　　font-size:20px
}

子选择器与后代选择器相似，却在选取范围有所不同，子选择器重在”子”即前后标签必须是明确的父子关系，而后代选择器则重在后代，即前后标签只要是前后关系即可，例子如下：

<p><span>Span 1. 在p标签内　<span>Span 2. 在p标签的span标签内</span>
</span> </p> 
<span>Span 3. 与p标签相邻</span>

并集选择器：

如果给不同标签，或者不同类名的标签引入同一样式，可以使用并集选择器

即不同标签之间用　＂,＂隔开 　　　如：

.box,p,h3,.phone{}

选择器的优先级：Id选择器 > 类选择器 > 标签选择器

而高级选择器的优先级取决于权重，即假设：标签选择器权重为1，类选择器权重为10，Id选择器权重为100，高级选择器权重为其囊括的权重相加(两个高级选择器优先级对比的前提是选择有交集)