CSS（一）：引用方式和选择器的优先级

Leah·Ma

已于 2022-11-13 22:42:56 修改

阅读量310

点赞数

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

于 2022-08-30 22:38:53 首次发布

本文链接：https://blog.csdn.net/m1225381500/article/details/126411964

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是CSS

美化页面HTML

CSS三种引用方式

内联样式

在标记里直接添加CSS

<标记 style=“CSS属性名:属性值;CSS属性名:属性值;”>内容</标记>

所有标记都有公共的html属性

内嵌样式

将CSS放在<head>标记下的<style>标记中

外联样式

实现了html和css的分离
单独新建css文件：index.css
在html页面<head>里引入css文件

<link href="./css/index.css" rel="stylesheet" />

css选择器

元素选择器

css语法格式：

标记{}

例：
CSS: h2{color: red;}
HTML: <h2>二级标题</h2>

id选择器

id相当于身份证，不可重复，一个标签只能有一个id属性值
id前要加"#"

css语法格式：

 #id值{属性名:属性值;}

例:
CSS: #one {color: red;}
HTML: <h2 id="one">二级标题</h2>

类选择器class

每个标签共有的属性class
类名相当于名字，可以重复，一个标签可以有多个class类名
类名前要加"."

css语法格式：

 .类名{属性名:属性值;}

例：
CSS: .p1{ color:red;}
HTML: <p class="p1">段落标记</p>

复合选择器

后代选择器
后面的选择器是前面选择器的后代，选择器之间用空格隔开

css语法格式：

祖先元素选择器 后代元素选择器{}

例：
CSS: .inner p{color:red;}
HTML:
<div class="inner">
<p>段落标记</p>
</div>

子代选择器
后面选择器是前面选择器的儿子，选择器之间用 > 隔开
和后代选择器不同的是，后代选择器是祖先和后代的关系就行，子代选择器只能是父亲和儿子的关系

css语法格式：

父元素选择器>子元素选择器{}

例：
CSS: .out>.one{width:10px;}
HTML:
<div class="out">
<div class="one">
<p>段落标记</p>
</div>
</div>

群集选择器
当多个选择器拥有相同的CSS样式，可以用群集选择器，元素之间用","隔开

css语法格式：

选择器1，选择器2{}

例：
CSS: .one,.two {color: red;}
HTML:
<div class="one">one</div>
<div class="two">two</div>

通配符选择器
找到页面中所有你想找的标签，一同设置样式

css语法格式：

*{属性名:属性值}

例：
* {margin:0;}
//找到代码中所有的margin属性进行样式设置

交集选择器
页面中同时满足多个选择器的标签
当一个标记有多个class属性或者同时有id值和class属性时，标记在之前已经被选择器选择并设置了样式，后期其他属性被另外的选择器选中时，就用到了交集选择器
交集选择器中有标签选择器，标签选择器必须放在最前面

css语法格式：

选择器1选择器2{}

例：
<style>
p {
font: bold 30px/46px '楷体';
}
/*p标签的id值已经被选中过了,后面选中的是p标签中class="active"的标签，开始用交集选择器*/
p.active {
color: blueviolet;
}
</style>

伪类选择器
用来描述一个元素的特殊状态
比如第一个元素，某个元素的子元素，鼠标点击的元素

静态伪类
只能用于超链接的样式

css语法格式：

选择器:link
//超链接点击之前的样式 

选择器:visited
//链接被访问过之后的样式

动态伪类
所有标签都适用

css语法格式：

选择器:hover
//鼠标悬浮在超链接上的样式 

选择器:active
//被激活  鼠标点击 不松手 的样式
  
选择器:focus
//标签获得焦点

例：
/* 鼠标悬浮在h3上 */
h3:hover {
background-color: aquamarine;
color: brown;
}
/* 鼠标点击不松开 */
h3:active {
color: chartreuse;
}
/* 焦点 */
input:focus {
background-color: cornflowerblue;
}

4个伪类同时应用于a标签时要注意顺序问题
hover要放到link 和visited的后面
active要放到hover的后面

其它伪类

css语法格式：

选择器:nth-child

选择器:nth-of-type

区别：
E:nth-child 对其父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配
E:nth-of-type 对其父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子

//取相同元素集的第一个设置样式

:firt-child{}
:first-of-type {}

//取相同元素集的最后一个设置样式

:last-child{}
:last-of-type{}

//奇数行设置样式(2n-1和odd都表示奇数行，此处不是固定样式)

:nth-child(2n-1){}
:nth-of-type(odd){}

//偶数行设置样式（2n和even都表示偶数行，此处不是固定样式）

:nth-child(2n){}
:nth-of-type(even){}

//从第三个开始，包含第三个到最后

:nth-of-type(n + 3) {}
:nth-child(n + 3) {}

//前3个，包含第3个

:nth-child(-n + 3) {}

伪元素选择器

css语法格式：

选择器::before {}
//在元素的内容的前面添加内容 

选择器::after {}
//在元素的内容的后面添加内容

属性选择器
通过元素上的HTML属性来选择元素，常用于选择input标签

css语法格式：

E[attr]
//选择具有attr属性的E元素

E[attr="val"]
//选择具有attr属性并且属性值等于val的E元素

优先级

引入方式的优先级

内联样式优先级最高
内嵌样式和外联样式使用的是就近原则

选择器的优先级

!important >id选择器(100)> 类选择器(10)>元素选择器(1)

复合选择器优先级

id选择器=100 类选择器=10 元素选择器=1
根据具体代码选择器相加
数字越高，级别越大

例：
.one p {color: red;}=10+1=11
.one > .active > p {color: yellow;}=10+10+1=21
p {color: blue;}=1

Leah·Ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（一）：引用方式和选择器的优先级

CSS的三种引用方式和选择器以及他们的优先级
复制链接

扫一扫

专栏目录

CSS（一）：引用方式和选择器的优先级

什么是CSS

CSS三种引用方式

内联样式

内嵌样式

外联样式

css选择器

元素选择器

id选择器

类选择器class

复合选择器

优先级

引入方式的优先级

选择器的优先级

复合选择器优先级

“相关推荐”对你有帮助么？