CSS学习记录02CSS基本选择器、层次选择器、伪类选择器、属性选择器

本文部分内容源自文章《css中什么是伪类选择器？伪类选择器的简要介绍》作者：青灯夜游和《CSS 元素选择器》

文章目录

- CSS学习记录02CSS基本选择器、层次选择器、伪类选择器、属性选择器
- - 2.1基本选择器
  - - 2.1.1标签选择器
    - 2.1.2类选择器
    - 2.1.3ID选择器
  - 2.2层次选择器
  - - 2.2.1后代选择器
    - 2.2.2子选择器
    - 2.2.3相邻兄弟选择器
    - 2.2.4通用选择器
  - 2.3伪类选择器
  - - 2.3.1动态伪类选择器
    - 2.3.2UI元素状态伪类选择器
    - 2.3.3结构伪类选择器
    - 2.3.4否定伪类选择器
  - 2.4属性选择器（常用）
  - - 2.4.1简单属性选择
    - 2.4.2根据具体属性值选择
    - 2.4.3根据部分属性值选择
    - - 2.4.3.1部分值属性选择器与点号类名记法的区别
      - 2.4.3.2子串匹配属性选择器
      - 2.4.3.3特定属性选择类型

CSS学习记录02CSS基本选择器、层次选择器、伪类选择器、属性选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

2.1.1标签选择器

标签选择器会选择页面上所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1 {color: red;background: #3cbda6;border-radius: 5px;}p {font-size: 50px;}</style>
</head>
<body><h1>学Java</h1>
<h1>学Java</h1>
<p>看视频课</p></body>
</html>

在这里插入图片描述

其中：

border-radius：圆角边框

border-radius:2em;等价于
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 2em 1em 4em / 0.5em 3em;等价于
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

2.1.2类选择器

引例：
给三个一级标题设置不同颜色
如果用标签选择器，显然是不行的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1{color: cornflowerblue;}</style>
</head>
<body><h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1></body>
</html>

在这里插入图片描述
这时候，就需要类选择器出场了：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.bt1 {color: cornflowerblue;}.bt2 {color: red;}.bt3 {color: blueviolet;}</style>
</head>
<body><h1 class="bt1">标题1</h1>
<h1 class="bt2">标题2</h1>
<h1 class="bt3">标题3</h1></body>
</html>

在这里插入图片描述
用<h1 class:“XXX”>设置类名称，在style中设置样式时，用”.类名"的方式单独设置某一个class属性的颜色，即类选择器选择所有class属性一致的标签设置样式，且可跨标签使用。

解释跨标签使用：
在上述类选择器代码中：

<h1 class="bt1">标题1</h1>
<p class="bt1">标题2</p>
<h1 class="bt3">标题3</h1>

在这里插入图片描述
h1标签和p标签共用一个class属性是可以的。

用法简要归纳：

<style>.类名1 {类名1的样式}.类名2 {类名2的样式}.类名3 {类名3的样式}</style><h1 class="类名1">标题1</h1>
<h1 class="类名2">标题2</h1>
<h1 class="类名3">标题3</h1>

优势：

可以多个标签归类（设置同一个class）

2.1.3ID选择器

顾名思义：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#bt1 {color: brown;}#bt2 {color: red;}#bt3 {color: crimson;}</style>
</head>
<body><h1 id="bt1">标题1</h1>
<h1 id="bt2">标题2</h1>
<h1 id="bt3">标题3</h1></body>
</html>

用法简要归纳：

<style>#id名1 {类名1的样式}#id名2 {类名2的样式}#id名3 {类名3的样式}</style><h1 id="id名1">标题1</h1>
<h1 id="id名2">标题2</h1>
<h1 id="id名3">标题3</h1>

注意：

id必须保证全局唯一！不可复用！
不遵循就近原则，优先级为：id选择器>class选择器>标签选择器

2.2层次选择器

2.2.1后代选择器

在某个元素的后面
例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*后代选择器*/body p{background: red;}</style>
</head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li></ul></body>
</html>

在这里插入图片描述

其中，body p{}指设置"body"后的所有p标签。

2.2.2子选择器

只设置一代

<style>/*子选择器*/body>p{background: green;}</style>

在这里插入图片描述
只有"body"后的第一代p标签才被有效设置。

2.2.3相邻兄弟选择器

顾名思义，同辈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*兄弟选择器*/.active + p {background: deeppink;}</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul>
<p class="active">p7</p>
<p>p8</p></body>
</html>

在这里插入图片描述

其中"p2"是"p1"的相邻兄弟（向下顺延），“p8"是"p7"的相邻兄弟（向下顺延），所以"p2”、"p8"被有效设置，"p0"因其为"p1"的向上相邻而非向下，故不被有效设置。

2.2.4通用选择器

<style>/*通用选择器*/.active ~ p {background: deeppink;}</style>

在这里插入图片描述
即，相对于相邻兄弟选择器，多了其本身。

2.3伪类选择器

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
伪类选择器主要可以分为：动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。

2.3.1动态伪类选择器

语法	解释
E:link	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active	选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover	选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus	选择匹配的E元素，而且匹配元素获取焦点

a标签有4种伪类（即对应四种状态），如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。

例：

/*让超链接点击之前是红色*/
a:link {color: red;}/*让超链接点击之后是橙色*/
a:visited {color: orange;}/*鼠标悬停，放到标签上的时候是绿色*/
a:hover {color: green;}/*鼠标点击链接，但是不松手的时候*/
a:active {color: black;}

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。所以，a标签的这四种伪类选择器的顺序为：a:link ，a:visited，a:hover ，a:active

2.3.2UI元素状态伪类选择器

语法	解释
E:checked	匹配选中的复选按钮或者单选按钮表单元素
E:enabled	匹配所有启用的表单元素
E:disabled	匹配所有禁用的表单元素

UI元素状态伪类选择器主要是针对于HTML中的Form元素进行操作，最常见的比如我们"type="text"有enable和disabled两种状态，前者为可写状态后者为不可状态；另外"type="radio"和"type=“checkbox”"有"checked"和"unchecked"两种状态。来看两个实例，比如说你想将"disabled"的文本框与别的文本框区别出来，你就可以这样应用：

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

注意：IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

2.3.3结构伪类选择器

语法	解释
E:fisrt-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-tye	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul的第一个子元素*/ul li:first-child {background: crimson;}/*ul的最后一个子元素*/ul li:last-child {background: #3cbda6;}</style>
</head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>

在这里插入图片描述
规定属于其父元素的第一个子元素的每个 p 的背景色：

/*选中p1：定位到父元素，选择当前的第一个元素*/p:nth-child(1){background: blueviolet;}

解释：
第一步：定位p的父元素（p的第一个作用）
第二步：定位父元素下的第一个元素（数字的作用）
第三步：判断这第一个元素是否为p，若为p则改变样式，否则无效

选择父元素里第二个类型为p的元素，设置为黄色背景：

p:nth-last-of-type(2) {background: yellow;}

在这里插入图片描述

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
结构伪类选择器很容易遭到误解，需要特别强调。如：
input:not([type="submit"]) {border: 1px solid red;}
它表示的是：选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

2.3.4否定伪类选择器

语法	解释
E:not(F)	匹配所有除元素F外的E元素

例：对form中所有input加边框，但又不想submit也起变化，就可以这样写：

input:not([type="submit"]) {border: 1px solid red;}

2.4属性选择器（常用）

属性选择器可以根据元素的属性及属性值来选择元素。
可以理解为id + class
一些随心的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #3cbda6;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 属性名.  属性名 = 属性值（正则）*//*存在id属性的元素     a[]{}*//*a[id]{*//*    background: yellow;*//*}*//*id=first的元素*//*a[id=first]{*//*    background: blueviolet;*//*}*//*class中含有“links”的元素*//*a[class*="links"]{*//*    background: crimson;*//*}*//*选中href中以http开头的元素*//*a[href^=http]{*//*    background: chartreuse;*//*}*//*href中以pdf结尾的元素*//*a[href$=pdf]{*//*    background: darkblue;*//*}*/</style></head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="first">1</a><a href="" class="links item first" target="_blank" title="test">2</a><a href="images/1223.html" class="links item">3</a><a href="images/1223.jpg" class="links item">4</a><a href="images/123.png" class="links item">5</a><a href="abc" class="links item">6</a><a href="/abc.doc" class="links item">7</a><a href="/abc.doc" class="links item">8</a><a href="/abc.pdf" class="links item">9</a><a href="asc.pdf" class="links item last">10</a>
</p></body>
</html>

注：
以下内容来自文章《CSS 属性选择器详解》，部分示例代码可在线查看效果，也推荐收藏该网站，对CSS的学习有不可小觑的帮助。

2.4.1简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

例子 4
可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

提示：上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

例子 5：为 XML 文档使用属性选择器
属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

2.4.2根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例子 1
例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例子 2
与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

<a href="http://www.w3school.com.cn/" title="W3School">W3School</a>
<a href="http://www.w3school.com.cn/css/" title="CSS">CSS</a>
<a href="http://www.w3school.com.cn/html/" title="HTML">HTML</a>

例子 3
同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

2.4.3根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

如果忽略了波浪号，则说明需要完成完全值匹配。

2.4.3.1部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 “~=” 属性选择器呢？因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 “Figure” 的所有图像。没有 title 属性或者 title 属性中不包含 “Figure” 的图像都不会匹配。

2.4.3.2子串匹配属性选择器

下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。

类型	描述
[abc^=“def”]	选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”]	选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]	选择 abc 属性值中包含子串 “def” 的所有元素

举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

提示：任何属性都可以使用这些选择器。

2.4.3.3特定属性选择类型

例子：

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

当然，这种属性选择器最常见的用途还是匹配语言值。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

第二届BMZCTF公开赛CRYPTO的DO_YOU_KNOW_IT
第二届BMZCTF公开赛CRYPTO的DO_YOU_KNOW_IT . . 下载附件后是一张图片，图片内容看起来像数学符号，后来查了资料后发现是 latex 数学符号，与latex 结合的密码学，长见识了： . . 用在线 latex 编辑器来识别图片转成 lat…...
2024/5/7 20:55:21
尿囊素的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告
本文研究全球与中国市场尿囊素的发展现状及未来发展趋势，分别从生产和消费的角度分析尿囊素的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场…...
2024/5/8 1:26:48
LTDC-DMA2D液晶显示代码详解（二）
使用以下结构体的具体原理需要参考LTDC-DMA2D液晶显示（一） 一、LTDC初始化结构体 typedef struct {uint32_t LTDC_HSPolarity; //配置行同步信号HSYNC的极性 uint32_t LTDC_VSPolarity; //配置垂直同步信号VSYNC的极性 …...
2024/5/8 0:04:52
2022-2028年全球与中国实验室餐具行业发展趋势及投资战略分析
本文研究全球与中国市场实验室餐具的发展现状及未来发展趋势，分别从生产和消费的角度分析实验室餐具的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产…...
2024/4/27 0:45:50
51独立按键基础实验（失败）
实验原理： 按键包含四个管脚，初始13、24导通，而12、34不导通，当按键按下时12、34导通，类似于开关的结构。按键未按下时电压信号为高电平，当按键按下时电压信号为低电平。由于机械开关的的按动会出现“抖…...
2024/5/7 18:03:13
算法训练——剑指offer(动态规划算法)
摘要一、动态规划原理与解题方法二、动态规划算法练习题目 2.1 台阶问题 2.2 股票问题 2.3 小偷问题 2.4 连续数组最大和问题 2.5 礼物最大问题 2.6 最长子串问题 2.7 数字翻译字符串 2.8 斐波那契数列博文参考...
2024/4/14 20:31:26
day21 2022/02/03
昨天晚上给自己定的目标今天只完成了一个项目，还得是今天上午从七点开始的，断断续续一上午都在自己的房间没下楼。 python跟着的那个课程终于结束了，还是要对自己狠心一点做事效率才提升上了本来打算睡觉，可是还是睡不着&#xf…...
2024/4/19 1:01:51
多元函数微分学
1.多元函数二元函数其实就可以想象成一个曲面比如这个曲面的方程是一个二元函数：Z(X−Y)(XY)Z (X-Y)(XY)Z(X−Y)(XY)横切，纵切，（固定X或Y）那个横截线就是一元函数 2.极限、连续极限类比一元函数的极限&#xff0c…...
2024/5/7 18:54:16
第五章第六章作业
1. 定义一个函数实现反响输出一个整数。比如：输入3245，输出5432. def reverse(a,b,c,d):print(d,c,b,a)reverse(3,2,4,5) 2. 编写一个函数，计算下面的数列： sum 0def m(n):for i in range(n1):sum (i/(i1))print(m(n),sum) 3.…...
2024/5/8 2:41:29
xss-labs搭建及通关攻略
目录 xss-labs搭建 xss-labs通关攻略 level-1 level-2 level-3~level-4 level-5 level-6 level-7 level-8 level-9 level-10 level-11~level-13 level-14 level-15 level-16 level-17~level-18 level-19~level-20 xss-labs搭建 （1）首…...
2024/5/7 16:11:45
2022年2月3日
可变参数在方法声明中，在指定参数类型后加一个省略号（…）一个方法只能指定一个可变参数，它必须是方法的最后一个参数。任何普通的参数必须在它之前声明。 public class Demo_6 {public static void main(String[] args) {//可变…...
2024/5/8 3:39:25
React项目踩坑——“XXX“不是JXS元素 “XXX“缺少类型“ElementClass”中的以下属性：context、setState、props和其他2个属性。
项目场景： 最近在做一个React项目，是在Typescript基础上开发的。问题描述： 在.tsx文件中引入AntDesign后使用Input、Button等组件时出现了诸如“Input不是JXS元素 "Input"缺少类型“ElementClass”中的以下属性：conte…...
2024/5/7 22:05:09
MyBatis-plus 自动填充MetaObjectHandler不生效问题
背景在项目中经常遇到一些数据需要自动填充，填充方法都是同一种规则，例如创建时间等。 1 自动填充方法配置 1.1 实体类添加注解 1.2 在handler包下实现元对象处理器接口 import com.baomidou.mybatisplus.core.handlers.MetaObjectHandler; import o…...
2024/5/7 23:31:03
java中HashMap总结
文章目录基本数据结构树化与退化索引计算put 与扩容并发问题key 的设计String 对象的 hashCode() 设计基本数据结构 1.7 数组链表1.8 数组 （链表 | 红黑树） 树化与退化树化意义红黑树用来避免 DoS 攻击，防止链表超长时性能下降&…...
2024/5/7 21:45:20
鸡尾酒疗法python
描述鸡尾酒疗法，原指“高效抗逆转录病毒治疗”（HAART），由美籍华裔科学家何大一于1996年提出，是通过三种或三种以上的抗病毒药物联合使用来治疗艾滋病。该疗法的应用可以减少单一用药产生的抗药性，最大限…...
2024/4/13 17:33:10
PX4从放弃到精通（十一）：混控及PWM输出
文章目录前言一、混控脚本1.控制输入组2.混控脚本的语法二、混控器代码解析1.执行器抗饱和2.多旋翼混控3.直升机混控4.简单累加混控三、PWM输出代码解析前言一个人可以走的更快，一群人才能走的更远，交流学习加qq:2096723956 更多保姆级PX4ROS学习视频&…...
2024/4/30 11:37:31
和YOYO表白
小爱连续对话闲来无事和YOYO聊天，还是俗套的开场，虽然很俗，但是这个不重要，主要是为了进行表白，我鼓起勇气问她，做我女朋友吧，…呃，她温柔的拒绝了我。我觉得这应该不是她真实的想…...
2024/4/28 13:21:44
使用HttpContext.SignInAsync实现简单的授权
1. 将认证添加到服务中 builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(options >{//登入地址options.LoginPath "/Account/FcbLogin/";//登出地址options.LogoutPath "/Account/FcbLogout/";//…...
2024/4/13 17:33:00
算法入门第四天：LeetCode121. 买卖股票（含有详细注释）
LeetCode121. 买卖股票的最佳时机给定一个数组 prices ，它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖出该股票。设计一个算法来计算你所能获取的最大利润。返回你…...
2024/5/2 20:48:03
【源码】Spring源码解析（一）IOC容器_ClassPathXmlApplicationContext启动
文章目录前言在开始分析Spring源码之前我们需要进行几项准备工作。BeanFactory抽象结构BeanFactory 接口ListableBeanFactory 接口HierarchicalBeanFactory 接口AutowireCapableBeanFactory 接口ConfigurableBeanFactory 接口ConfigurableListableBeanFactory 接口Spring源码合…...
2024/4/20 15:55:25

CSS学习记录02CSS基本选择器、层次选择器、伪类选择器、属性选择器

文章目录

CSS学习记录02CSS基本选择器、层次选择器、伪类选择器、属性选择器

2.1基本选择器

2.1.1标签选择器

2.1.2类选择器

2.1.3ID选择器

2.2层次选择器

2.2.1后代选择器

2.2.2子选择器

2.2.3相邻兄弟选择器

2.2.4通用选择器

2.3伪类选择器

2.3.1动态伪类选择器

2.3.2UI元素状态伪类选择器

2.3.3结构伪类选择器

2.3.4否定伪类选择器

2.4属性选择器（常用）

2.4.1简单属性选择

2.4.2根据具体属性值选择

2.4.3根据部分属性值选择

2.4.3.1部分值属性选择器与点号类名记法的区别

2.4.3.2子串匹配属性选择器

2.4.3.3特定属性选择类型

相关文章

最新文章