【CSS】CSS 选择器

CSS 选择器

1.基础选择器

1.1 元素选择器

语法:标签名{...}

元素选择器会选中对应标签名的HTML元素,例如:p{...}div{...}span{...}

1.2 类选择器

语法:.类名{...}

类选择器会选中class属性为指定类名的HTML元素,例如:

<div class="div1">test</div>.div1 {...;
}

需要注意的是,HTML元素的class属性值不能以数字开头,如果要以符号开头,只能为_-。同时,一个元素的class属性中可以有多个属性值,意味着其可以被多个类选择器选中!

1.3 id选择器

语法:#id属性值{...}

id选择器会选中id属性为指定值的HTML元素,例如:

<div id="div1">test</div>#div1 {...;
}

与类不同,HTML元素的id属性只能有一个!

1.4 通配符选择器

语法:*{...}

通配符选择器会选中页面中的所有HTML元素,并对所有元素都执行其中的样式,一般可以用来清除间距。

2.群组选择器

语法:

选择器1,选择器2,选择器3,...{...;
}

群组选择器会同时选中多个选择器对应的元素!例如:

<div>盒子1</div>
<p>段落1</p>
<p>段落2</p>
<h3>文本标题3</h3>
<h3 class="text3">文本标题3</h3>
<ol><li>有序列表</li><li class="li2">有序列表</li><li>有序列表</li>
</ol><style>div,p,h3,.li2{font-size: 30px;}div,.li2,.text3{color: red;}p{color: blue;}h3{color: pink;}
</style>

最终的效果为:
在这里插入图片描述

群组选择器一般用于简化代码,可以将对多个元素的统一操作放在一个群组选择器中,

3.关系选择器

3.1 后代选择器

后代选择器也叫包含选择器,即祖先元素直接或间接地包含后代元素。

语法:

选择器1 选择器2 选择器3 ...{...;
}

下面看两个例子:

<div class="box"><p>0000</p><div><p>11111</p><p>22222</p></div><div class="box2"><p>333</p></div><p>444</p>
</div><style>.box p{width: 200px;height: 200px;background-color: yellow;} 
</style>

效果如下:
在这里插入图片描述

可以看到,此时选中的是 box 类下的所有 p 元素!即使是 box 类的子类 box1 中的 p 元素也被选中了。

再来看第二个例子:

<div class="box"><p>0000</p><div><p>11111</p><p>22222</p></div><div class="box2"><p>333</p></div><p>444</p>
</div><style>.box div p {width: 200px;height: 200px;background-color: yellow;}
</style>

效果如下:

在这里插入图片描述

可以看到,此时选中的是 box 类下的所有 div 元素中的 所有 p 元素!

3.2 子代选择器

语法:

选择器1>选择器2{...;
}

子代选择器与后代选择器的区别在于:子代选择器要求父元素直接而非间接地包含子元素

看下面这个例子:

<div class="box"><p>0000</p><div><p>11111</p><p>22222</p></div><div class="box2"><p>333</p></div><p>444</p>
</div><style>.box>p{width: 200px;height: 200px;background-color: yellow;} 
</style>

效果如下:

在这里插入图片描述

可以看到,此时只选中了 box 类下直接包含的所有 p 元素,而对于间接包含的,例如:box 类下的 div 中包含的所有 p 元素;box 类下的 box2 类中包含的所有 p 元素,则均未选中!

再来看下面这个例子:

<div class="box"><p>0000</p><div><p>11111</p><p>22222</p></div><div class="box2"><p>333</p></div><p>444</p>
</div><style>.box>div>p{width: 200px;height: 200px;background-color: yellow;}
</style>

效果如下:

在这里插入图片描述

可以看到此时选中的是 box 类下的所有 div 元素中包含的所有 p 元素。

3.3 相邻兄弟选择器

语法:

选择器1+选择器2{...;
}

其效果不方便用文字描述,看下面这个例子:

<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div><p>44444</p>
</div>
<p>5555</p>

在以上的HTML代码中,除了内容为 “4444” 的 p 标签,其他所有元素均为兄弟元素。那么什么叫做相邻兄弟元素呢?实际上就是两个紧挨着的兄弟元素

下面给以上HTML代码添加样式:

<style>.box+p{width: 200px;height: 200px;background-color: yellow;}
</style>

效果如下:

在这里插入图片描述

可以看到,此时选中的是 box 类的相邻兄弟元素,即内容为 “111” 的 p 元素。

那么如果我们再加上一个+呢?

<style>.box+p+p{width: 200px;height: 200px;background-color: yellow;}
</style>

会变成下面的样子:
在这里插入图片描述

即选中了 box 类的相邻兄弟元素的相邻兄弟元素,也就是内容为 “222” 的 p 元素!

如果进一步嵌套,则会继续向后选中。

实际上,此时的 CSS 选择器可以理解为:(.box+p)+p,即其实际上仍是两个选择器,只不过第一个选择器是一个嵌套罢了。这样的嵌套在实际使用中是十分常见的。

3.4 通用兄弟选择器

语法:

选择器1~选择器2{...;
}

同样是上面那个例子:

<p>000</p>
<div class="box">盒子1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div><p>44444</p>
</div>
<p>5555</p>

为其添加以下样式:

<style>.box~p{width: 200px;height: 200px;background-color: yellow;}
</style>

效果如下:
在这里插入图片描述

可以看到,此时选中的是所有 box 类后面所有的兄弟 p 元素!所以,通用兄弟选择器的效果是:选中选择器1对应元素后面的所有对应选择器2的兄弟元素

另外,需要注意的是,相邻兄弟选择器和通用兄弟选择器是可以结合在一起使用的!比如对于上面的例子,我们想要单独修改内容为 “5555” 的 p 元素的样式,那么我们可以使用下面的 CSS 代码实现:

<style>.box~div+p{width: 200px;height: 200px;background-color: yellow;}
</style>

效果如下:
在这里插入图片描述

4.属性选择器

属性选择器一共有以下7种写法:

  1. 选择器[属性名]
  2. 选择器[属性名 = 属性值]
  3. 选择器[属性名 ^= 属性值]
  4. 选择器[属性名 $= 属性值]
  5. 选择器[属性名 *= 属性值]
  6. 选择器[属性名 ~= 属性值]
  7. 选择器[属性名 |= 属性值]

下面用一个例子,来说明这7种写法各自的效果:

<div class="demo"><a href="http://www.baidu.com" target="_blank" class="li nks item first" id="first" title="link">1</a><a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a><a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a><a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a><a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a><a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a><a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a><a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a><a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a><a href="abd.doc" class="linksitem last" id="last">10</a>
</div><style>.demo {width: 300px;border: 1px solid #ccc;padding: 10px;overflow: hidden;margin: 20px auto;}.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: blue;font: bold 20px/50px Arial;margin-right: 5px;text-decoration: none;margin: 5px;}
</style>

以上是基本样式,效果如下:

在这里插入图片描述

下面按照每一种写法,向其中添加样式。

4.1 写法1:选择器[属性名]

添加如下样式:

a[title]{background: yellow;
}

效果如下:

在这里插入图片描述

即此时选中的是所有身上有title属性的 a 标签!

如果添加以下样式:

a[lang][target]{background: yellow;
}

效果如下:

在这里插入图片描述

此时选中的是所有身上同时拥有lang属性和target属性的 a 标签!

4.2 写法2:选择器[属性名 = 属性值] — 重点

向其中添加以下样式:

a[lang="zh"]{background: yellow;
}

效果如下:

在这里插入图片描述

此时选中的是身上lang属性值为 “zh” 的所有 a 标签!注意这里属性值必须为一模一样,多一个字符、一个空格都不会被选中。

当然,前面的选择器也不是只能指定标签,同样也可以指定类、id,甚至可以使用上面的群组选择器、关系选择器等

例如向其中添加以下样式:

/* 选中类为item,身上的lang属性值为 "zh-cn" 的元素 */
.item[lang="zh-cn"]{background: yellow;
}
/* 选中id为last,身上配置了title属性,且身上的lang属性值为 "zh-cn" 的元素 */
#last[title][class="links"]{background: yellow;
}

效果如下:

在这里插入图片描述

此时,选择器.item[lang="zh-cn"]选中了3,而选择器#last[title][class="links"]未能选中,因为此时不存在class属性仅为 “links” 的元素!

4.3 写法3:选择器[属性名 ^= 属性值]

添加以下样式:

a[class^="li "]{ /* 注意这里有一个空格! */background-color: yellow;
}

效果如下:

在这里插入图片描述

此时选中的是身上class属性的值以 "li " 开头的所有 a 标签,而其他class属性以 “li” 开头的 a 标签则未被选中,即这里^=运算符匹配时也会匹配空格!

但需要注意的是,在实际开发中,若元素的class属性值前面有空格,此时这个空格是可能会被自动去掉的!所以使用^=运算符匹配时尽量不要去匹配前面带空格的值,可能会导致无法选中。

例如:

<a class=" links item first">1</a><style>a[class^=" li"]{background-color: yellow;}
</style>

此时是无法选中 a 标签的!

4.4 写法4:选择器[属性名 $= 属性值]

添加以下样式:

a[href$=".pdf"]{background-color: yellow;
}
a[href$=".doc"]{background-color: red;
}
a[href$=".png"]{background-color: green;
}

效果如下:

在这里插入图片描述

此时首先选中了身上href属性以 “.pdf” 结尾的 a 标签,即7、8,将其背景色置为黄色;然后选中了身上href属性以 “.doc” 结尾的 a 标签,即9、10,将其背景色置为红色;最后选中了身上href属性以 “.png” 结尾的 a 标签,即4,将其背景色置为绿色。

$=运算符的作用是匹配结尾的字符

4.5 写法5:选择器[属性名 *= 属性值]

添加以下样式:

a[href*="b"]{background-color: green;
}

效果如下:

在这里插入图片描述

此时选中的是身上href属性值中包含 “b” 的 a 标签!即,*=运算符的作用是与整个字符串进行匹配,只要包含目标字符,则为true

4.6 写法6:选择器[属性名 ~= 属性值]

添加以下样式:

a[class~="item"]{background-color: green;
}

效果如下:

在这里插入图片描述

此时选中的是身上class属性值中包含单独且完整的 “item” 的所有 a 标签。

什么叫单独且完整?当一个元素属于多个类时,其身上的class属性是这样的:

<a class="class1 class2 class3">2</a>

此时其身上单独且完整的类就有class1class2class3。此时 CSS 选择器a[class~="class1"]就可以选中该元素,而当一个元素身上的class属性为下面这样时:

<a class="clas s1class2 class3">2</a>

此时其身上单独且完整的类为class1class2class3。此时 CSS 选择器a[class~="class1"]就无法选中该元素!

对应上面的例子,元素8、10身上的class属性值均为 “linksitem”,这是一个单独的类,所以无法选中这两个元素。

真正来说,出现这种情况是因为,此时的~=运算符不再是像前面几种写法中的运算符一样是字符串匹配了,而是与元素身上的某个属性的多个值进行匹配

4.7 写法7:选择器[属性名 |= 属性值]

添加以下样式:

a[title|="link"]{background-color: green;
}

效果如下:

在这里插入图片描述

此时选中的是身上title属性值中只有1个是 “link” 的或者属性值有多个但是得是 “link-” 开头的所有 a 标签。

具体来说|=运算符的匹配:

  • 当元素该属性值只有一个时,其值必须是指定的值
  • 当元素该属性的值有多个时,该属性值开头必须为 “指定值-” 的形式。(注意此时为字符串匹配!)

5.伪类选择器

5.1 常用的伪类选择器1

  1. :first-child第一个子元素
  2. :last-child最后一个子元素
  3. :nth-child()选中括号中指定的元素,这里的括号内可以填入以下内容
    • n — 第n个元素,n的范围是从0到正无穷,正无穷代表全选。
    • even2n — 选中偶数位的元素
    • odd2n+1 — 选中奇数位的元素

注意:以 child 结尾的是在所有元素中选择!

用一个例子来理解:

<ul class="box"><p>1111</p><p>222</p><li>无序列表的li1</li><p>33333</p><li>无序列表的li2</li><li>无序列表的li3</li><p>44444</p><li>无序列表的li4</li><p>555</p><li>无序列表的li5</li><p>666</p>
</ul>

先来试试:first-child,下面为其添加样式:

.box   :first-child{border: 2px solid blue;
}

效果如下:

在这里插入图片描述

此时选中的为 box 类下的第一个子元素,即内容为 “1111” 的 p 元素。

如果添加下面的样式:

.box   li:first-child{border: 2px solid blue;
}

此时不会选中任何元素,因为此时效果是 box 类下的第一个子元素为 li 标签时,其中的样式才会生效。

如果将 li 换成 p:

.box   p:first-child{border: 2px solid blue;
}

效果如下:

在这里插入图片描述

此时则可以选中元素。

接下来是:last-child,其使用方法与:first-child是完全相同的,只不过其判断的是最后一个子元素。

/* 根据上面的结果,可以知道,此时的效果是当最后一个子元素为p元素时,将样式作用到其身上 */
.box   p:last-child{border: 2px solid blue;
}

效果如下:

在这里插入图片描述

然后是:nth-child()。其同样有和上面一样的使用方法:

/* 选中box类下的第三个子元素 */
.box  :nth-child(3){border: 2px solid blue;
}/* 当box类下的第七个子元素为p元素时,将样式应用到其身上 */
.box  p:nth-child(7){border: 2px solid red;
}

效果如下:
在这里插入图片描述

:nth-child()的括号中不仅仅能填入数字,还有一些特殊用法,在使用之前,首先要知道,下面的所有 n 指代的是一个从0开始的数列

/*n 为从0开始的数列,所以 n+3 指代的是第3、4、5、6、7...个子元素
*/
.box  :nth-child(n+3){border: 2px solid blue;
}

效果如下:
在这里插入图片描述

可以看到从第三个子元素开始往后的所有元素均被选中!

同样其也可以判断元素的标签类型

/* 即box下的第3、4、5、6...个子元素为li时,将样式应用到它们身上 */
.box  li:nth-child(n+3){border: 2px solid blue;
}

效果如下:
在这里插入图片描述

甚至,n 的前面还可以加上负号:

/* n=0 -n=0 -n+3=3n=1 -n=-1 -n+3=2n=2 -n=-2 -n+3=1n=3 -n=-3 -n+3=0...所以此时选中的是box下的第3、2、1个子元素
*/
.box  :nth-child(-n+3){border: 2px solid blue;
}

效果如下:
在这里插入图片描述

还可以指定偶数和奇数:

/* 此时选中的是box里面的第2,4,6,8,10,12....个为li标签的元素,将样式应用到它们身上 */
.box li:nth-child(2n){border: 2px solid blue;
}/* 当然选中第偶数个元素也可以直接用 even,其和2n是一样的 */
.box li:nth-child(even){border: 2px solid blue;
}

效果如下:

在这里插入图片描述

指定奇数:

/* 此时选中的是box下的所有奇数子元素 */
.box :nth-child(2n+1){border: 2px solid blue;
}
/* 奇数也可以用 odd 来指定 */
.box :nth-child(odd){border: 2px solid blue;
}

效果如下:
在这里插入图片描述

当然,并不是只能按上述几种固定的方式使用,我们可以自己定义,同时还可以搭配前面的:first-child:last-child一起使用!

/* 此时选中的是第5、7、9...个子元素 */
.box :nth-child(2n+5){border: 2px solid blue;
}
/* 此时选中的是从后数,第2、4、6、8...个子元素 */
.box :nth-last-child(2n){border: 2px solid blue;
}

5.2 常用的伪类选择器2

  1. :first-of-type第一个子元素
  2. :last-of-type最后一个子元素
  3. :nth-of-type()选中括号中指定的元素,这里的括号内可以填入以下内容
    • n — 第n个元素,n的范围是从0到正无穷,正无穷代表全选。
    • even2n — 选中偶数位的元素
    • odd2n+1 — 选中奇数位的元素

注意:以 type 结尾的是在相同元素中选择!

其具体的使用与前一节中一样,这里仅给出几个例子,用于理解其与 -child 结尾的伪类选择器的区别。

.box  :first-of-type{border: 2px solid blue;
}

效果如下:
在这里插入图片描述

可以看到,box 类下的第一个 p 元素和第一个 li 元素均被选中!

为什么?从结构上看,box 类的下面有两个类型:p 标签和 ul 标签,所以是选中这两类中的第一个元素。

这里就体现了与 -child 的选择器的区别:-child 选择器是看父元素下的所有子元素,而 -type 选择器则是看父元素下的同类型的子元素。打个比方,-child 选择器是从一个班级内的所有学生中进行筛选,而 -type 选择器则是从班级内的所有女生、所有男生中进行筛选。

那么既然是同类型,自然能够指定类型:

/* box下的所有p元素中的最后一个 */
.box  p:last-of-type{border: 2px solid blue;
}
/* box下的所有li元素中的第偶数个 */
.box li:nth-of-type(2n){border: 2px solid red;
}

效果如下:
在这里插入图片描述

5.3 否定伪类

:not() — 将符合条件的元素排除

例:

<div class="test"><p>1111</p><p>2222</p><p>3333</p><p>4444</p>
</div>

添加如下样式:

.test {margin: 10px 10px 10px 10px;:not(:first-of-type):not(:last-child){color: red;}
}

效果如下:
在这里插入图片描述

所以,这个选择器的效果就是,排除相同类型中的第一个,然后再排除 test 下的最后一个子元素!

5.4 元素的伪类

  • :link — 表示未访问过的a标签
  • :visited — 表示访问过的a标签

以上两个伪类是超链接所独有的!另外,由于隐私的问题,所以:visited这个伪类只能修改链接的颜色。

以下两个伪类是所有标签都可以使用:

  • :hover — 鼠标移入后,元素的状态
  • :active — 鼠标点击后,元素的状态

6.伪元素选择器

与伪类一样,伪元素也是不存在的元素,其代表了元素的特殊状态。

常见的几个伪元素:

  • ::first-letter — 表示第一个字母
  • ::first-line — 表示第一行
  • ::selection — 表示选中的元素
  • ::before — 元素开始的位置前
  • ::after — 元素结束的位置后

befor和after必须配合content一起使用(before,after所写的内容无法选中且永远在最前和最后)

下面给出几个例子帮助理解。

对于下面的HTML结构:

<div class="test"><p>hello hello hello hello</p><p>world,我们要相信明天会更好。</p>
</div>

添加如下样式:

/* 让文字的首字母一直为字体为24px */
p::first-letter {font-size: 24px;
}
/* 让文字的第一行添加背景色灰色 */
p::first-line {background-color: #ccc;
}

效果如下:
在这里插入图片描述

添加如下样式:

 /* 让选中的内容,字体为绿色(此时鼠标选中 "我们")*/
::selection{color: red;
}
/* 在元素开始的位置前+'你好' */
p::before{content: '你好';color:red
}

效果如下:
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

配置两台数据库为主从数据库模式

一、主库配置 1、修改配置文件 /etc/my3306.cnf #mysql服务ID&#xff0c;保证整个集群环境中唯一&#xff0c;默认为1server-id1#是否只读&#xff0c;1代表只读&#xff0c;0代表读写read-only0#忽略的数据&#xff0c;指不需要同步的数据库#binlog-ignore-dbmysql#指定同步…

OSPF作业3

题目 地址配置 R1&#xff1a; R2&#xff1a; R3&#xff1a; R4&#xff1a; R5&#xff1a; R6&#xff1a; R7&#xff1a; R8&#xff1a; R9&#xff1a; R10&#xff1a; R11&#xff1a; R12&#xff1a; 私网通及LSDB优化 R1&#xff1a; ospf 1 router-id 1.1.1.1 …

基于Matlab实现图像拼接技术(附上完整源码+图像)

图像拼接是数字图像处理中一个重要的问题&#xff0c;它的目标是将多张图像拼接成一张更大的图像。图像拼接技术在许多领域中都有广泛的应用&#xff0c;如全景图像拼接、医学图像拼接、遥感图像拼接等。 本文将介绍一种基于Matlab实现的图像拼接技术&#xff0c;即基于特征匹…

【图论】强连通分量进阶

一.作用 强连通分量可以判断环和进行缩点。还有一系列作用.... 这篇文章介绍缩点 二.题目 https://www.luogu.com.cn/problem/P2341 三.思路 我们分析可以知道当一个点没有出度时&#xff0c;则为最受欢迎的牛。但如果有多个出度&#xff0c;则没有最受欢迎的牛。 这是只有…

AcWing 93:递归实现组合型枚举 ← DFS

【题目来源】https://www.acwing.com/problem/content/95/【题目描述】 从 1∼n 这 n 个整数中随机选出 m 个&#xff0c;输出所有可能的选择方案。【输入格式】 两个整数 n&#xff0c;m&#xff0c;在同一行用空格隔开。【输出格式】 按照从小到大的顺序输出所有方案&#xf…

python多任务笔记

多任务介绍 在现实生活中&#xff0c;有很多的场景中的事情是同时进行的&#xff0c;比如跳舞和唱歌是同时进行的。 在程序中&#xff0c;可以使用代码来模拟唱歌和跳舞的功能&#xff1a; from time import sleep def sing(): for i in range(3): print("正在唱歌...…

win10 安装 tensorflow-gpu 2.10.0

win10 安装 tensorflow-gpu 2.10.0 系统配置 系统 win10 x64 显卡 GTX 1660 Ti CUDA 12.2 cudnn 8.9 查看版本对应&#xff1a; https://tensorflow.google.cn/install/source_windows#gpu VersionPython versionCompilerBuild toolscuDNNCUDAtensorflow_gpu-2.10.03.7-3.…

为独立服务器增加安全性的简单步骤

为独立服务器增加安全性的简单步骤 马上注册成为ROSABC会员&#xff0c;随时发帖回复。 您需要 登录 才可以下载或查看&#xff0c;没有账号&#xff1f;会员注册 x 独立服务器是您业务的中心&#xff0c;它需要尽可能的安全。对企业中心的攻击可能会导致您失去知识产权&…

【TypeScript】交叉类型联合类型(四)

【TypeScript】交叉类型&联合类型&#xff08;四&#xff09; 【TypeScript】交叉类型&联合类型&#xff08;四&#xff09;一、简介二、交叉类型2.1 交叉类型使用的注意点2.2 基本数据类型交叉2.3 对象类型交叉 三、联合类型四、类型缩减 一、简介 TypeScript 中的交…

[英语单词] password, passphrase, passport.... paraphrase

password 是密码&#xff0c;大多可能就是一个单词的量&#xff0c;10多个字母&#xff0c;或者更少&#xff1b;而且就是一个单词&#xff1b; 后来发现密码这么设置不安全&#xff0c;怎么办&#xff1f; 就出现了passphrase&#xff0c;使用词组的组合来做为密码&#xff0c…

用于实体对齐的联合学习实体和关系表示2019 AAAI 8.7

用于实体对齐的联合学习实体和关系表示 摘要介绍相关工作实体对齐图卷积网络 问题公式我们的方法整体架构初步实体对齐图卷积层近似关系表示联合实体和关系对齐 实验总结 摘要 实体对齐是在不同知识图之间集成异构知识的一种可行方法。该领域的最新发展通常采用基于嵌入的方法…

Neo4j笔记-数据迁移(导出/导入)

这里先说明以下几点&#xff1a; Neo4j在4.0下版本默认的库名是&#xff1a;graph.db Neo4j在4.0上版本默认的库名是&#xff1a;neo4j.db 不管是Neo4j&#xff0c;还是Neo4j Desktop&#xff0c;都会在bin目录下有neo4j、neo4j-admin软件。在conf目录下&#xff0c;有neo4j.…

【状态估计】一维粒子滤波研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

代理模式(C++)

定义 为其他对象提供一种代理以控制(隔离&#xff0c;使用接口)对这个对象的访问。。 应用场景 在面向对象系统中&#xff0c;有些对象由于某种原因(比如对象创建的开销很大&#xff0c;或者某些操作需要安全控制&#xff0c;或者需要进程外的访问等)直接访问会给使用者、或…

el-tree 懒加载数据,增删改时局部刷新实现

1.数据过多时进行懒加载孩子节点&#xff0c;根据层级传参获取后端孩子数据 懒加载主要部分&#xff1a; 1参数: :load"loadNode" lazy :props"defaultProps" 2.defaultProps 需要设置isLeaf: isLeaf,去除最后一层孩子节点的展开图表 defaultProps: { ch…

Pytorch迁移学习使用MobileNet v3网络模型进行猫狗预测二分类

目录 1. MobileNet 1.1 MobileNet v1 1.1.1 深度可分离卷积 1.1.2 宽度和分辨率调整 1.2 MobileNet v2 1.2.1 倒残差模块 1.3 MobileNet v3 1.3.1 MobieNet V3 Block 1.3.2 MobileNet V3-Large网络结构 1.3.3 MobileNet V3预测猫狗二分类问题 送书活动 1. MobileNet …

解释器模式-自定义语言的实现

有时&#xff0c;我们希望输入一串字符串&#xff0c;然后计算机能够按照预先定义的文法规则来对这个字符串进行解释&#xff0c;从而实现相应的功能。 例如&#xff0c;我们想实现简单的加减法接收器&#xff0c;只需输入一个表达式&#xff0c;它就能计算出表达式结果。比如…

纯C语言实现的Luhn算法(信用卡校验位):详解与示例

Luhn算法,也被称为“模10算法”,是一种简单的校验和公式,用于验证各种标识号码,如信用卡号码。Luhn算法是由IBM科学家Hans Peter Luhn发明的。这种算法在全球范围内被广泛应用于各种场合,其中最常见的就是信用卡号码的校验。 在本文中,我们将详细介绍如何使用纯C语言实现…

GPT带我学-设计模式-模板模式

1 请你给我介绍一下设计模式中的模板模式 模板模式是一种行为设计模式&#xff0c;它定义了一个算法的骨架&#xff0c;将一些步骤的具体实现延迟到子类中。模板模式允许子类重新定义算法的某些特定步骤&#xff0c;而不需要改变算法的结构。 模板模式由以下几个角色组成&…

建模杂谈系列232 工程改进方法与实践_第一次迭代

说明 我还是比较喜欢把文章放在这个专题下&#xff0c;虽然这次的话题其实是个综合性的。 内容 1 理想架构 我一直在构建一个理想的数据处理系统&#xff0c;但这个过程不是自顶向下&#xff0c;一次设计完毕的。而是在不断的实践、反思和推倒重建汇总不断更新的。 或者说…