CSS基础_CSS选择器与优先级

最新推荐文章于 2022-06-13 20:12:00 发布

SCP_345

最新推荐文章于 2022-06-13 20:12:00 发布

阅读量151

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/SCP_343/article/details/107248129

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、插入样式表

1.1 行内样式

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

例：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

1.2 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表

例：

<head>
    <style>
    hr {
    	color:sienna;
    	}
    p {
    	margin-left:20px;
    	}
    body {
    	background-image:url("images/back40.gif");
    	}
    </style>
</head>

1.3外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部

<head> <link rel="stylesheet" type="text/css" href="https://www.w3cschool.cn/css/mystyle.css"> </head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以.css 扩展名进行保存。

1.4 多重样式优先级

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 head 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

在我看来，代码的解析是自上而下的，若在不同位置定义了相同的样式，那么哪个样式最后被解析，就显示哪个样式。

1.5 选择器优先级

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：

通用选择器（*） 0000
元素(类型)选择器 0001
类选择器 0010
属性选择器 0010
伪类 0010
ID 选择器 0100
important 1000

选择器的优先级使用权重设定的。选择器的权值加到一起，大的优先；如果权值相同，后定义的优先。

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承

因此:

权值的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关

1.6 选择器的效率

由高到低：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel=“external”]）

9.伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低

二、CSS选择器

2.1 选择器的结构

选择器{
	属性名1：属性值1;
	属性名2：属性值2;
	}

2.2 标签选择器

使用标签来定义,设置后所有这个标签都会被统一设定

例：

html中:
	<p>这是一个p标签</p>

CSS中：
	p{
		color: #66ccff
	}

2.3 Id和class选择器

2.3.1 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

一个html文件中id都是唯一的，即不可以两个重名的id

例：

html中：
	<p id="isP">这是id为isP的p标签</p>
CSS中：
	#isP{
		color:	#66ccff;
	}

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

2.3.2 class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，即class的命名是可重复的。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

例:

html中:
    <p class="classP">这是class为classP的p标签</p>
    <p class="classP">这也是是class为classP的p标签</p>
CSS中:
	.classP{
        color:	#66ccff;
	}

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

2.4 组合选择符

2.4.1 后代选取器

后代选取器匹配所有指定元素的后代元素。

例:

HTML中：
	<div>
		<p>会被选择到的p标签</p>
         <p>会被选择到的p标签</p>
         <p>会被选择到的p标签</p>	
		<span>
			<p>会被选择到的p标签</p>
		</span>
	</div>
css中：
div p{
    color: #66ccff;
}

2.4.2 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接子元素的元素。

例：

HTML中：
	<div>
		<p>会被选择到的p标签</p>
         <p>会被选择到的p标签</p>
         <p>会被选择到的p标签</p>	
		<span>
			<p>不会被选择到的p标签</p>
		</span>
	</div>
css中：
div>p{
    color: #66ccff;
}

2.4.3 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者有相同父元素。

例:

HTML中：
<div></div>
<p>会被选择到的p标签</p>
<p>不会被选择到的p标签</p>
<div></div>
<p>会被选择到的p标签</p>
<p>不会被选择到的p标签</p>
	

CSS中：
div+p{
    color: #66ccff;
}

2.4.5 普通兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

例:

HTML中：
<div></div>
<p>会被选择到的p标签</p>
<p>会被选择到的p标签</p>
<div></div>
<p>会被选择到的p标签</p>
<p>会被选择到的p标签</p>
	

CSS中：
div+p{
    color: #66ccff;
}

2.5 伪类

2.5.1 anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

例：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

**注意：**CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类的名称不区分大小写。

伪类和CSS类
伪类可以与 CSS 类配合使用：

<a class="red" href="https://www.w3cschool.cn/css/css-syntax.html">CSS Syntax</a>

a.red:visited {color:#FF0000;}  
如果在上面的例子的链接已被访问，它会显示为红色。

2.5.2 first - child伪类

first-child 伪类来选择元素的第一个子元素

例1，匹配作为任何元素的第一个子元素的 <p> 元素：

<html>
<head>
<style>
p:first-child
{
	color:blue;
}
</style>
</head>

<body>
<p>会被选择到的p标签</p>
<p>不会被选择到的p标签</p>
<div>
    <p>会被选择到的p标签</p>
	<p>不会被选择到的p标签</p>
</div>
</body>
</html>

例2，匹配任何<div>元素的第一个子元素的 <p> 元素：

<html>
<head>
<style>
div>p:first-child
{
	color:blue;
}
</style>
</head>

<body>
<div>
    <p>会被选择到的p标签</p>
    <p>不会被选择到的p标签</p>
</div>
<div>
    <p>会被选择到的p标签</p>
	<p>不会被选择到的p标签</p>
</div>
</body>
</html>

例3，匹配所有作为第一个子元素的<div>元素中的所有<p> 元素：

<html>
<head>
<style>
div:first-child p
{
	color:blue;
}
</style>
</head>

<body>
<div>
    <p>会被选择到的p标签</p>
    <p>会被选择到的p标签</p>
    <div>
    	<p>会被选择到的p标签</p>
		<p>会被选择到的p标签</p>
	</div>
</div>
<div>
    <p>不会被选择到的p标签</p>
	<p>不会被选择到的p标签</p>
</div>
</body>
</html>

2.5.3 所有CSS伪类/元素

选择器	示例	示例说明
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个`<p>`元素的第一个字母
:first-line	p:first-line	选择每个`<p>` 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的`<p>`元素
:before	p:before	在每个`<p>`元素之前插入内容
:after	p:after	在每个`<p>`元素之后插入内容
:lang(language)	p:lang(it)	为`<p>`元素的lang属性选择一个开始值

2.6 !important 强优先级

设置了!important优先级最高。

在框架中如bootstrap中使用了就使用了!important，若自己想修改，可以在行内样式中设置!important，但不推荐使用。

SCP_345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础_CSS选择器与优先级

一、插入样式表1.1 行内样式要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。例：<p style="color:sienna;margin-left:20px">这是一个段落。</p>1.2 内部样式表当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style>标签在文档头部定义内部样式表例：<head> <style> hr {
复制链接

扫一扫