玩转CSS选择器(一) 之 使用方法介绍

前言

前几天整理了CSS一些技术关键字,但是因为自己的知识过于单薄,觉得考虑的不充分有欠缺,随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些?》,也是为了让厉害的人一起参与进来,用他们的经验告知我们CSS中哪一块的知识点是重要,或者说是不可欠缺的,也或者说是应该打好基础的。

在整理这份CSS技术关键字的开始,首先想到的是选择器,它作为最常用的的一个特性,几乎天天都在使用,但是如果让你说出20种CSS选择器,是不是可以脱口而出呢? 哎,或许我们被浏览器逼的还停留在CSS2.1那些选择器把?CSS4规范都要问世了,我们还在玩那个?

clipboard.png

带着这些疑问,决定梳理一下之前用到的知识点,最终以系列文章的方式说一说我对选择器的理解,具体包含的内容如下:

  • 选择器的基础使用,主要是CSS3,也会介绍新增CSS4选择器,包括各浏览器对选择器的支持情况
  • 选择器的使用技巧,使用时常出现的一些问题,扒一扒解决方案,再说一说效率和优化的部分
  • 选择器的优先级,理一理比较头疼的权重问题,如何更轻松的理解它

导图与源码

我在写这篇文章的时候会梳理一份思维导图,用于更加直观的查阅所有的CSS选择器,并且也有编写示例代码,更方便理解文章中的示例。

关于思维导图和示例代码,会上传至Github,当然也会随着时间的允许,不定义补充和更新
仓库地址:https://github.com/Alsiso/everyday
思维导图:https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css...
示例代码:https://github.com/Alsiso/everyday/tree/master/codes/css-selectors

关于everyday是我每天记录和总结的地方,这里有代码,布局方案,移动端适配方案等等,后续会不断的补充和更新,欢迎一起聊代码,玩前端。

clipboard.png

基本选择器

通配符选择器 *

通配符选择器用来选择所有的元素

* {marigin: 0;padding: 0;
}

在我之的文章中讨论过CSS RESET,其中里面的核心代码就是使用通配符选择器定义的,来重置浏览器所有元素的内边距和外边距。

其实,通配符选择器还可以选择某一个元素下的所有元素

#demo *{margin:0;
}

不过使用通配符要谨慎,并不是因为通配符会带来性能问题,而是滥用通配符会造成“继承失效”或“继承短路”的问题,这种情况会对开发造成一定程度的影响。

元素选择器 E

元素选择器使用也很简单,它用于指定HTML文档中元素的样式

ul{list-style:none;
}

▲ 这里使用元素选择器选择ul元素并去除列表前面的默认圆点

类选择器.className

类选择器是最常用的一种选择器,使用时需要在HTML文档元素上定义类名,然后与样式中的.className相匹配,它一次定义后,在HTML文档元素中是可以多次复用的。

CSS

.menu {margin:0 auto;
}

HTML

<div class="menu"></div>

类选择器还可以结合元素选择器来使用,假设文档中有两个元素都使用了.menu类名,但是你只想选择div元素上类名为.menu的元素

CSS

div.menu {margin:0 auto;
}

HTML

<div class="menu"></div>
<ul class="menu"></ul>

类选择器支持多类名使用,比如.menu.active这个选择器只对元素中同时包含了menuactive两个类才会起作用

CSS

.menu {margin:0 auto;
}
.menu.active {font-weight:bold;
}

HTML

<div class="menu active"></div>

不过多类选择器.className1.className2IE6+以上才支持,关于浏览器对CSS选择器的支持会下面的内容统一整理列出表格。

id选择器#id

id选择器与上面的类选择器使用很相似,通过在HTML文档中添加ID名称,然后与样式中的#id相匹配,不过两者的最大的区别在于,ID选择器是一个页面中唯一的值,不可多次使用,而class选择器是可以多次复用的。

CSS

#menu{margin:0 auto;
}

HTML

<div id="menu"></div>

群组选择器s1,s2,...,sN

群组选择器在开发中也是很常用的,它用于将相同样式的元素分组在一起,然后用逗号进行分割。

CSS

a:active,a:hover {outline: 0;
}

▲ 这里统一去掉了a链接在点击和浮动时的虚线焦点框。

后代选择器E F

后代选择器是最常使用的选择器之一,它也被称作包含选择器,用于匹配所有被E元素包含的F元素,这里F元素不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中。

CSS

.menu li{padding:0 ;
}

HTML

<ul id="menu"><li><ul><li></li></ul></li>
</ul>

▲ 这里.menu下的li元素和嵌套的ul元素下的li的元素都会被选择,进行清楚内边距。

子元素选择器E > F

子元素选择器只能选择某元素的子元素,这里的F元素仅仅是E元素的子元素才可以被选中

CSS

.menu > li{padding:0 ;
}

HTML

<ul id="menu"><li><ul><li></li></ul></li>
</ul>

▲ 将会对.menu下的li子元素选中,但会忽视内部嵌套的li元素

相邻兄弟元素选择器E + F

相邻兄弟选择器可以选择紧接在另一元素后的元素,但是他们必须有一个相同的父元素。比如E元素和F元素具有一个相同的父元素,而且F元素在E元素后面,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

CSS

h1 + p {margin-top:5px;
}

HTML

<div><h1>标题</h1><p>内容</p>
</div>

▲ 将会选择h1元素后面的兄弟元素p

通用兄弟选择器E ~ F

通用兄弟元素选择器是CSS3新增加一种选择器,用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似,但不同于前者只是选择相邻的后一个元素,而通用兄弟元素选择器是选择所有元素

CSS

h1 ~ p {margin-top:5px;
}

HTML

<div><h1>标题</h1><p>内容</p><p>内容</p><p>内容</p>
</div>

▲ 将会选择h1元素后面的所有的兄弟元素p

属性选择器

选择器描述CSS版本
E[attr]匹配所有具有attr属性的E元素2.1
E[attr=value]匹配所有attr属性等于“value”的E元素2.1
E[attr~=value]匹配所有attr属性具有多个空格分隔的值、其中一个值等于“value”的E元素2.1
E[attr^=value]匹配所有attr属性值是以val开头的E元素2.1
E[attr$=value]匹配所有attr属性值是以val结束的E元素3
E[attr*=value]匹配所有attr属性值包含有“value”的E元素3

E[attr]

E[attr]属性选择器是CSS3属性选择器最简单的一种,用于选择具有att属性的E元素。

CSS

img[alt] {margin: 10px;
}

HTML

<img src="url" alt="" />
<img src="url" />

▲ 将会选择到第一张图片,因为匹配到了alt属性,你也可以使用多属性的方式选择元素

img[src][alt] {margin: 10px;
}

E[attr=value]

E[attr="value"]是指定了属性值value,从而缩小了范围可以更为精确的查找到自己想要的元素。

CSS

input[type="text"] {border: 2px solid #000;
}

HTML

<input type="text" />
<input type="submit" />

▲ 将会选择到type="text"表单元素。

E[attr~=value]

如果你要根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],你会发现它和E[attr="value"]极为的相似,但是两者的区别是,属性选择器中有波浪(~)时属性值有value时就相匹配,没有波浪(~)时属性值要完全是value时才匹配。

CSS

div[class~="a"] {border: 2px solid #000;
}

HTML

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

▲ 将会选择到第1、3个div元素,因为匹配到了class属性,且属性值中有一个值为a

E[attr^=value]

E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素

CSS

div[class^="a"] {border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到第1、2个div元素,因为匹配到了class属性,且属性值以a开头

E[attr$=value]

E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,这里是选择attr属性值以"value"结尾的所有元素。

CSS

div[class$="c"] {border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到第1、3个div元素,因为匹配到了class属性,且属性值以c结尾

E[attr*=value]

E[attr*="value"]属性选择器表示的是选择attr属性值中包含"value"字符串的所有元素。

CSS

div[class*="b"] {border: 2px solid #000;
}

HTML

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选择到所有的元素,因为匹配到了class属性,且属性值都包含了b

E[attr|="val"]

E[attr|="val"]是属性选择器中的最后一种,它被称作为特定属性选择器,这个选择器会选择attr属性值等于value或以value-开头的所有元素。

CSS

div[class|="a"] {border: 2px solid #000;
}

HTML

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

▲ 将会选择第1个div元素,因为匹配到了class属性,且属性值以紧跟着"a-"的开头

伪类选择器

动态伪类

一般动态伪类是在用户操作体验时触发的,最常见的就是超链接,它拥有访问前,鼠标悬停,被点击,已访问4种伪类效果。

  • E:link 设置超链接a在未被访问前的样式
  • E:visited 设置超链接a已被访问过时的样式
  • E:hover 设置元素在其鼠标悬停时的样式
  • E:active 设置元素在被用户激活时的样式

不过在使用时的时候,一定要注意书写的顺序,不然在不同的浏览器中会带来一些意想不到的错误。

a:link {}
a:visited {}
a:hover {}
a:active {}

最可靠的记忆顺序就是遵循爱恨原则:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。

还有一个用户行为的动态伪类:focus,常用于表单元素(触发onfocus事件发生)时的样式。

input[type="text"]:focus{border: 2px solid #000;
}

▲ 当用户聚焦到输入框内,会给输入框添加一个边框颜色。

表单状态伪类

我们把以下3种状态称作表单状态伪类,你会发现这些关键字就是HTML表单元素的属性,checked用于type="radio"type="checkbox"够选中状态,disabled用于type="text"禁用的状态,而enabled这里表示type="text"可用的状态。

  • E:checked 匹配用户界面上处于选中状态的元素E
  • E:enabled 匹配用户界面上处于可用状态的元素E
  • E:disabled 匹配用户界面上处于禁用状态的元素E

CSS

input[type="text"]:enabled {background: #fff;
}
input[type="text"]:disabled{background: #eee;
}
input:checked + span {background: red;
}

HTML

<input type="text" value="可用状态" />
<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />
<input type="text" value="禁用状态" disabled="disabled" />
<label><input type="radio" name="radio" /><span>黑色</span></label>

▲ 将会给可用状态的文本框设置为白色(#fff)背景,禁用状态设置为灰色(#eee)背景,如果你选中了radio,它兄弟元素span的文本会变成红色

结构伪类

  • E:first-child 匹配父元素的第一个子元素E
  • E:last-child 匹配父元素的最后一个子元素E
  • E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效
  • E:nth-last-child(n) 匹配父元素的倒数第n个子元素E,假设该子元素不是E,则选择符无效
  • E:first-of-type 匹配同类型中的第一个同级兄弟元素E
  • E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
  • E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E
  • E:only-child 匹配父元素仅有的一个子元素E
  • E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
  • E:empty 匹配没有任何子元素(包括text节点)的元素E

E:first-child 和 E:last-child
E:first-child是用来选择父元素的第一个子元素E,但是它必须为父元素的第一个子元素,不然会失效,举例说明

CSS

p:first-child {color:red;
}

HTML

<div><h1>标题</h1><p>段落</p>
</div>

▲ 你会发现p元素的字体并没有变为红色,因为p元素前面还有个h1,它并不是父元素下的第一个子元素。

<div><p>段落</p>
</div>

▲ 这时需要改变结构,效果才会正常。

E:last-childE:first-child选择器的作用类似,不同的是E:last-child选择是的元素的最后一个子元素。

CSS

p:last-child {color:red;
}

HTML

<div><h1>标题</h1><p>段落</p>
</div>

▲ 将p元素的字体设置为红色

E:nth-child(n) 和 E:nth-last-child(n)
E:nth-child(n)用于匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
该选择符允许使用一个乘法因子(n)来作为换算方式,如下:

li:nth-child(2) { background:#fff}

▲ 选择第几个标签,“2可以是你想要的数字,最小从0开始”

li:nth-child(n+4) { background:#fff}

▲ 选择大于等于4标签,“n”表示从整数

li:nth-child(-n+4) { background:#fff}

▲ 选择小于等于4标签

li:nth-child(2n) { background:#fff}
li:nth-child(even) { background:#fff}

▲ 选择偶数标签,2n也可以是even

li:nth-child(2n-1) { background:#fff}
li:nth-child(odd) { background:#fff}

▲ 选择奇数标签,2n-1也可以是odd

li:nth-child(3n+1) { background:#fff}

▲ 自定义选择标签,3n+1表示“隔二取一”

E:nth-last-child(n)又要开始反着来了,CSS3选择器有正就有反

li:nth-last-child(3) { background:#fff}

▲ 选择倒数第3个标签

E:first-of-typeE:last-of-type
E:first-of-type的使用方法类似于我们上面讲过的E:first-child,不过区别在于该选择器只会选择同类型的第一个元素,而不是父元素的第一个元素,举例说明:

CSS

p:first-of-type {color:red;
}
p:last-of-type {color:green;
}

HTML

<div><h1>标题</h1><p>段落</p><p>段落</p><div></div>
</div>

▲ 你会发现第一个p元素的字体被设置为红色,第二个p元素的字体被设置为绿色,这就是E:first-of-typeE:first-child不同之处。

E:nth-of-type(n)E:nth-last-of-type(n)
这两个选择器的用法类似于:nth-child(n)E:nth-last-child(n),关于区别也是选择器只会选择同类型的兄弟元素,举个栗子

<div><p>第1个p</p><p>第2个p</p><span>第1个span</span><p>第3个p</p><span>第2个span</span><p>第4个p</p><p>第5个p</p>
</div>
p:nth-child(3) {color:red;
}

▲ 如果使用:nth-child(3)你会发现第3个p元素文本并没有变成红色。就像我们之前说的,如果第n个子元素不是E,则是无效选择符,但n会递增。

p:nth-of-type(3) {color:red;
}

▲ 但是使用:nth-of-type(3)后会发现第3个p元素文本被设置为红色。

E:only-childE:only-of-type
E:only-child用来匹配父元素仅有的一个子元素E,而E:only-of-type是表示一个元素它有很多个子元素,但是只会匹配其中只有一个子元素的元素,说起来有点绕口,来个栗子

HTML

<div><p>段落</p>
</div>
<div><div>容器</div><p>段落</p><div>容器</div>
</div>
p:only-child {color: red;
}

▲ 将会对第1个div元素下的p元素文本设置成红色。

p:only-of-type {color: red;
}

▲ 不仅会第1个div元素下的p元素文本设置成红色,也会对第2个div元素下的p元素文本设置成红色,因为它是p元素中唯一的一个同级兄弟元素。

<iframe width="100%" height="300" src="//jsfiddle.net/Alsiso/15h4ozee/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

E:empty
E:empty是用来选择没有任何内容的元素,包括text节点,也就是意味着连一个空格都不能有

HTML

<div><p> </p><p></p>
</div>

CSS

p:empty {height: 100px;
}

▲ 将会对第2个空元素p设置一个高度,为什么第一个会失效呢,因为该容器里面有一个空格。

否定类

E:not(s)用于匹配不含有s选择符的元素E,说起来不好理解,那么说一个最常用的开发场景,假如我们要对ul元素下的所有li都加上一个下边框用于内容分割,但是最后一个不需要,如下:

HTML

<ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li>
</ul>

CSS

ul li:not(:last-child) {border-bottom: 1px solid #ddd;
}

▲ 将会对列表中除最后一项外的所有列表项添加一条下边框

伪元素选择器

  • E:first-letter 选择文本块的第一个字母
  • E:first-line 选择元素的第一行
  • E:before 在元素前面插入内容,配合"content"使用
  • E:after 在元素后面插入内容,配合"content"使用

以上四个伪元素选择器在CSS2.1都已经被支持,但在CSS3中将伪元素选择符前面的单个冒号(:)修改为双冒号(::),如E::first-letterE::first-lineE::beforeE::after,不过之前的单冒号写法也是有效的。

E::first-letter 和 E::first-line

p::first-letter {font-weight:bold;    
}

▲ 将会对文本块的第一个字母进行加粗

p::first-line {font-weight:bold;    
}

▲ 将会对段落的第一行文本进行加粗

E::before 和 E::after

E::beforeE::after是用来给元素的前面和后面差入内容,配合"content"使用,但它必须有值才能生效。

HTML

<div>me</div>

CSS

div:before{content:'you before'; color:red;
}
div:after{content:'you after'; color:green;
}

▲ 将会在div容器中的文本me加上添加后的内容并设置其颜色

E::placeholder和 E::selection

  • E::placeholder 选择文本块的第一个字母
  • E::selection 选择文本块的第一个字母

E::placeholder用于设置对象文字占位符的样式,但是每个浏览器的CSS选择器都有所差异,需要针对每个浏览器做单独的设定,举个例子看代码

::-webkit-input-placeholder { /* WebKit browsers */color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:    #999;
}

E::selection用于设置文本被选择时的样式,被定义的样式属性有3个,而且使用时需要对火狐浏览器单独设置。

p::-moz-selection{background:#000;color:#f00;text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{background:#000;color:#f00;text-shadow:1px 1px rgba(0,0,0,.3);
}

第四代选择器

发展历史

自从哈坤·利提出CSS建议到1996年CSS1.0问世,距离今天已经有20个年头。
不过CSS的发展一直在持续,1997年组织了专门管CSS的工作组,并在1998年发布了CSS2.0,之后发布了修订版本的CSS2.1。

CSS2.1 是我们一直再用的,也是浏览器支持较为完整的一个版本。

CSS3 的开发工作早在2001年以前就启动了,不过发展到今天,大多数的现代浏览器对CSS3属性和选择器支持良好,除了一些微软IE浏览器的较老版本。

历史前进的步伐并不会停止的,新的CSS4也正由W3C编辑团队研发中。在CSS4中引进了许多的新变化,不过基本选择器是不会有变化的,更多的还是添加一些伪类,那么接下来一起看看增加的内容。

提醒:目前这些代码功能可能还在实验规范阶段,浏览器并没有得到支持,所以并不能投入使用

升级内容

否定类 E:not(s,s,s..)
E:not其实在选择器已经出现在CSS3了,它用于匹配不含有s选择符的元素E,上面我们讲过它的使用方法,但是它只能用于简单选择器,伪类,标签,id,类和类选择器参数。不过在CSS4中得到了升级,具体区别

p:not(.header) { font-weight: normal; 
}  

CSS3将会对除了.header类以外的文本加粗

p:not(.header, .footer) { font-weight: normal; 
}  

CSS4通过传入一个用逗号,将会对除了.header.footer类以外的文本加粗

关联类 E:has(s)
这个选择器通过一个参数(选择符),去匹配与某一元素对应的任意选择器,举个例子

a:has(>img) {  border: 1px solid #000; 
}  

▲ 将会对所有带有img元素的a元素加个黑色的边框

匹配任何伪类E:matches
这个伪类选择器可以规则运用在所有的选择器组中,它能帮我们简写多组选择器的规则,例子说明,

<section><h1>标题</h1>
</section>
<nav><h1>标题</h1>
</nav>

▲ 上面的两个容器都有一个h1标题元素,如何对容器下的h1`字体进行字体颜色设置呢

section h1,nav h1{color:red;
}:matches(section, nav) h1 {color: red;
}

▲ 这一种是传统的方法,第二种就是:matches方法。

位置伪类E:local-linkE:local-link(n)

位置伪类是访问者在你网站上的位置

  • :local-link(0) 代表一个超连接元素,其target和文档的URL是在同一个源中。
  • :local-link(1) 代表一个超连接元素,其target和文档的URL是在同一个源中。
  • :local-link(2) 代表一个超连接元素,其target和文档的URL是在同一个源中。
/* 将会匹配 http://example.com/ link(s) */
:local-link(0) {color: red;
}/* 将会匹配 http://example.com/year/ link(s) */
:local-link(1) {color: red;
}/* 将会匹配 http://example.com/year/month/ link(s) */
:local-link(2) {color: red;
}

表单状态伪类 E:indeterminate
checkbox中的indeterminate属性用于展示半选择状态,这个属性只是改变checkbox的外观,不对它的checked属性产生影响,CSS4选择器中也增加了半选择状态的伪类。

:indeterminate {opacity: 0.6;
}

表单状态伪类 E:requiredE:optional
required属性是HTML5新添加的,用于规定必需在提交之前填写输入字段

:required {border: 1px solid red;
}
:optional {border: 1px solid gray;
}
<input type="text" required="required" />
<input type="text" />

▲ 第一个设置了required属性的表单元素将会设置一个红色边框,而第二个没有设置该属性的,将会设置一个灰色边框。

范围限制伪类E:in-rangeE:out-of-range
用于表单字段值范围的限制,取决于表单的minmax属性

:in-range {background-color:green;
}:out-of-range {background-color:red;
}
<input type="number" value="5" max="10" min="1"  />

▲ 如果你输入的值在设置的最小和最大值范围内,那么表单背景会呈现为绿色,如果超出了限制,那么会呈现为红色。

关于更多的CSS4选择器,可参考这里的 示例介绍。

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

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

相关文章

php基础-1

//echo "hello","aaaa";//输出语法&#xff0c;可以输出多个字符串//print "world"; //可以输出&#xff0c;只能输出一个字符串 用"."拼接可以输出&#xff0c;用","拼接直接报错 //数据类型 int,double,float,string,char…

工业相机和普通相机的区别详解_数码单反相机和胶片单反相机的区别

从相机出世到现在&#xff0c;相机的种类可以分为两种&#xff0c;一个是早期的胶片相片&#xff0c;另一个是现在的数码相机&#xff0c;数码相机的种类也是有很多种&#xff0c;其中最为常见就是单反相机了。那么今天我们就来看看胶片机和单反的区别。相机的种类总的来说可以…

ArcGIS 10.6 Data Interoperability Tools的安装与使用(附安装包下载)

ArcGIS平台中提供了一个数据交互操作工具Data Interoperability Tools,安装Desktop的时候不是一并安装的,这样导致Data Interoperability Tools工具箱下的工具(如Quick Import)全面有一个红色的叉号,无法正常使用,解决办法是手动安装Data Interoperability Tools,位于软…

女朋友强依赖我!我引入IOC后,从此我们的关系微妙而稳固!

此文从面向对象设计角度分析依赖倒置原则&#xff0c;引入依赖注入&#xff0c;IOC相关内容进行探讨&#xff0c;文中引用女朋友案例可能引起分手风险&#xff0c;故理解为 new 对象。想起在学校的时候&#xff0c;有一个任务就是设计一款宠物商店项目。那时候引入三层架构设计…

Qt 第二步 槽与信号(一) 实现点击按钮并弹窗

信号与槽是Qt中的核心&#xff0c;也是Qt的特有的。在Qt中信号与槽的关键字为slots、signals、emit。 具体信号与槽将会在下一节中详细说明&#xff0c;因为担心一些读者在没了解过槽与信号前直接讲述过深导致门槛提高&#xff0c;阅读困难&#xff0c;所以当前这一篇文将在不理…

语言 分组计算hr_干货 | HR不得不知的面试技巧

面试是求职者倍感煎熬的时刻&#xff0c;但其实&#xff0c;面试也让不少HR们颇有压力。毕竟&#xff0c;要在短时间内快速了解一个人&#xff0c;并判断是否适合岗位、业务部门会不会满意、能不能适应企业文化等并不容易。所以&#xff0c;今天Anna给大家整理了一份面试问题汇…

python3 爬虫第一步 简单获取网页基本信息

注&#xff1a;本系列专栏需要有简单的python3 语言基础 爬虫的相关作用在此就不再说明&#xff0c;相信能够点进该系列文章的读者都已经了解了爬虫是什么&#xff0c;并且能够做什么。由于是发布在互联网的文章&#xff0c;所以系列文章都不以书籍的方式从头到尾的叙述作用及其…

将旧版 WCF 应用程序迁移到 CoreWCF

前言CoreWCF 项目团队发布了 CoreWCF 的 1.0 版本&#xff0c;这是 WCF 到 .NET Core 平台的移植。我觉得&#xff0c;CoreWCF 适用于这类场景使用——基于 WCF 的旧版应用程序已在 Windows 平台上运行了很多年&#xff0c;但是希望将代码迁移到 .NET Core&#xff0c;以利用 L…

记录我的学习历程--二维数组解决平面图形题

打印出3 7 2 4 6 81 5 9代码如下转载于:https://blog.51cto.com/4139737/1684269

实现线段切割法_漫画:如何实现抢红包算法?

发出一个固定金额的红包&#xff0c;由若干个人来抢&#xff0c;需要满足哪些规则&#xff1f;1.所有人抢到金额之和等于红包金额&#xff0c;不能超过&#xff0c;也不能少于。2.每个人至少抢到一分钱。3.要保证所有人抢到金额的几率相等。小灰的思路是什么样呢&#xff1f;每…

python3 爬虫第二步Selenium 使用简单的方式抓取复杂的页面信息

Selenium 简介 该系列专栏上一篇爬虫文章点击这里。 网站复杂度增加&#xff0c;爬虫编写的方式也会随着增加。使用Selenium 可以通过简单的方式抓取复杂的网站页面&#xff0c;得到想要的信息。 Selenium 是操作浏览器进行自动化&#xff0c;例如自动化访问网站&#xff0c…

windows远程连接linux-安装xfce界面,ubuntn添加新用户

参考&#xff1a;“ 使用xrdp实现windows 远程桌面连接linux” http://blog.csdn.net/qq_33530388/article/details/64502902; http://www.linuxidc.com/Linux/2017-04/142690.htm 之前一直用mstsc连接windows主机&#xff0c;今天想用此来连接linux主机时&#xff0c;发现 连…

Qt 如何处理密集型耗时的事情

有时候需要处理一些跟界面无关的但非常耗时的事情&#xff0c;这些事情跟界面在同一个线程中&#xff0c;由于时间太长&#xff0c;导致界面无法响应&#xff0c;处于“假死”状态。例如&#xff1a;在应用程序中保存文件到硬盘上&#xff0c;从开始保存直到文件保存完毕&#…

【EPS精品教程】基于DOM和DSM创建垂直模型、加载垂直模型

本教程讲解EPS三维测图模块,主要内容有新建工程、创建垂直模型,为后续工作做准备。 目录 一、创建工程 二、生成垂直摄影模型

从旧金山到上海, HTTP/3 非常快!

HTTP/3 是超文本传输协议 (HTTP) 的第三个版本&#xff0c;它对 Web 性能来说意义重大, 让我们看看HTTP/3 如何让网站的速度变得更快&#xff01;等等&#xff0c;HTTP/2 发生了什么? 不是几年前才开始推广 HTTP/2 吗? 确实是这样, 但是它出现了一些 问题[1]&#xff0c; 包括…

最大尺寸分辨率_未来就在眼前——视涯科技推出最高分辨率硅基OLED显示屏幕...

声明&#xff1a;新闻稿非映维官方稿件&#xff0c;任何法律问题均与映维无关视涯科技•未来就在眼前2019年7月9日&#xff0c;在位于合肥新站高新区的自建工厂内&#xff0c;视涯科技(以下简称&#xff1a;“视涯”)作为一家半导体显示技术公司&#xff0c;公布开发中的两款硅…

Qt 第二步 熟悉文件结构组成(二)

目录导航&#xff1a; 《Qt 第一步 HelloWorld 的第一个程序》 《Qt 第二步 槽与信号&#xff08;一&#xff09; 实现点击按钮并弹窗》 本文参考《Qt5.9 c开发》 上一篇文使用了槽与信号完成了点击按钮并弹窗的程序效果&#xff0c;这一篇文将会了解Qt的项目文件组成。本节将会…

php基础教程 第一步 环境配置及helloworld

PHP 是服务器端脚本语言。全称为 Hypertext Preprocessor 为超文本预处理器。 据说php8不久后也要发布了&#xff0c;趁着8还没有发布赶紧写一个php5到php7&#xff08;在基础教程写完后将写php7新特性&#xff09;的教程。PHP版本之间更新会增加新特性&#xff08;别的语言也…

Hadoop(五)C#操作Hive

HiveHive将HiveQL&#xff08;类sql语言&#xff09;转为MapReduce&#xff0c;完成数据的查询与分析&#xff0c;减少了编写MapReduce的复杂度。它有以下优点&#xff1a;学习成本低&#xff1a;熟悉sql就能使用良好的数据分析&#xff1a;底层基于MapReduce实现同样存在一些缺…

深度优先搜索——八皇后问题

代码&#xff1a;&#xff08;控制台打印不了92种情况&#xff0c;只打印前10种&#xff09; 1 #include<iostream>2 #include<string>3 #include<windows.h>4 #define ok 15 #define error 06 using namespace std;7 8 9 int a[9][9]{0}; 10 int num0; 1…