王新阳

CSS3 伪类选择器 nth-child() 的用法

转自：https://www.yangqq.com/jstt/css3/2013-07-15/379.html

CSS3 伪类选择器 nth-child() 的用法

伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)（比如nth-of-type(1)）这个特殊的类选择符可以样式更加个性的标题和段落等，不过，目前nth-of-type(n)只支持火狐3、opera、safari和chrome等部分浏览器。

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

:nth-child(length);/*参数是具体数字 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);/*表示隔几选一*/

例子：

li:nth-child(3){background:orange;}/*把第3个li的背景设为橙色*/

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的li的背景设为橙色*/

li:nth-child(n+3){background:orange;}/*选择从第3个元素后面的li背景设为橙色*/

li:nth-child(-n+3){background:orange;}/*选择从第3个元素前面的li把背景设为橙色*/

li:nth-child(3n+1){background:orange;}/*这种方法是实现隔几选一的效果*/

:fist-child选择某个元素的第一个子元素

例子：

li:first-child {background: green;}/*把第1个li的背景设为绿色*/

:last-child选择某个元素的最后一个子元素

例子：

li:last-child {background: green;}/*把最后一个li的背景设为绿色*/

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算

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

例子：

li:nth-last-child(4) {background: red;}/*把倒数第4个li的背景设为红色*/

:nth-of-type()选择指定的元素

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

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

除了可以将n设置为odd（偶数）或even（奇数）外，还可以将n设置为表达式，比如，nth-of-type(3n+2)

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算

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

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

:first-of-type选择一个上级元素下的第一个同类子元素；

:last-of-type选择一个上级元素的最后一个同类子元素；

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

:only-child表示的是一个元素是它的父元素的唯一一个子元素

<ul>

</ul>

<ul>

</ul>

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

ul li {padding-left:10px;}

ul li:only-child {padding-left:15px}

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素

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

<h2>伪类选择器的用法</h2>

<p>CSS3 伪类选择器only-of-type的用法</p>

</section>

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

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

:empty选择的元素里面没有任何内容

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

p:empty {display: none;}

2018-08-27

回应

CSS3实现三角形

/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}

/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}

/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}

/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}

再配合 transform:rotate(xdeg) 就可以实现各方向的三角形了。

来源：https://www.cnblogs.com/huanghuali/p/6145604.html

2018-08-22

回应

CSS vertical-align:middle 没有绝对垂直居中的解决办法

<div style="border:1px solid red;height:100px;">
	<img src="abc.jpg" height="80" style="vertical-align:middle;">
</div>

实际使用中，我们会发现上面的 img 并没有绝对垂直居中，而是图片顶部多几个像素，解决方法很简单，就是给 img 的父元素 div 加上 font-size:0; 即可。

2018-05-30

回应

font-family 最后一项为什么要加 sans-serif

W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。

sans-serif无衬线字体，是一类字体，它在操作系统或者浏览器里是可以设置的，你可以把它设置成宋体，也可以设置成微软雅黑，而设置的这种字体肯定是当前系统里存在的字体，所以使用这个字体就一肯能显示出来，所以加上sans-serif就能保证调用。

Sans-serif简介：Sans-serif是专指西文中没有衬线的字体，与汉字字体中的黑体相对应。该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

2018-02-22

回应

CSS3之filter

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

http://www.runoob.com/cssref/css3-pr-filter.html

注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。`<shadow>参数如下：` <offset-x> <offset-y> (必须) 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 `<blur-radius> and/or <spread-radius>，会有模糊效果).` <blur-radius> (可选) 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利). <spread-radius> (可选) 这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 <color> (可选) 查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： filter: url(svg-url#element-id)

2017-08-29

回应

border-radius溢出

如下CSS鼠标滑过时在360浏览器的极速模式下，会出现border-radisu溢出，图片仍是方形，直至transform动画结束。

a{
	display:block;
	width:100px;
	height:100px;
	border-radius:50%;
	overflow:hidden;
}
a img{
	width:100%;
	height:100%;
	transition:transform ease .5s;
}
a:hover img{
	transform:scale(1.05);
}

解决方法：

a{
	position:relative;
	z-index:1;
}

2017-06-15

回应

CSS3动画 animate.css

官网演示： https://daneden.github.io/animate.css/

https://github.com/daneden/animate.css

2017-02-14

回应

CSS文字两端对齐

Chrome、Firefox：

text-align:justify;

IE：
text-align:justify;
text-justify:distribute; /*最后一行不两端对齐，仅IE支持text-justify*/
text-justify:distribute-all-lines; /*所有行两端对齐*/

2016-07-26

回应

web前端设计必备知识：CSS优先级

http://www.zhihu.com/question/28976590

http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

http://www.w3cplus.com/css/front-end-web-development-quiz.html

2016-06-03

回应

CSS3旋转动画

鼠标滑过b标签360度旋转

a:hover b{
	animation:articl 4s infinite linear;
	-webkit-animation:articl 4s infinite linear;
	-moz-animation:articl 4s infinite linear;
	-ms-animation:articl 4s infinite linear;
}
@keyframes myrole{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}
@-webkit-keyframes articl{
	0%{-webkit-transform:rotate(0deg);}
	50%{-webkit-transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes articl{
	0%{-webkit-transform:rotate(0deg);}
	50%{-webkit-transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);}
}
@-ms-keyframes articl{
	0%{-webkit-transform:rotate(0deg);}
	50%{-webkit-transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);}
}

2015-09-26

回应

1 2 3