CSS之第一个CSS样式和CSS选择符

news2024/10/13 2:19:01

前端这些博客，我觉得都是固定的语法，故而不会以过多的文字进行描述，本系列博文均以实例和代码介绍的方式进行，主要按照代码进行。不会以过多的文字描述。

第一个CSS样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS初体验</title>
    <style>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>miaow</p>
</body>
</html>

在这里插入图片描述

元素选择符

通配符选择符: *{sRules}

选定所有对象。

  • 通配选择符(Universal Selector)
  • 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
<style>
* {
	color: #f00;
}
</style>

类型选择符 ： E { sRules }

以文档语言对象类型作为选择符。
类型选择符(Type Selector)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>类型选择符</title>
<style>
h1 {
	font-size: 20px;
}
p {
	font-size: 13px;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>

ID选择符： E#myid { sRules }

以唯一标识符id属性等于myid的E对象作为选择符。
ID选择符(ID Selector)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>id选择符 (E#myid)</title>
<style>
#subtitle {
	font-size: 20px;
}
p#content {
	font-size: 13px;
}
</style>
</head>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>
</html>

类选择符：E.myclass { sRules }

以class属性包含myclass的E对象作为选择符。
类选择符(Class Selector)
不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

定义多个类：
.a {
	color: #f00;
}
.b {
	font-weight: 700;
}
<div class="a b">给某个div元素定义.a和.b两个类</div>

注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法

类选择符高级用法：多类选择符

.a.b {
	color: #f00;
}
<div class="a b">多类选择符使用方法</div>

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        /* 标签选择器
        p {
            color: red;
        } */
        /*Class选择器*/
        #p1 {
            color: red;
        }
        .p2 {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="p1">我</p>
    <p id="p1">我</p>
    <p class="p2">我</p>
    <p class="p2">我</p>
</body>

</html>

在这里插入图片描述

关系选择符

包含选择符(E F)： E F { sRules }

选择所有被E元素包含的F元素，与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>包含选择符 (E F)</title>
<style>
ul li {
	color: #f00;
}
</style>
</head>
<body>
<ul>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
</ul>
</body>
</html>

<style>
	/* 包含选择符(E F) */
	.demo div { border:1px solid #f00; }
	/* 子选择符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>

此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；

子选择符：E>F { sRules }

选择所有作为E元素的子元素F。
与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

.demo > div {
	position: relative;
}

<div class="demo">
	<div class="a">
		<div class="b">子选择符</div>
	</div>
</div>

此例只有 .a 会被命中，因为它是 .demo 的子元素；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <style>
        .nav>a {
            color: #000;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">aa</a>
        <p>
            <a href="#">我是miaow</a>
        </p>
    </div>
</body>
</html>

相邻选择符：E+F { sRules }

选择紧贴在E元素之后F元素，与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

<style>
	/* 相邻选择符(E+F) */
	p+p{color:#f00;}
	/* 兄弟选择符(E~F) */
	p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>相邻选择符 (E+F)</title>
<style>
p + p {
	color: #f00;
}
</style>
</head>
<body>
<div class="test">
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
</div>
</body>
</html>

兄弟选择符 ： E~F { sRules }

选择E元素后面的所有兄弟元素F。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

<style>
	/* 相邻选择符(E+F) */
	p+p{color:#f00;}
	/* 兄弟选择符(E~F) */
	p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

并集选择符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择</title>
    <style>
        span,
        p,
        div ul li {
            color: red;
        }
    </style>


</head>

<body>
    <span>你好</span>
    <p>你好</p>
    <div>
        <ul>
            <li>你好</li>
        </ul>

    </div>
</body>

</html>

属性选择符

在这里插入图片描述

伪类选择符

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择</title>

    <style>
        /* 没有点击过的链接变颜色 */
        
        ul li a:link {
            color: red;
        }
        /* 点击过的变颜色 */
        
        a:visited {
            color: aqua;
        }
        /* 光标锁定变颜色 */
        
        a:hover {
            color: chartreuse;
        }
        /* 鼠标正在按下没有松开 */
        
        a:active {
            color: blue;
        }
    </style>


</head>

<body>
    <ul>
        <li>
            <a href="#">1</a>
            <a href="http://baidu.com">ddd</a>
            <a href="http://taobao.com">淘宝</a>

        </li>
    </ul>
</body>

</html>

补充focus选择符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foucs选择器</title>
    <style>
        input:focus {
            background-color: blue;
            border-color: brown;
            border-width: 10px;
        }
    </style>
</head>

<body>

    <input type="text">

    <input type="text">

    <input type="text" name="" id="">

</body>

</html>

在这里插入图片描述

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

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

相关文章

SVD图像处理（MATLAB）

SVD图像处理（MATLAB）

使用SVD处理图像模拟演示 参考文献 https://github.com/matzewolf/Image_compression_SVD/blob/master/svd_compress.m MATLAB代码 clc; clearvars; close all;A_orgimread("lena256.bmp"); compr20; A_orgdouble(A_org);A_red svd_compress( A_org, compr ); s…
阅读更多...
2023最新汽车网络安全报告汇总

2023最新汽车网络安全报告汇总

2023最新汽车网络安全报告、安全参考架构及指南汇总&#xff0c;供大家学习参考。https://t.zsxq.com/18RkG260k 汽车信息安全法律法规及标准全景图V3.2.pdf 车载智能计算基础平台参考架构2.0.pdf 车载智能计算芯片白皮书(2023版).pdf 智能驾驶行为安全评价方法发布版.pdf 智能…
阅读更多...
大数据实验统计-1、Hadoop安装及使用；2、HDFS编程实践；3、HBase编程实践；4、MapReduce编程实践

大数据实验统计-1、Hadoop安装及使用；2、HDFS编程实践；3、HBase编程实践；4、MapReduce编程实践

大数据实验统计 1、Hadoop安装及使用&#xff1b; 一&#xff0e;实验内容 Hadoop安装使用&#xff1a; 1&#xff09;在PC机上以伪分布式模式安装Hadoop&#xff1b; 2&#xff09;访问Web界面查看Hadoop信息。 二&#xff0e;实验目的 1、熟悉Hadoop的安装流程。 2、…
阅读更多...
【STM32嵌入式系统设计与开发】——16InputCapture(输入捕获应用)

【STM32嵌入式系统设计与开发】——16InputCapture(输入捕获应用)

这里写目录标题 STM32资料包&#xff1a; 百度网盘下载链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1mWx9Asaipk-2z9HY17wYXQ?pwd8888 提取码&#xff1a;8888 一、任务描述二、任务实施1、工程文件夹创建2、函数编辑&#xff08;1&#xff09;主函数编辑&#…
阅读更多...
进制转换器（C语言）

进制转换器（C语言）

目录 1问题&#xff1a; 输入任意进制的数值&#xff0c;可以转换成任意进制的数值&#xff08;2到36进制&#xff09;; 2思路&#xff1a; 3代码&#xff1a;&#xff08;需要运用到数据结构栈的知识&#xff09; 4运行结果&#xff1a; 1问题&#xff1a; 输入任意进制的数…
阅读更多...
使用 LLMLingua-2 压缩 GPT-4 和 Claude 提示

使用 LLMLingua-2 压缩 GPT-4 和 Claude 提示

原文地址&#xff1a;Compress GPT-4 and Claude prompts with LLMLingua-2 2024 年 4 月 1 日 向大型语言模型&#xff08;LLM&#xff09;发送的提示长度越短&#xff0c;推理速度就会越快&#xff0c;成本也会越低。因此&#xff0c;提示压缩已经成为LLM研究的热门领域。 …
阅读更多...
RK3568 RTC驱动实验

RK3568 RTC驱动实验

RK3568 RTC驱动实验 1. RTC简介 ​ RTC 也就是实时时钟&#xff0c;用于记录当前系统时间&#xff0c;对于 Linux 系统而言时间是非常重要的&#xff0c;使用 Linux 设备的时候也需要查看时间。RTC是Linux的时间系统。 ​ RTC 设备驱动是一个标准的字符设备驱动&#xff0c;…
阅读更多...
R语言数据挖掘：随机森林（1）

R语言数据挖掘：随机森林（1）

数据集heart_learning.csv与heart_test.csv是关于心脏病的数据集&#xff0c;heart_learning.csv是训练数据集&#xff0c;heart_test.csv是测试数据集。要求&#xff1a;target和target2为因变量&#xff0c;其他诸变量为自变量。用决策树模型对target和target2做预测&#xf…
阅读更多...
ESP32学习---ESP-NOW（一）

ESP32学习---ESP-NOW（一）

ESP32学习---ESP-NOW&#xff08;一&#xff09; 官网简介arduino 官网简介 首先看官网的介绍&#xff1a;https://www.espressif.com.cn/zh-hans/solutions/low-power-solutions/esp-now ESP-NOW 是乐鑫定义的一种无线通信协议&#xff0c;能够在无路由器的情况下直接、快速…
阅读更多...
使用deepspeed，transformers，safetensor中常见的训练精度，共享权重问题

使用deepspeed，transformers，safetensor中常见的训练精度，共享权重问题

使用deepspeed可能需要注意精度问题 混合精度&#xff0c;LayerNorm 虽然deepspeed有混合精度训练的功能&#xff0c;但是对于网络上各种奇奇怪怪的代码的DIY转化中&#xff0c;他还是很弱小的。它的精度问题&#xff0c;使用deepspeed如果模型中有部分模型使用的是half精度&a…
阅读更多...
Ubuntu22.04安装Anaconda

Ubuntu22.04安装Anaconda

一、下载安装包 下载地址&#xff1a;https://www.anaconda.com/download#Downloads 参考&#xff1a;Ubuntu下安装Anaconda的步骤&#xff08;带图&#xff09; - 知乎 下载Linux 64-Bit (x86) installer 二、安装 在当前路径下&#xff0c;执行命令&#xff1a; bash Ana…
阅读更多...
机器学习——几个线性模型的简介

机器学习——几个线性模型的简介

目录 形式 假设 一元回归例子理解最小二乘法 多元回归 广义线性回归 对数线性回归 逻辑回归 线性判别分析 形式 线性说白了就是初中的一次函数的一种应用&#xff0c;根据不同的(x,y)拟合出一条直线以预测&#xff0c;从而解决各种分类或回归问题&#xff0c;假设有 n …
阅读更多...
外链工具源码版V1

外链工具源码版V1

请将zip文件全部解压缩即可访问&#xff01; 源码全部开源&#xff0c;支持上传二级目录访问 #已更新增加大量高质量外链&#xff08;若需要增加修改其他外链请打开txt文件&#xff09; #修复优化页面端 源码下载地址&#xff1a;外链工具源码版V1
阅读更多...
基于k8s的web服务器构建

基于k8s的web服务器构建

文章目录 k8s综合项目1、项目规划图2、项目描述3、项目环境4、前期准备4.1、环境准备4.2、ip划分4.3、静态配置ip地址4.4、修改主机名4.5、部署k8s集群4.5.1、关闭防火墙和selinux4.5.2、升级系统4.5.3、每台主机都配置hosts文件&#xff0c;相互之间通过主机名互相访问4.5.4、…
阅读更多...
Rust---复合数据类型之枚举、数组

Rust---复合数据类型之枚举、数组

目录 枚举的使用Option 枚举数组的使用输出结果 枚举&#xff08;Enum&#xff09;&#xff1a;表示一个类型可以有多个不同的取值。枚举类型可以包含不同的变体&#xff08;variants&#xff09;&#xff0c;每个变体可以有不同的数据类型。 枚举的使用 enum Direction {Up,…
阅读更多...
Linux-Arm GDB调试（本地和远程）

Linux-Arm GDB调试（本地和远程）

目录 问题描述 已有coredump 没有coredump 小结 问题描述 Linux本机调试使用GDB非常方便&#xff0c;但嵌入式Linux设备资源有限&#xff0c;通常并没有交叉编译工具&#xff0c;那嵌入式设备上的应用发生问题如何查找问题&#xff1f;通常IDE有远程DEBUG功能&#xff0c;这…
阅读更多...
【计算机视觉】四篇基于Gaussian Splatting的SLAM论文对比

【计算机视觉】四篇基于Gaussian Splatting的SLAM论文对比

本文对比四篇论文&#xff1a; [1] Gaussian Splatting SLAM [2] SplaTAM: Splat, Track & Map 3D Gaussians for Dense RGB-D SLAM [3] Gaussian-SLAM: Photo-realistic Dense SLAM with Gaussian Splatting [4] GS-SLAM: Dense Visual SLAM with 3D Gaussian Splatting …
阅读更多...
MySQL数据库 数据库基本操作(一):数据库的认识与基本操作

MySQL数据库 数据库基本操作(一):数据库的认识与基本操作

1. 数据库的基本认识 1.1 什么是数据库 专家们设计出更加利于管理数据的软件——数据库&#xff0c;它能更有效的管理数据。数据库可以提供远程服务&#xff0c;即通过远程连接来使用数据库&#xff0c;因此也称为数据库服务器。 1.2 数据库的分类 数据库可以大体分为:关系…
阅读更多...
基于Python的简单颜色替换

基于Python的简单颜色替换

当我们临时需要改变一个照片的颜色&#xff0c;使其符合我们想要的主题色时&#xff0c;对于不会PS的我就只能使用一下Python来实现这个简单的过程 比如我想要中国农大农学院的院徽&#xff0c;但在官网上提取出来的图片是白色的 而我想要符合农学主题的绿色&#xff0c;将图片…
阅读更多...
产品经理知识地图：与NPDP国际资格认证知识体系相吻合的实践探索

产品经理知识地图：与NPDP国际资格认证知识体系相吻合的实践探索

在数字化时代的浪潮下&#xff0c;产品经理的角色愈发关键。作为连接市场、技术与用户的桥梁&#xff0c;产品经理需要拥有全面的知识体系与多元化的能力。本文旨在构建与NPDP产品经理国际资格认证知识体系相吻合的产品经理知识地图&#xff0c;并结合实际案例&#xff0c;探讨…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023