文档章节

CSS3 选择器——伪类选择器

指尖残雪
 指尖残雪
发布于 2016/05/22 23:57
字数 4526
阅读 7
收藏 0
点赞 2
评论 0

转载自:http://www.w3cplus.com/css3/pseudo-class-selector


在开始之前先创建一个Dom:

<div class="demo clearfix">
  <ul class="clearfix">
	<li class="first links odd" id="first"><a href="">1</a></li>
	<li class="links even"><a href="">2</a></li>
	<li class="links odd"><a href="">3</a></li>
	<li class="links even"><a href="">4</a></li>
	<li class="links odd"><a href="">5</a></li>
	<li class="links even"><a href="">6</a></li>
	<li class="links odd"><a href="">7</a></li>
	<li class="links even"><a href="">8</a></li>
	<li class="links odd"><a href="">9</a></li>
	<li class="links even last" id="last"><a href="">10</a></li>
</ul>
</div>

同样先加上一些样式,让他看起来好看一点

.demo {
				width: 300px;
				border: 1px solid #ccc;
				padding: 10px;			
			}
			.demo li {
				border: 1px solid #ccc;
				padding: 2px;
				float: left;
				margin-right:4px;
			}
		 	.demo a {
				float: left;
				display: block;
				height: 20px;
				line-height: 20px;
				width: 20px;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				text-align: center;
				background: #f36;
				color: green;
				text-decoration: none;
			}

最出效果:

CSS的伪类语法和别的语法有点不一样,其主要有两种语法表达方式

E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;value为css的属性值*/

示例:

a:link {color:red;}

第二种写法

E.class:pseudo-class{property:value}

如:

a.selected:hover {color: blue;}

下面开始我们一起来看看这些伪类的具体应用:

一、动态伪类

动态伪类,因为这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来,动态伪类包含两种,第一种是我们在链接中常看到的锚点伪类,如":link",":visited";另外一种被称作用户行为伪类,如“:hover”,":active"和":focus"。先来看最常见的锚点伪类

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
			.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
			.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
			.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

对于这四个锚点伪类的设置,有一点需要特别注意,那就是他们的先后顺序,要让他们遵守一个爱恨原则LoVe/HAte,也就是Link--visited--hover--active。如果你把顺序搞错了会给你带来意想不到的错误,大家对于这个应该很熟悉的,如果是初学的朋友,可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中,他们所表达的意思是:

  1.  :hover用于当用户把鼠标移动到元素上面时的效果;
  2.  :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
  3.  :focus用于元素成为焦点,这个经常用在表单元素上。

本站的button就采用了这几处效果:

.form-submit {
			    -moz-transition: border-color 0.218s ease 0s;
					-webkit-transition: border-color 0.218s ease 0s;
					-o-transition: border-color 0.218s ease 0s;
					-ms-transition: border-color 0.218s ease 0s;
					transition: border-color 0.218s ease 0s;
			    background: none repeat scroll 0 0 #F5F5F5;
			    border: 1px solid #DCDCDC;
					-moz-border-radius: 2px 2px 2px 2px;
					-webkit-border-radius: 2px 2px 2px 2px;
			    border-radius: 2px 2px 2px 2px;
			    color: #333333;
			    font: 11px/27px arial,sans-serif;
			    height: 27px;
			    padding: 0 8px;
			    text-align: center;
			    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
			}
			.form-submit:hover {
			    background-color: #F8F8F8;
			    border-color: #C6C6C6;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
			    color: #333333;
			}
			.form-submit:active {
			    border-color: #4D90FE;
					-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
					-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
			    color: #000000;
			}
			.form-submit:focus {
			    border: 1px solid #4D90FE !important;
			}

你可以点击这里体验一下这种效果。

对于:hover在IE6下只有a元素支持,:active只有IE7-6不支持,:focus在IE6-7下不被支持。

二、UI元素状态伪类

我们把":enabled",":disabled",":checked"伪类称为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"这三种选择器。

三、CSS3的:nth选择器

这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法:

  1.  :first-child选择某个元素的第一个子元素;
  2.  :last-child选择某个元素的最后一个子元素;
  3.  :nth-child()选择某个元素的一个或多个特定的子元素;
  4.  :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  5.  :nth-of-type()选择指定的元素;
  6.  :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  7.  :first-of-type选择一个上级元素下的第一个同类子元素;
  8.  :last-of-type选择一个上级元素的最后一个同类子元素;
  9.  :only-child选择的元素是它的父元素的唯一一个了元素;
  10.  :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  11.  :empty选择的元素里面没有任何内容。

下面我们针对上面所列的各种选择器,一个一个来介绍:

1、:first-child

:first-child是用来选择某个元素的第一个子元素,比如我们这里的这个demo,你想让列表中的"1"具有与从不同的样式,我们就可以使用:first-child来实现:

.demo li:first-child {background: green; border: 1px dotted blue;}

在没有这个选择器出现之前,我们都需在要第一个li上加上一个不同的class名,比如说“first”,然后在给他应用不同的样式

.demo li.first {background: green; border: 1px dotted blue;}

其实这两种最终效果是一样的,只是后面这种,我们需要在html增加一个额外的class名,请看效果:

IE6不支持:first-child选择器。

2、:last-child

:last-child选择器与:first-child选择器的作用类似,不同的是":last-child"选择是的元素的最后一个子元素。比如说,我们需要单独给列表最后一项一个不同的样式,我们就可以使用这个选择器,如:

.demo li:last-child {background: green; border: 2px dotted blue;}

这个效果和以前在列表上的“last”的class是一样的

.demo li.last {background: green; border: 2px dotted blue;}

他们效显示的效果都是一致的,如图所示;

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择:

:nth-child(length);/*参数是具体数字*/
			:nth-child(n);/*参数是n,n从0开始计算*/
			:nth-child(n*length)/*n的倍数选择,n从0开始算*/
			:nth-child(n+length);/*选择大于length后面的元素*/
			:nth-child(-n+length)/*选择小于length前面的元素*/
			:nth-child(n*length+1);/*表示隔几选一*/
			//上面length为整数
		

:nth-child()可以定义他的值(值可以是整数,也可以是表达式),如上面所示,用来选择特定的子元素,对于这个我们直接看实例,比我说的更好理解。

:nth-child(3),选择某元素下的第三个子元素,(这里的3可以是你自己需要的数字),比如说,我需要选择列表中的第三个li元素,那么我们可以直接这样使用:

.demo li:nth-child(3) {background: lime;}

效果如下所示:

这种不式不能引用负值,也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n),其中n是一个简单的表达式,那么"n"取值是从“0”开始计算的,到什么时候结束我也不知道,如果你在实际应用中直接这样使用的话,将会选中所有子元素,比如说,在我们的demo中,你在li中使用":nth-child(n)",那么将选中所有的"li",如:

.demo li:nth-child(n) {background: lime;} 
			等于
			.demo li {background: lime;}

他其实是这样计算的

n=0 --》 没有选择元素
			n=1 --》 选择第一个li,
			n=2 --》 选择第二个li,后在的依此类推,这样下来就选中了所有的li

请看效果:

请注意了,这里的“n”只能是"n",不能使用其他字母代替,不然会没有任何效果的。

:nth-child(2n),这中方式是前一种的变身,我们可以选择n的2倍数,当然其中“2”可以换成你自己需要的数字,如:

.demo li:nth-child(2n) {background: lime;}
			等于
			.demo li:nth-child(even) {background: lime;}

我们来看一下其计算的过程:

n=0 --》 2n=0 --》 没有选中任何元素,
			n=1 --》 2n=2 --》 选择了第二个li
			n=2 --》 2n=4 --》 选择了第四个li,后面的依此类推

如果是“2n”这样跟我们以使用"even"命名class定义样式,所起到的效果是一样的,如图所示:

“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的,上面说了人是选择偶数,那么我们在他的基础上减去“1”就变成奇数选择,如:

.demo li:nth-child(2n-1) {background: lime;}

我们来看看其实现过程

n=0 --》 2n-1=-1 --》 也没有选中任何元素,
			n=1 --》 2n-1=1 --》 选择第一个li
			n=2 --》 2n-1=3 --》 选择第三个li,后面的依此类推

其实实现这种奇数效果,我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果

:nth-child(n+5)这个选择器是选择从第五个元素开始选择,这里的数字你可以自己定义,如:

.demo li:nth-child(n+5) {background: lime;}

按前面的计算方法,我们来看看,

n=0 --》 n+5=5 --》  选中第5个li
			n=1 --》 n+5=6 --》  选择第6个li,后面的就不列出来了,原理一样

你可以使用这种方法选择你需要开始选择的元素位置,也就是说换了数字,起始位置就变了,看下在的效果图:

:nth-child(-n+5)这种选择器刚好和上面的选择器相反,这个是选择第5个前面的,如:

.demo li:nth-child(-n+5) {background: lime;}

如果不清楚怎么一回事,你只要计算一下就明白了

n=0 --》 -n+5=5 --》 选择了第5个li
			n=1 --》 -n+5=4 --》 选择了第4个li
			n=2 --》 -n+5=3 --》 选择了第3个li
			n=3 --》 -n+5=2 --》 选择了第2个li
			n=4 --》 -n+5=1 --》 选择了第1个li
			n=5 --》 -n+5=0 --》 没有选择任何元素

从上面的计算方法中,大家很清楚的知道是怎么得来的,最后我们一起看看效果吧:

:nth-child(4n+1)这种方法是实现隔几选一的效果,比如我们这里是隔三选一,如果你把"4"换成别的数字那就是另外的一种隔法了,比如这个实例

.demo li:nth-child(4n+1) {background: lime;}

我们主要来看其计算出来的结果

n=0 --》4n+1=1 --》选择了第一个li
			n=1 --》4n+1=5 --》选择了第五个li
			n=2 --》4n+1=9 --》选择了第九个li

效果如下

IE6-8和FF3-浏览器不支持":nth-child"选择器。

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似,只是这里多了一个last,所以他起的作用就和前面的":nth-child"不一样了,他只要是从最后一个元素开始算,来选择特定元素。我们来看几个实例:

.demo li:nth-last-child(4) {background: lime;}

上面代码表示选择倒数第四个列表项,效果如下:

其中":nth-last-child(1)"和":last-child"所起作用是一样的,都表示的是选择最后一个元素。

另外":nth-last-child()"也可以像“:nth-child()”一样,可以使用表达式来选择特定元素,下面我们来看几个特殊的表达式所起的作用

:nth-last-child(2n),这个表示的是从元素后面计算,选择的是偶数个数,从而反过来说就是选择元素的奇数,和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。如:

.demo li:nth-last-child(2n) {background: lime;}
			.demo li:nth-last-child(even) {background: lime;}
			等于
			.demo li:nth-child(2n+1) {background: lime;}
			.demo li:nth-child(2n-1) {background: lime;}
			.demo li:nth-child(odd) {background: lime;}

请看效果:

:nth-last-child(2n-1)这个选择器刚好跟上面的相反,从后面计算选择的是奇数,而从前面计算选择的就是偶数位了,这个前面的":nth-child(2n)"之类是相同的效果,如:

.demo li:nth-last-child(2n+1) {background: lime;}
			.demo li:nth-last-child(2n-1) {background: lime;}
			.demo li:nth-last-child(odd) {background: lime;}
			等于:
			.demo li:nth-child(2n) {background: lime;}
			.demo li:nth-child(even) {background: lime;}

效果如下

看了这几个实例,大家都知道":nth-last-child()"和"nth-child()"使用方法是一样的,只不过他们的区别是“:nth-child()”是从元素的第一个开始计算,而“:nth-last-child()”是从元素的最后一个开始计算,他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

5、:nth-of-type

:nth-of-type类似于:nth-child,不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素,这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处,比如说,我们div.demo下有好多p元素,li元素,img元素等,但我只需要选择p元素,并让他每隔一个p元素就有不同的样式,那我们就可以简单的写成:

.demo p:nth-of-type(even) {background-color: lime;}

其实这种使用和:nth-child使用是一样的,也可以使用:nth-child的那些表达式和使用方法,唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

6、:nth-last-of-type

这个选择器不用说大家都能想得到了,他和前面的:nth-last-child一样使用,只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of-type和:last-of-type实际意义并不是很大,我们前面讲的:nth-child之类选择器就能达到这此功能,不过大家要是感兴趣还是可以了解一下,个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。我们一起来看一个实例更好理解

<div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>
	    <div class="post">
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
	    </div>

css样式

.demo .post p {background: lime;}

初步效果

如果我需要在div.post只有一个p元素的时候,改变这个p的样式,那么我们现在就可以使用:only-child,如:

.demo .post p {background: lime;}
			.demo .post p:only-child {background: red;}

此时只有div.post只有一个子元素p时,那么他的背景色将会改变,如图所示:

:only-of-type是表示一个元素他有很多个子元素,而其中只有一个子元素是唯一的,那么我们使用这种选择方法就可以选择中这个唯一的子元素,比如说

<div class="post">
	    	<div>Lorem ipsum dolor sit amet, consectetur</div>
	    	<p>Lorem ipsum dolor sit amet, consectetur</p>
			  <div>Lorem ipsum dolor sit amet, consectetur</div>
	    </div>

如果我们想只选择中上面中的p元素,我们就可以这样写,

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

IE6-8浏览器不支持:only-child选择器;IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

9、:empty

:empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格,比如说,你有三个段落,其中一个段落什么都没有,完全是空的,你想这个p不显示,那你就可这样来写:

p:empty {display: none;}

IE6-8浏览器不支持:empty选择器

三、否定选择器(:not)

否定选择器和jq中的:not选择器一模一样,就拿form中的元素来说明这个选择器的用法,比如你想对form中所有input加边框,但又不想submit也起变化,此时就可以使用:not为实现

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

否定选择器 :not(),可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器

四、伪元素

CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个

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

::first-letter选择文本块的第一个字母,除非在同一行里面包含一些其它元素,不过这个主要运用于段落排版上多,比如说首字下沉,

p::first-letter {font-size: 56px;float:left;margin-right:3px;}

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动,

.clearfix:before,
			.clearfix:after {
			     content: ".";
			     display: block;
			     height: 0;
			     visibility: hidden;
			  }
			 .clearfix:after {clear: both;}
			 .clearfix {zoom: 1;}


© 著作权归作者所有

共有 人打赏支持
指尖残雪
粉丝 7
博文 73
码字总数 0
作品 0
上海
后端工程师
CSS3 选择器——伪类选择器

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也...

石佛慈悲 ⋅ 2013/12/05 ⋅ 0

你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英...

石佛慈悲 ⋅ 2013/12/05 ⋅ 0

详解CSS3的高级选择器

CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它...

要么伟大要么死_zcv ⋅ 2016/12/16 ⋅ 0

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,最近一周也会更新下相关的学...

青夜之衫 ⋅ 2017/12/04 ⋅ 0

聊 网站CSS 选择器性能

CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从...

c_k ⋅ 2013/05/13 ⋅ 13

CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang ⋅ 2017/10/19 ⋅ 0

网站CSS选择器性能讨论

CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从...

Oxidyc ⋅ 2013/02/18 ⋅ 0

前端计划——面试题总结-CSS篇

前端面试之CSS篇 1、三种基本引入方式 外部样式表 内部样式表 内联 这是一个段落。 2、CSS的引入方式中link和@import的区别 link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@im...

Alarak ⋅ 2017/08/14 ⋅ 0

CSS3.0学习笔记

#css2中的选择器 1.元素选择器 *通配符选择符、html类型选择符、id选择符、class选择符 2.关系选择器 E F(包含选择器)、E>F(子选择器)、E+F(E元素后面相邻的F选择器) 3.伪类选择器 E:link(链...

崔林 ⋅ 2013/06/24 ⋅ 0

关于css优先级的理解

在HTML中,加入CSS样式表的方式一般有3种:1.通过link链接CSS外部样式表(称之为外部样式表);2.是在HTML的<head>段中用<style>元素将样式包含在页面内部的样式设置中(嵌入式样式表);3.是...

H_J ⋅ 2013/11/29 ⋅ 3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 2

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部