HTML&CSS————CSS常用选择器及优先级

选择器优先级

内联样式(1000)> id选择器(100)> 类和伪类选择器(10) > 元素选择器(1)>通配 * 选择器(0)> 继承的样式

一、元素选择器

作用:通过元素选择器可以选择页面中的所有指定元素。

标签名{
    ...
}

二、id选择器

作用:通过元素的id属性选中唯一的一个元素。id属性在一个页面中是唯一的。

<p id="p_1">床前明月光</p>
<p id="p_2">疑是地上霜</p>
#id属性值{
     ... 
}

 三、类选择器(class选择器)

作用:通过元素的class属性,选择一组元素。class属性在页面中不唯一,且一个元素可以有多个class(空格隔开多个class)。

<p class="p1 class1 class2">锄禾日当午</p>
<p class="p1 class1">汗滴禾下土</p>
.class属性值{
    ...
}

四、并集选择器(选择器分组)

作用:通过并集选择器可以同时选中多个选择器对应的元素。

选择器1, 选择器2, 选择器3{
    ...
}

比如现在有三个选择器,id选择器:p_1{ ... } ,class选择器:.p2{ ... },元素选择器:h1{ ... },那么选择器分组语法如下:

#p_1, .p2, h1{
    ...
}

五、交集选择器(复合选择器)

作用:选择同时满足多个选择器的元素。

选择器1选择器2选择器3 {
    ...
}

和并集选择器区分,并集选择器可以理解为“只要满足其中一种即可”是一种“”的关系;而交集选择器是“必须满足所有选择器才可以”是一种“”的关系。注意在书写上,并集选择器多个选择器之间用逗号隔开交集选择器之间紧密相连没有任何分隔符。另外,因为id选择器已经可以唯一确定一个元素,因此,id选择器不建议使用复合选择器

六、通配选择器

作用:可以选择页面中的所有元素。

* {
    ...
}

七、后代元素选择器

作用:选中指定元素的指定后代元素。

祖先元素 后代元素 {
    ...
}

八、子元素选择器

作用:选中指定父元素的指定子元素。

父元素 > 子元素 {
    ...
}

九、属性选择器

作用:可以根据元素中的属性或属性值来选取指定元素。

<p title="text">一段文字</p>
/* [属性名] 根据属性名选取*/
p[title]{
    ...
}
/* [属性名="属性值"] 根据属性值选取*/
p[title="text"]{
    ...
}
/* [属性名^="xx"] 选取以xx为开头的属性值*/
p[title^="te"]{
    ...
}
/* [属性名$="xx"] 选取以xx结尾的属性值*/
p[title$="xt"]{
    ...
}
/* [属性名*="x"] 选取属性值中有 x 的元素*/
p[title*="x"]{
    ...
}

 

相关推荐
&lt;p&gt; &lt;span style=&quot;font-size:14px;color:#E53333;&quot;&gt;限时福利1:&lt;/span&gt;&lt;span style=&quot;font-size:14px;&quot;&gt;购课进答疑群专享柳峰(刘运强)老师答疑服务&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;br /&gt; &lt;/p&gt; &lt;p&gt; &lt;br /&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;color:#337FE5;&quot;&gt;&lt;strong&gt;为什么需要掌握高性能的MySQL实战?&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span&gt;&lt;span style=&quot;font-size:14px;&quot;&gt;&lt;br /&gt; &lt;/span&gt;&lt;/span&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;由于互联网产品用户量大、高并发请求场景多,因此对MySQL的性能、可用性、扩展性都提出了很高的要求。使用MySQL解决大量数据以高并发请求已经是程序员的必备技能,也是衡量一个程序员能力和薪资的标准之一。&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;br /&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;为了让大家快速系统了解高性能MySQL核心知识全貌,我为你总结了&lt;/span&gt;&lt;span style=&quot;font-size:14px;&quot;&gt;「高性能 MySQL 知识框架图」&lt;/span&gt;&lt;span style=&quot;font-size:14px;&quot;&gt;,帮你梳理学习重点,建议收藏!&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;br /&gt; &lt;/p&gt; &lt;p&gt; &lt;img alt=&quot;&quot; src=&quot;https://img-bss.csdnimg.cn/202006031401338860.png&quot; /&gt; &lt;/p&gt; &lt;p&gt; &lt;br /&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;color:#337FE5;&quot;&gt;&lt;strong&gt;【课程设计】&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;br /&gt; &lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;课程分为四大篇章,将为你建立完整的 MySQL 知识体系,同时将重点讲解 MySQL 底层运行原理、数据库的性能调优、高并发、海量业务处理、面试解析等。&lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;br /&gt; &lt;/span&gt; &lt;/p&gt; &lt;p&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;strong&gt;一、性能优化篇:&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;主要包括经典 MySQL 问题剖析、索引底层原理和事务与锁机制。通过深入理解 MySQL 的索引结构 B+Tree ,学员能够从根本上弄懂为什么有些 SQL 走索引、有些不走索引,从而彻底掌握索引的使用和优化技巧,能够避开很多实战中遇到的&ldquo;坑&rdquo;。&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;br /&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;strong&gt;二、MySQL 8.0新特性篇:&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;主要包括窗口函数和通用表表达式。企业中的许多报表统计需求,如果不采用窗口函数,用普通的 SQL 语句是很难实现的。&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;br /&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;strong&gt;三、高性能架构篇:&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;主要包括主从复制和读写分离。在企业的生产环境中,很少采用单台MySQL节点的情况,因为一旦单个节点发生故障,整个系统都不可用,后果往往不堪设想,因此掌握高可用架构的实现是非常有必要的。&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;br /&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;strong&gt;四、面试篇:&lt;/strong&gt;&lt;/span&gt; &lt;/p&gt; &lt;p style=&quot;text-align:justify;&quot;&gt; &lt;span style=&quot;font-size:14px;&quot;&gt;程序员获得工作的第一步,就是高效的准备面试,面试篇主要从知识点回顾总结的角度出发,结合程序员面试高频MySQL问题精讲精练,帮助程序员吊打面试官,获得心仪的工作机会。&lt;/span&gt; &lt;/p&gt;
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页