CSS的选择器(超详细)

news2025/1/18 6:05:56

目录

一、常用的选择器

1.元素选择器

2.类选择器(class选择器)

3.id选择器

4.通配符选择器

二、群组选择器

 三、关系选择器

1.后代选择器

 2.子代选择器

3.相邻兄弟选择器

 4.通用兄弟选择器

5.案例

 四、属性选择器

 五、伪类选择器

1.常用的伪类选择器

 2.否定伪类

3.元素的伪类

六、伪元素选择器

一、常用的选择器

1.元素选择器

语法 : 标签名{}

作用 : 选中对应标签中的内容

例:p{} , div{} , span{} , ol{} , ul{} ......

2.类选择器(class选择器)

语法 : .class属性值{}

作用 : 选中对应class属性值的元素

例子 : <p class="A">段落1</p>

          <p class="B">段落1</p>

          <p class="C">段落1</p>

          .A{} , .B{} , .C{} ......

注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值

3.id选择器

语法 : #id属性值{}

作用 : 选中对应id属性值的元素

例子 : <p id="A">段落1</p>

          <p id="B">段落1</p>

          <p id="C">段落1</p>

          #A{} , #B{} , #C{} ......

注意 : id的属性值只能给1个,可以重复利用,不能以数字开头

4.通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

例子 : *{

             margin: 0;  //外间距

             padding: 0;  //内间距

}

二、群组选择器

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素

例子 : 

<style>

    /* 用群组的目的是为了简化代码量 */
    div,p,h3,.li2{
      font-size: 30px;
    }
    div,.li2,.text3{
      color: red;
    }
    p{
      color: blue;
    }
    h3{
      color: pink;
    }

</style>

    <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>

 三、关系选择器

1.后代选择器

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素

<style>

  /* 后代选择器(包含选择器),选择到的是box下面的所有后代p */
     .box p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 

</style>


  <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 */
  .box div p {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

</style>

  <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>

 2.子代选择器

父元素直接包含子元素,子元素直接被父元素包含

<style>

   /*子选择器选中的是.box下所有的儿子p
   .box>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 

</style>

  <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
     .box>div>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

</style>

  <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>

3.相邻兄弟选择器

  <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>

以上面的代码为例,除了内容为'44444'的的p标签外,其余的所有元素均为兄弟元素,而相邻兄弟元素就是紧挨着的两个标签

给上述代码加上内部修饰样式:

<style>

   /* 相邻兄弟,会选择到box后面紧挨着的p,那么就是内容为111的p标签 */
    .box+p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

</style>

我们打开页面看看效果:

 4.通用兄弟选择器

  <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,那么就是除了内容为'44444'以外的所有p*/
   .box~p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }

</style>

 

5.案例

以上面的代码为例,现在有一个需求,想要内容为'5555'的标签自己变换样式,其余的都不变,我们先来分析一下,这个标签很明显,单独选择相邻兄弟元素或者通用兄弟元素都是无法实现只改变p5这个标签,先看看p5标签在.box后面,而.box后面只有一个div标签,刚好p5就是这个div的兄弟元素,代码如下:

<style>

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

</style>

 四、属性选择器

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

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

举个小案例:

       <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>

            <div class="demo">
			<a href="http://www.baidu.com" target="_blank" class=" links 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标签内写入1~7个方法的修饰样式:

      <style>
            /* 属性选择器的权重是0010	 */
			/* 写法1 某某[属性] 选择到a标签且有title属性的变*/
			/* a[title]{
				background: yellow;
			} */
			/* a[lang][target]{
				background: yellow;
			} */
			/*重点: 写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
			/* a[lang="zh"]{
				background: yellow;
			} */
			/* a[title="this is a link"]{
				background: yellow;
			} */
			/* class名字是item的,且有属性lang且属性值必须一模一样是zh-cn的 */
			/* .item[lang="zh-cn"]{
				background: yellow;
			} */
			/* id是last且有title属性且有class属性,属性值只能是links的变 */
			/* #last[title][class="links"]{
				background: yellow;
			} */

			/* 写法3: 某某[属性^=属性值] */
			/* a标签有class属性且属性值是li开头的 */
			/* a[class^=" li"]{
				background-color: yellow;
			} */
			/* a[title^="this"][lang]{
				background-color: yellow;
			} */
			/* 写法4 某某[属性$=属性值] */
			/* a标签有class属性且属性值结尾是t的变 */
			/* a[class$="t"]{
				background-color: yellow;
			}  */
			/* a[href$=".pdf"]{
				background-color: yellow;
			}
			a[href$=".doc"]{
				background-color: red;
			}
			a[href$=".png"]{
				background-color: green;
			} */

			/* 写法5 某某[属性*=属性值] */
			/* 选择到a标签且有href属性且只要有字母b就可以 */
			/* a[href*="b"]{
				background-color: green;
			} */
			/* 写法6 某某[属性~=属性值] */
			/* 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
			/* a[class~="item"]{
				background-color: green;
			} */
			/* 写法7 某某[属性|=属性值] */
			/* 这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
			a[title|="link"]{
				background-color: green;
			}
       </style>

现在默认展示的是第七个方法(需要看其他6种方法的同学自行打开其余6种方法的注释),现在选择到的是有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变,那么就是第一,第三,和第五个,打开页面看看

 五、伪类选择器

1.常用的伪类选择器

:first-child   第一个子元素

:last-child    最后一个子元素

:nth-child()   选中第n个元素

关于:nth-child()的特殊值(括号内的内容可以填写以下几种)

        n   第n个   n的范围0到正无穷（全选）

        even或2n    选中偶数位的元素

        odd或2n+1   选中奇数位得到元素

以child结尾的是在所有元素中选择

:first-of-type  第一个子元素

:last-of-type   最后一个子元素

:nth-of-type()    选中第n个元素
以type结尾的是在相同元素中选择

<style>
   /* box下面的第1个子元素变,也就是p1变 */
    .box   :first-child{
      border: 2px solid blue;
    }
    /* box下面的第1个子元素是li的时候变*/
    .box   li:first-child{
      border: 2px solid blue;
    } 
    .box   p:first-child{
      border: 2px solid blue;
    } 
    /* box下面的最后1个子元素变,也就是p6变 */
    .box   :last-child{
      border: 2px solid blue;
    }
    .box   p:last-child{
      border: 2px solid blue;
    }
    /* box下面的第3个子元素变 */
    .box  :nth-child(3){
      border: 2px solid blue;
    }
    .box  li:nth-child(3){
      border: 2px solid blue;
    }
    /* box下面的第7个子元素是p的变 */
    .box  p:nth-child(7){
      border: 2px solid blue;
    }  
    .box  p:nth-child(9){
      border: 2px solid blue;
    } 
    /* n是从0开始的数列 把n=0开始往n+3里面计算就可 */
    /* n=0  n+3=3 */
    /* n=1  n+3=4 */
    /* n=2  n+3=5... 结果就是第3,4,5,6,7,8,9...变*/
    .box  :nth-child(n+3){
      border: 2px solid blue;
    }
    /* box下面的第3,4,5,6,7,8,9...是li的时候变 */
    .box  li:nth-child(n+3){
      border: 2px solid blue;
    }
    /* 表示的意思是box里面的第3,2,1个变 */
    .box  :nth-child(-n+3){
      border: 2px solid blue;
    }
    /* 表示的意思是box里面的第3,2,1个是p变 */
    .box  p:nth-child(-n+3){
      border: 2px solid blue;
    }
    /* 表示的意思是box里面的第2,4,6,8,10,12.... 偶数的 */
    .box :nth-child(2n){
      border: 2px solid blue;
    }
    .box :first-child{
      border: 2px solid red;
    }
    /* 表示的意思是box里面的第2,4,6,8,10,12....是li的变 偶数的 */
    .box li:nth-child(2n){
      border: 2px solid blue;
    }
    /* 2n和even都是偶数的意思 */
    .box li:nth-child(even){
      border: 2px solid blue;
    }
    /* 表示的意思是box里面的第1,3,5,7,9...个变也就是奇数变 */
    .box :nth-child(2n+1){
      border: 2px solid blue;
    }
    .box :nth-child(odd){
      border: 2px solid blue;
    }
    /* 5  7  9 .... */
    .box :nth-child(2n+5){
      border: 2px solid blue;
    }

    .box :nth-last-child(2n){
      border: 2px solid blue;
    }

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

</style>

  <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>

 

<style>
  /* box下面的第1个子元素变,从结构看第1个是p,所以p1变了 */
    .box  :first-child{
      border: 2px solid blue;
    }
    /* box下面的同类型的第1个变,从目前的结构上看ul下面有2个类型,1个是li和1个是p所以li类型和p类型的第1个都变了 */
    .box  :first-of-type{
      border: 2px solid blue;
    }
    /* -child和-type的区别  child只看某个父元素下面的子元素  -type看的某父元素下面的同类型的子元素  child就是问班级有多少人 type就是问班级有多少女生和多少男生 */

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

    .box  p:last-of-type{
      border: 2px solid blue;
    }
    /* box 里面的p的第2个 */
    .box p:nth-of-type(6){
      border: 2px solid blue;
    }
    /* 选择box中li里面的第偶数个 */
    .box li:nth-of-type(2n){
      border: 2px solid blue;
    }

    .box li:nth-of-type(2n+1){
      border: 2px solid blue;
    }

    .box li:nth-last-of-type(2){
      border: 2px solid blue;
    }
    /* box里面的只有1个子元素是li的时候变 */
    .box li:only-child{
      border: 2px solid blue;
    }
    /* box里面的li只有1个的时候变 */
    .box li:only-of-type{
      border: 2px solid blue;
    }

    .box :nth-last-child(2){
      border: 3px solid blue;
    }

    .box :nth-last-of-type(2){
      border: 3px solid blue;
    }
</style>

  <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>

 2.否定伪类

:not()        将符号条件的元素去除

3.元素的伪类

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

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

以下两个伪类是所有标签都可以使用
:hover        鼠标移入后元素的状态
:active        鼠标点击后，元素的状态 

六、伪元素选择器

同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态

常见的几个伪元素：

::first-letter    表示第一个字母

::first-line       表示第一行

::selection     表示选中的元素

::before         元素开始的位置前

::after            元素结束的位置后

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

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

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

相关文章

智慧农业大数据平台：农业中的“大智慧”

智慧农业大数据平台：农业中的“大智慧”

智慧农业是现代化农业发展的重要途径&#xff0c;是利用物联网等现代信息技术提升农业生产管理水平&#xff0c;实现传统农业转型升级的重要措施。近年来&#xff0c;我国食品安全问题频发&#xff0c;究其根本原因&#xff0c;既有商家过度逐利的过错&#xff0c;也有农产品在…
阅读更多...
MySQL 不相关子查询怎么执行？

MySQL 不相关子查询怎么执行？

1. 概述 从现存的子查询执行策略来看&#xff0c;半连接 (Semijoin) 加入之前&#xff0c;不相关子查询有两种执行策略&#xff1a; 策略 1&#xff0c;子查询物化&#xff0c;也就是把子查询的执行结果存入临时表&#xff0c;这个临时表叫作物化表。 explain select_type …
阅读更多...
Linux: network: tcp_rmem/rmem_default

Linux: network: tcp_rmem/rmem_default

文章目录tcp_rmem - 取值是&#xff1a;3个整数向量: min, default, maxmindefault&#xff1a;maxrmem_defaultrmem_max具体的用法相关的方法tcp_rmem - 取值是&#xff1a;3个整数向量: min, default, max min TCP sockets使用的最小接收缓存大小。这个最小值的作用是在&am…
阅读更多...
PowerPC平台移植RTL8822BU

PowerPC平台移植RTL8822BU

目录编译驱动文件修改Makefile修改代码安装前置工具编译openssl编译libnl解决报错编译wpa_supplicant解决报错编译hostapd移植入嵌入式编译驱动文件 修改Makefile 修改代码 由于我这边kernel用的是比较老的&#xff0c;有些接口不支持&#xff0c;所以需要做一些处理 关于is…
阅读更多...
K_A07_001 基于 STM32等单片机驱动A4988模块按键控制步进电机正反转

K_A07_001 基于 STM32等单片机驱动A4988模块按键控制步进电机正反转

目录 一、资源说明 二、基本参数 1、参数 2、引脚说明 三、驱动说明 SETP时序 对应程序: 细分说明 程序 四、部分代码说明 1、接线说明 1.1、STC89C52RCA4988模块 1.2、STM32F103C8T6A4988模块 五、基础知识学习与相关资料下载 六、视频效果展示与程序资料获取 七、项目…
阅读更多...
基于深度学习的人脸表情识别的AR川剧变脸（二）

基于深度学习的人脸表情识别的AR川剧变脸（二）

在一中&#xff0c;我们训练了一个&#xff0c;可以识别angry、disgust、fear、happy、sad、surprised、normal七种人脸表情。 本文将建立在表情识别的基础上&#xff0c;设计一款AR变脸效果的软件&#xff0c;通过前置摄像头获取人脸图像&#xff0c;使用训练好的模型进行人脸…
阅读更多...
航空摄影与正射摄影的区别

航空摄影与正射摄影的区别

航空摄影 航空摄影是一种摄影&#xff0c;可以在其中从空中捕捉远处的图像。航空摄影的主题可以涵盖许多不同的领域&#xff0c;例如军事侦察、地质、农业等。但它也可以使用不同的技术手段&#xff0c;如无人机、直升机或飞机。本指南将简要概述航空摄影&#xff0c;如何在 G…
阅读更多...
百趣代谢组学文献分享:代谢组学中复溶溶剂究竟如何选？

百趣代谢组学文献分享:代谢组学中复溶溶剂究竟如何选？

今天&#xff0c;BIOTREE 技术支持工程师Novenia 将和奋斗在实验室的小伙伴们分享一篇关于代谢组学实验过程中溶剂选择的文章Tuning Metabolome Coverage in Reversed Phase LC−MS Metabolomics of MeOH Extracted Samples Using the Reconstitution Solvent Composition。这是…
阅读更多...
Canal1.1.6安装部署

Canal1.1.6安装部署

什么是Canal 阿里巴巴 B2B 公司&#xff0c;因为业务的特性&#xff0c;卖家主要集中在国内&#xff0c;买家主要集中在国外&#xff0c;所以衍生出了同步杭州和美国异地机房的需求&#xff0c;从 2010 年开始&#xff0c;阿里系公司开始逐步的尝试基于数据库的日志解析&#…
阅读更多...
反函数求导：自然对数 ln是怎么得到的；为什么自然对数的导数是 1/ x；arcsin 和 arccos 的导数求算

反函数求导：自然对数 ln是怎么得到的；为什么自然对数的导数是 1/ x；arcsin 和 arccos 的导数求算

参考视频&#xff1a;MIT微积分 如何得到的自然对数 lnlnln 首先我们知道以 eee 为底的指数函数 exe^xex 其次&#xff0c;我们引入反函数&#xff08;逆函数&#xff09;的概念 f−1(y)f^{-1}(y)f−1(y) 对于任意的 xxx 如果 f(x)yf(x)yf(x)y 那么 xf−1(x)xf^{-1}(x)xf−1(…
阅读更多...
Redis的优惠券秒杀问题（七）在集群模式下的问题

Redis的优惠券秒杀问题（七）在集群模式下的问题

Redis的优惠券秒杀问题&#xff08;七&#xff09;在集群模式下的问题 问题描述 伪集群模式搭建 &#xff08;1&#xff09;IDEA启动镜像 &#xff08;2&#xff09;修改nginx配置 &#xff08;3&#xff09;验证nginx是否启动成功 BUG复现 &#xff08;1&#xff0…
阅读更多...
零入门容器云网络-4：基于DNAT技术使得外网可以访问本宿主机上veth-pair链接的内部网络

零入门容器云网络-4：基于DNAT技术使得外网可以访问本宿主机上veth-pair链接的内部网络

已发表的技术专栏&#xff08;订阅即可观看所有专栏&#xff09; 0  grpc-go、protobuf、multus-cni 技术专栏 总入口 1  grpc-go 源码剖析与实战  文章目录 2  Protobuf介绍与实战 图文专栏  文章目录 3  multus-cni   文章目录(k8s多网络实现方案) 4  gr…
阅读更多...
数据结构:堆

数据结构:堆

文章目录一.堆的概念和性质二.堆的结构三.堆的实现3.1结构体声明3.2堆初始化3.3释放堆3.4打印堆3.5插入3.6删除3.7取堆顶元素3.8堆的元素个数3.9判空3.10补充四.建堆4.1向上调整建堆4.2向下调整建堆五.排序5.1升序5.2降序六.TOP-K问题一.堆的概念和性质 堆的概念&#xff1a; …
阅读更多...
数据存储方式——KVELL:快速持续键值存储的设计与实现

数据存储方式——KVELL:快速持续键值存储的设计与实现

文章目录前言一、背景1.当前流行的两种存储范式2.SSD性能的发展IOPS延迟和带宽吞吐量降低I / O突发3.NVMe ssd上当前KVs的问题3.1 CPU是瓶颈CPU是LSM KVs的瓶颈CPU是B树KVs的瓶颈3.2 LSM和B树KVs的性能波动二、KVELL1.KVs设计原则1.1 不共享1.2 不要在磁盘上排序&#xff0c;而…
阅读更多...
Spring——IOC容器部分核心接口

Spring——IOC容器部分核心接口

Spring——IOC容器部分核心接口一、简介二、IOC容器核心接口1.BeanDefinition2.BeanDefinitionReader3.BeanDefinitionRegistry4.BeanFactory5.ApplicationContext6.BeanPostProcessor7.BeanFactoryPostProcessor8.BeanDefinitionRegistryPostProcessor9.总结一、简介 以下接口…
阅读更多...
vim工具的使用

vim工具的使用

目录 vim的基本模式 vim三种基本模式(命令模式、底行模式、输入模式) 命令模式 vim正常(命令行)模式命令集 插入模式 底行模式 保存&退出 分屏 替换 执行shell指令 vim底行模式命令集 vim配置 配置文件的位置 配置文件的原理 如何配置 解决sudo无法使用的情…
阅读更多...
[附源码]计算机毕业设计JAVA基于协同过滤算法的网上招聘系统

[附源码]计算机毕业设计JAVA基于协同过滤算法的网上招聘系统

[附源码]计算机毕业设计JAVA基于协同过滤算法的网上招聘系统 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a…
阅读更多...
【教学类-16-01】20221121《数字卡片9*2》（中班)

【教学类-16-01】20221121《数字卡片9*2》（中班)

作品展示&#xff1a; ​ 打印墨水不够了​ 铅笔描边 ​ 剪开 ​ 每个人是A4 一半的大小 ​ 背景需求&#xff1a; 在数字像素图的基础上&#xff0c;我决定制作1-9的数字卡片&#xff0c;空心数字&#xff08;华文彩云&#xff09;涂色&#xff0c;卡片左上角写学号。——…
阅读更多...
go使用grpc实现go与go,go与C#相互调用

go使用grpc实现go与go,go与C#相互调用

protoc下载 protoc是protobuf的编译工具&#xff0c;能根据.proto文件生成为各种语言的源文件。 原始的protoc集成了如下语言的转换&#xff1a; cc#javaobjectcphppythonruby 但是没有集成go的转换工具。go的转换工具是在protoc的基础上使用插件的方式运行。 protoc 的下载地…
阅读更多...
linux NC命令的本质

linux NC命令的本质

NC是一个可以模拟tcp&#xff0c;udp&#xff0c;server,client 的协议&#xff0c; 1-它可以实现两个主机的聊天 server: nc -lp 1234 client : nc 192.168.1.10 1234 以上两个命令就可以实现实时数据传输了&#xff0c;是不是很有意思&#xff0c;但是这个是怎么实现的呢&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023