CSS三种样式表、样式表优先级、CSS选择器

news2025/1/18 4:43:22

一、CSS介绍：

1.1、CSS介绍：

CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。

CSS编写规则如下所示：

CSS编写的规则分为两部分，分别是：选择器、声明块。

  • 声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。

选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。例如：

h1 {
    color: blue;
    font-size: 20px;
}

1.2、CSS三种使用方式：

CSS有三种使用方式，这三种方式在不同地方使用，分别是：内联样式、内部样式、外部样式。

（1）内联样式：

内联样式，是直接在需要添加样式的HTML标签上面，使用【style】属性进行样式修饰。如下所示：

<body>
    <div style="color: blue; font-size: 20px;">内联CSS样式</div>
</body>

（2）内部样式：

内部样式，是在head标签之前，使用【

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div clas="box">内联CSS样式</div>
</body>
</html>

（3）外部样式：

外部样式，就是将所有的CSS代码统一的写到一个CSS文件里面，然后哪个HTML要使用，就通过【】标签引入即可。

<!-- 引入外部CSS样式 -->
<link rel="stylesheet" href="./cssdemo.css">

rel属性，用于指定是CSS样式表，href属性用于指定CSS文件的路径。

1.3、CSS样式表的优先级：

上面三种CSS样式表的使用方式，是具有优先级，浏览器会使用优先级越高的CSS样式。

CSS样式表优先级：

  • 内联样式 > 内部样式 和 外部样式，即：标签上面使用的style属性优先级最高。
  • 内部样式 和 外部样式 的优先级，最后读取的样式，优先级更高，即：哪个最后定义，就使用哪个样式。
    • 也可以理解为后定义的样式，会覆盖前面定义的样式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="./cssdemo.css">
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <!-- <div style="color: red;">三种CSS样式表优先级</div> -->
    <div clas="box">三种CSS样式表优先级</div>
</body>
</html>

定义的CSS外部样式。

div {
    color: orange;
    font-size: 20px;
}

二、CSS选择器：

2.1、简单选择器：

（1）元素选择器：

根据HTML标签名称来选择元素。

<style>
    div {
        color: blue;
    }
</style>

（2）id选择器：

id选择器，需要给HTML标签添加id属性，然后再通过指定的id名称来选择到这个HTML标签，一个HTML里面，id属性应该是唯一的。

id选择器使用格式：#id名称 {样式属性}

在这里插入图片描述

（3）class类别选择器：

class类别选择器，给需要添加样式的标签设置【class】属性，一个HTML页面里面，可以有多个相同名称的class选择器，也就是说，class类别选择器可以被重复使用。class选择器也支持同时设置多个，使用空格隔开即可。

class选择器使用格式：【.class名称 { 样式属性 } 】（注意：使用点号开头）

在这里插入图片描述

（4）通用选择器：

通用选择器是对HTML中的所有标签添加CSS样式的，通用选择器使用【*】星号通配符定义。

在这里插入图片描述

2.2、组合选择器：

（1）后代选择器：

后代选择器，通过【空格】将每个选择分隔，格式如下所示：

后代选择器：【选择器1 空格 选择器2 空格 选择器3…】

后代选择器，可以将所有指定的后代标签获取到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="./cssdemo.css">
    <style>
        /* 获取 div 标签下的所有 p 标签 */
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>后代选择器</p>
        </div>
        <p>后代选择器</p>
        <p>后代选择器</p>
    </div>
</body>
</html>

（2）子选择器：

子选择器，通过【>】箭头将每个选择分隔，格式如下所示：

子选择器：【选择器1 > 选择器2 > 选择器3…】

子选择器，只能够获取到选择器下直接子元素，不能包含孙子元素。

在这里插入图片描述

也就是某个选择器下面，第一层的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* 获取 .box 选择器下的直接 p 标签 */
        .box > p {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <p>后代选择器</p>
        </div>
        <p>后代选择器</p>
        <p>后代选择器</p>
    </div>
</body>
</html>

（3）相邻兄弟选择器：

相邻兄弟选择器，通过【+】加号将每个选择器分隔，格式如下所示：

相邻兄弟选择器：【选择器1 + 选择器2 + 选择器3…】

待解锁_…

（4）一般兄弟选择器：

一般兄弟选择器，通过【~】波浪线将每个选择器分隔，格式如下所示：

一般兄弟选择器：【选择器1 ~ 选择器2…】

待解锁_…

2.3、伪类选择器：

伪类选择器，是根据元素的状态来选择元素。伪类选择器，是属于类别选择器的一种，它能够根据元素的状态来选择标签元素。

伪类选择器的格式如下：

伪类选择器：【选择器名称：状态 { 属性样式 }】

常见的伪类选择器，有如下几个：

伪类选择器：

  • 【:link】这是鼠标点击之前显示的样式。
  • 【:visited】这是鼠标点击之后显示的样式。
  • 【:hover】这是鼠标悬浮上面显示的样式。
  • 【:active】这是鼠标点击的那一刻显示的样式。

上面四个伪类选择器，一般情况下，都是使用在超链接上面，并且四个的使用顺序（l、v、h、a）必须按照上面定义的先后顺序编写，否则在浏览器中可能不能生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        a {
            font-size: 30px;
        }
        a:link {
            color: red;
        }
        a:visited {
            color: blue;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">伪类选择器</a>
</body>
</html>

上面四个伪类选择器也可以使用在其他标签上面，但是只能使hover和active生效。

2.4、伪元素选择器：

伪元素选择器，可以在标签的前后添加额外的内容，伪元素选择器的使用格式：

伪元素选择器：【选择器名称::选择器类型 { 样式属性 }】

伪元素选择器有五种：

伪元素选择器：

  • 【::first-letter】在第一个字符之前添加样式（样式只能够对第一个字符生效）。
  • 【::first-line】在第一行之前添加样式（样式只能够对第一行文本生效）。
  • 【::before】在指定元素之前添加样式。
  • 【::after】在指定元素之后添加样式。
  • 【::selection】在元素选中之后显示的样式（这个只能支持：color、backgroud、cursor、outline四个属性）。

伪元素选择器添加文本内容是通过【content】属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid blue;
        }
        .box1::first-letter {
            font-size: 30px;
            color: red;
        }
        .box2::first-line {
            font-size: 20px;
            color: green;
        }
        .box3::before {
            content: '***';
            color: red;
            font-size: 20px;
        }
        .box4::after {
            content: 'XXX';
            font-size: 30px;
            color: green;
        }
        .box5::selection {
            color: white;
            background: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        伪元素选择器first-letter
    </div>
    <div class="box2">
        伪元素选择器first-line
    </div>
    <div class="box3">
        伪元素选择器before
    </div>
    <div class="box4">
        伪元素选择器aftre
    </div>
    <div class="box5">
        伪元素选择器selection
    </div>
</body>
</html>

2.5、结构伪类选择器：

结构伪类选择器，可以从多个元素中，选择指定的元素进行操作，常见的结构伪类选择器有如下这些：

结构伪类选择器：

  • :empty：选择内容是空的元素标签的选择器。
  • :root：匹配文档的根元素，即：html标签。
  • :first-child：选择第一个孩子元素。
  • :last-child：选择最后一个孩子元素。
  • :nth-child(n)：选择索引值是n的孩子元素，索引值从1开始。
    • :nth-child(2n)、:nth-child(even)：选择索引值是偶数的。
    • :nth-child(2n-1)、:nth-child(2n+1)、:nth-child(odd)：选择索引值是奇数的。

2.6、目标伪类选择器：

目标伪类选择器，一般是锚点结合使用，语法格式：

  • 【XXX:target】：当选择对应目标之后，会触发。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        body>div>div {
            height: 600px;
            border: 1px solid black;
        }
        ul {
            position: fixed;
            top: 0;
        }
        /* 目标伪类选择器 */
        div:target {
            background-color: lightblue;
        }
    </style>
</head>
<body>
 
    <ul>
        <li><a href="#one">第一页</a></li>
        <li><a href="#two">第二页</a></li>
        <li><a href="#three">第三页</a></li>
    </ul>
    <div>
        <div id="one">第一页</div>
        <div id="two">第二页</div>
        <div id="three">第三页</div>
    </div>
</body>
</html>

2.7、UI元素状态选择器：

UI元素状态选择器，是针对表单元素设置的，有下面四种选择器：

UI元素状态选择器

  • :enabled：匹配所有处于可用状态的元素。
  • :disabled：匹配所有处于禁用状态的元素。
  • :checked：匹配所有选择状态的元素。
  • ::selection：匹配所有处于选中、高亮状态的元素（选中文本时候，注意是两个冒号）。
  • :focus：获得焦点时候的选择器。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI状态选择器</title>
    <style>
        input:enabled {
            background-color: lightblue;
        }
        input:disabled {
            background-color: pink;
        }
        input[type=checkbox]:checked {
            /* 去掉默认样式 */
            appearance: none;
            width: 20px;
            height: 20px;
            background: red;
        }
        input:focus {
            background-color: aqua;
        }
        div::selection {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<form action="#">
    用户名：<input type="text"> <br>
    密码: <input type="text"> <br>
    多选<input type="checkbox"> <br>
    <input type="button" value="提交" disabled>
</form>
<div>
    BBBBBBBBBBBBBB
</div>
</body>
</html>

2.9、否定伪类选择器：

否定伪类选择器，语法格式：

  • 【:not(s)】：对指定的选择器，进行否定选中。
div:not(:first-child) {
	background-color: aqua;
}

2.10、属性选择器：

根据元素的属性或者属性值来选择元素。一般情况下，是针对表单、超链接采用属性选择器居多。属性选择器的使用格式：

属性选择器：

  • 第一种方式：【[属性名称]】，通过中括号包裹属性名称（查找含有指定属性名称的标签元素）。
  • 第二种方式：【[属性名称=“value”]】，通过中括号，包裹属性名称和属性值，查找含有指定属性名称，并且属性值等于给定的标签元素，（这种只能匹配单个属性值）。
  • 第三种方式：【[属性名称**~=****“value”]】，查找包含指定属性名称，并且属性值中包含给定值value的标签元素（这种是能够从多个属性值中进行匹配）。**
  • 第四种方式：【[属性名称**|=****“value”]】，查找包含指定属性名称，并且属性值是以【value】或者【value-】开头的元素（这种只能匹配单个属性值）。**
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        input {
            display: block;
            margin: 10px;
        }
        /* 属性选择器 */
        /* 查找所有包含type属性的input标签 */
        input[type] {
            border: 2px solid blue;
            padding: 5px 10px;
        }
        /* 查找所有type属性等于text的input标签 */
        input[type='text'] {
            background-color: lightgray;
        }
        /* 查找所有class属性包含box2值的input标签 */
        input[class~='box2'] {
            width: 200px;
        }
        /* 查找所有class属性值是以box01开头的input标签 */
        input[class|='box'] {
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="text" name="age">
    <input type="text" name="uname">
    <input type="password" class="box1 box2">
    <input type="text" class="box-css01">
</body>
</html>

运行效果如下：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/997859.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringMVC学习简要

SpringMVC学习简要

学习资料&#xff1a; SpringMVC-03-入门案例工作流程解析_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1ZF411G7eP/?p3&spm_id_frompageDriver&vd_source4ac53f52a57eb96a3c8406b971b038ae 常用MYSQL命令&#xff1a;http://t.csdn.cn/zshCP 学习要求 什么是…
阅读更多...
微信小程序Day4笔记

微信小程序Day4笔记

1. 组件的创建与引用 创建组件 在项目的根目录中&#xff0c;鼠标右键&#xff0c;创建components -> test文件夹在新建的test文件夹上&#xff0c;鼠标右键&#xff0c;点击新建Component键入组件的名称之后回车&#xff0c;会自动生成组件对应的4个文件&#xff0c;后缀…
阅读更多...
《服务器无状态设计：为什么如何实现无状态API？》

《服务器无状态设计：为什么如何实现无状态API？》

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
3.1 栈和队列的定义和特点

3.1 栈和队列的定义和特点

3.1.1 栈的定义和特点 主要内容&#xff1a; 3.1 栈和队列的定义和特点 3.1.1 栈的定义和特点 定义&#xff1a; 栈是一种特殊的线性表&#xff0c;只允许在一端进行插入或删除操作。这一端被称为栈顶&#xff0c;而另一端则称为栈底。不包含任何元素的栈被称为空栈。 特点…
阅读更多...
分布式调度 Elastic-job

分布式调度 Elastic-job

分布式调度 Elastic-job 1.概述 1.1什么是任务调度 我们可以思考一下下面业务场景的解决方案: 某电商平台需要每天上午10点&#xff0c;下午3点&#xff0c;晚上8点发放一批优惠券某银行系统需要在信用卡到期还款日的前三天进行短信提醒某财务系统需要在每天凌晨0:10分结算…
阅读更多...
Java虚拟机（JVM）解析：内存区域、类加载、垃圾回收和选型考虑

Java虚拟机（JVM）解析：内存区域、类加载、垃圾回收和选型考虑

目录 一、JVM内存区域划分 二、JVM类加载 三、JVM垃圾回收&#xff08;GC&#xff09; 一、JVM内存区域划分 栈堆方法区(元数据区)程序计数器 1.栈 举个例子&#xff1a; 那具体是怎么分的呢&#xff1f;如下图 本地方法栈&#xff1a;给JVM内部的方法准备的栈空间 虚拟…
阅读更多...
在MySQL客户端使用Tab健进行命令补全

在MySQL客户端使用Tab健进行命令补全

在MySQL客户端中&#xff0c;你可以使用Tab键进行命令补全&#xff0c;这将提高我们的效率&#xff0c;这与Linux命令行中的行为类似。例如&#xff0c;如果你输入SEL然后按Tab键&#xff0c;MySQL客户端会自动补全为SELECT。 然而&#xff0c;需要注意的是&#xff0c;这个功能…
阅读更多...
数据结构 - 栈

数据结构 - 栈

目录 二、栈的实现 1.数组模拟实现栈 设计思想: 方法实现: Peek(): 偷窥栈顶元素 pop(): 栈顶出栈 push(): 2.链表模拟实现 3 . 栈的继承体系 总结 前言 大家好,这篇博客带大家了解一下栈是什么? 并且用两种方式为大家实现一下栈 一、栈是什么&#xff1f; 栈是一种数…
阅读更多...
npm介绍

npm介绍

npm介绍 npm&#xff08;Node Package Manager的缩写&#xff09;是一个软件包管理器&#xff0c;主要进行JavaScript的包管理。通过npm&#xff0c;我们可以很方便地进行JavaScript包的下载、升级&#xff0c;我们也可以把我们开发的JavaScript包共享给其他使用者。 在npm没…
阅读更多...
大数据-玩转数据-Flink状态后端（下）

大数据-玩转数据-Flink状态后端（下）

一、状态后端 每传入一条数据&#xff0c;有状态的算子任务都会读取和更新状态。由于有效的状态访问对于处理数据的低延迟至关重要&#xff0c;因此每个并行任务(子任务)都会在本地维护其状态&#xff0c;以确保快速的状态访问。 状态的存储、访问以及维护&#xff0c;由一个…
阅读更多...
goweb入门

goweb入门

创建gomod项目 go mod init web01新建main.go package mainimport ("fmt""net/http" )func handler(writer http.ResponseWriter, request *http.Request) {fmt.Fprintf(writer, "Hello World,%s!", request.URL.Path[1:]) } func main() {fmt…
阅读更多...
Mysql基于成本选择索引

Mysql基于成本选择索引

本篇文章介绍mysql基于成本选择索引的行为&#xff0c;解释为什么有时候明明可以走索引&#xff0c;但mysql却没有走索引的原因 mysql索引失效的场景大致有几种 不符合最左前缀原则在索引列上使用函数或隐式类型转换使用like查询&#xff0c;如 %xxx回表代价太大索引列区分度过…
阅读更多...
PHP8中获取并删除数组中最后一个元素-PHP8知识详解

PHP8中获取并删除数组中最后一个元素-PHP8知识详解

在php8中&#xff0c;array_pop()函数将返回数组的最后一个元素&#xff0c;并且将该元素从数组中删除。语法格式如下&#xff1a; array_pop(目标数组) 获取并删除数组中最后一个元素&#xff0c;参考代码&#xff1a; <?php $stu array(s001>明明,s002>亮亮,s…
阅读更多...
Ansible数组同步至Shell脚本数组中

Ansible数组同步至Shell脚本数组中

1、ansible中定义数组&#xff0c;我以 ccaPojectList 数组为例子,如下图数组内容 2、需要写一个j2模板的Shell脚本&#xff0c;在j2模板的Shell脚本中引用ansible的 ccaPojectList 数组&#xff0c;大致如下图&#xff1a; {% for item in ccaPojectList %} "{{ item }…
阅读更多...
Linux JAVA环境的搭建tomcat的部署（含多实例）

Linux JAVA环境的搭建tomcat的部署（含多实例）

tomcat tomcat是Apache软件基金会项目中的一个核心项目由 Apache、Sun 和其他一些公司及个人共同开发而成。tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器. tomcat的组成 tomcat用于支持Java Servlet和JSP。它是一个重要的We…
阅读更多...
手动开发-简单的Spring基于注解配置的程序--源码解析

手动开发-简单的Spring基于注解配置的程序--源码解析

文章目录 设计注解$设计容器 $#完整代码# 在前文中 《手动开发-简单的Spring基于XML配置的程序–源码解析》&#xff0c;我们是从XML配置文件中去读取bean对象信息&#xff0c;再在自己设计的容器中进行初始化&#xff0c;属性注入&#xff0c;最后通过getBean()方法进行返回。…
阅读更多...
Service Mesh目的：是解决系统架构微服务化后的服务间通信和治理问题。

Service Mesh目的：是解决系统架构微服务化后的服务间通信和治理问题。

参考链接&#xff1a;https://www.zhihu.com/tardis/bd/art/397945267?source_id1001 1、Service Mesh 是什么 Service Mesh的定义&#xff1a; 服务网格是一个基础设施层&#xff0c;用于处理服务间通信。云原生应用有着复杂的服务拓扑&#xff0c;服务网格保证请求在这些…
阅读更多...
Docker：01 OverView

Docker：01 OverView

Docker&#xff1a;01 OverView 基本介绍 Docker是一个用于开发、交付、运行应用程序的开放平台&#xff0c;可以使应用程序与基础架构分开&#xff0c;以便快速交付软件。 Docker在一个被叫做容器的隔离环境下&#xff0c;提供了打包和运行的能力。 容器非常轻量化&#x…
阅读更多...
[SICTF 2023] webmisc

[SICTF 2023] webmisc

文章目录 webBaby_PHP涉及知识点 我全都要RCE你能跟得上我的speed吗 miscPixel_art攻破这个压缩包&#xff01; web Baby_PHP 涉及知识点 php解析特性apache换行解析漏洞无参RCE 源代码 <?php highlight_file(__FILE__); error_reporting(0);$query $_SERVER[QUERY_ST…
阅读更多...
【新版】软考 - 系统架构设计师（总结笔记）

【新版】软考 - 系统架构设计师（总结笔记）

个人总结学习笔记&#xff0c;仅供参考&#xff01;&#xff01;&#xff01; →点击 笔者主页&#xff0c;欢迎关注哦&#xff08;互相学习&#xff0c;共同成长&#xff09; 笔记目录 &#x1f4e2;【系统架构设计系列】系统架构设计专业技能 计算机组成与结构操作系统信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023