CSS（一）概述、选择器、选择器优先级

敬之

已于 2022-03-31 09:57:19 修改

阅读量1.2k

点赞数 3

分类专栏： Web 前端开发工程师知识体系文章标签：前端 css css3

于 2021-08-18 14:27:18 首次发布

本文链接：https://blog.csdn.net/weixin_53072519/article/details/119771922

版权

Web 前端开发工程师知识体系专栏收录该内容

39 篇文章 123 订阅

订阅专栏

CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。对前端网页的布局与美化有着广泛作用。

一、CSS概述

1. 前端HTML、Javascript、CSS

html：超文本标记语言。用于网页的结构搭建和页面布局。
css：层叠样式表。用于网页的修饰，样式的渲染。
javascript：解释型的编程语言。用于与页面的交互。

2. CSS语法规范

（1）内联样式

内联样式也叫行内样式，就是在 html 文件中的 html 标签中，用 style 属性样式值来完成渲染。内联样式将样式写在标签里，缺点是杂乱且不易于修改，复用性差；优点是可以指定当前标签，更加直接。

<!-- 内联样式 -->
<span style="样式声明"></span>

（2）内部样式

在网页头部<head></head>中增加一对<style></style>标签，在 style 中定义样式。特点是需要选择器查找到元素并嵌入 HTML 文件，只能在当前页面使用，优先级低于内联样式（不建议用于项目）。

<head>
  <!-- 内部样式 -->
  <style>
    h2 {
      background-color: lightpink;
      color: red;
    }
  </style>
</head>

（3）外部样式

单独创建 CSS 文件，在 HTML 文件的 head 标签中引入。

<head>
   <!-- 外部样式 -->
   <link rel="stylesheet  href="01.css">
</head>

href 为超文本引用，引用 css 文件路径，rel 属性指文件与当前HTML的关系（必写）。外部样式所有页面都可以使用，是项目中最重要的样式使用方式。

二、CSS选择器

要使用 css 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到 CSS 选择器。HTML页面中的元素就是通过 CSS 选择器进行控制的。

1. 基础选择器

（1）通用选择器：使用通配符 * ，选择 HTML 文件中所有元素。最常用的写法是清除浏览器内外边距，如下：

 *{margin:0;padding:0}

（2）元素选择器：也叫标签选择器，直接使用标签的名字来选择 HTML 元素。权重值为1

h1 {color: teal;}
div {color: green;}

（3）id 选择器：只针对一个元素，一般不作为样式渲染的选择器使用。

#getblue {color: blue;}

（4）类选择器：通过元素的类名即class值选择元素。权重值10

.oz {color: purple;}
.oo {color: orangered;}

一个元素可以创建多个类名，每个类名之间用空格分开即可。

（5）群组选择器：将多种选择器进行组合，把不同的选择器用逗号连接

.y,#mybox {
   background-color: yellow;
}

2. 关系选择器

（1）后代选择器：先代元素(祖先)选择器写在前面，空格后写后代元素选择器。

.item span {  
   color: red;
}

（2）子代选择器：选中某个元素的直接子元素(当前元素下的第一层子元素)，与后代不同的是子代选择器的范围更小。

body>div>div>div {
   color: red;
}

（3）兄弟选择器

.l1~li {
   color: blue;
}

.s~.nv {
   color: red;
}

注意，前面的为参照元素，后面的为筛选元素，选中的永远是其参照元素后面的兄弟元素。

（4）相邻选择器：同一层的关系选择器，可以选中参照的元素后面紧挨着的被参照元素的选择器。

.o1+span {
   color: red;
}

3. 伪类选择器

伪类选择器的作用是匹配同一个元素，设置其不同状态下的样式。常用的伪类有：

a:link {样式声明}	未激活（a标签特有）
a:visited {样式声明}	激活后（a标签特有）
div:hover {样式声明}	鼠标悬停
p:active {样式声明}	激活中
input:focus { }	input标签获取焦点
input:cheaked { }	input单选、复选等type 类型被选中后的样式


    a:link {
      color: green;
    }

    div:hover {
      background-color: salmon;
    }

    button:hover+div {
      background-color: red;
    }

4. 伪元素选择器

用于设置元素的“指定部分”的样式。

::before	元素最前边部分
::after	元素的最后边部分

div::before {
   content: "欢迎您，";
   font-weight: bolder;
   font-size: 26px;
}

需要注意content属性必须写，但值可以为空。

三、CSS优先级

1. 优先级原则

（1）顺序读取：相同类型选择器采用顺序读取后来的优先。
（2）选择器优先级：不同类选择器，按照权重原则(id选择器100,类选择器10,元素选择器 1)。
（3）继承：制定样式的优先级大于继承样式的优先级。
（4）多个选择器一起使用：根据权重值累加比较值后采用优先级。

2. 最高优先级 - !important

直接获取最高优先级，但注意内联样式不能加 !important。用法如下：

.d1{
   background-color: rgb(22, 92, 161) !important;
}
<!-- 表示类名为d1的元素具有最高优先级 -->

3. 优先级的比重大小

按引入方式：内联样式 > 内部样式 > 外部样式

按元素：id 选择器（100）> 类选择器（10）> 元素选择器（1）

敬之

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
CSS（一）概述、选择器、选择器优先级

CSS：CSS概述、选择器、优先级
复制链接

扫一扫

专栏目录

CSS（一）概述、选择器、选择器优先级

一、CSS概述

二、CSS选择器

1. 基础选择器

2. 关系选择器

3. 伪类选择器

4. 伪元素选择器

三、CSS优先级

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