整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS结构性伪类详解

CSS结构性伪类详解

击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!

今天来给大家列一下所有常用的结构性伪类的用法。其中大部分应该都用的很熟悉了

1. 匹配文档的根元素

:root

2. 匹配其父元素的第n个子元素

:nth-child(n)

3. 匹配其父元素倒数第n个子元素

:nth-last-child(n)

4. 匹配其父元素第n个有着相同选择器的子元素

:nth-of-type(n)

5. 匹配其父元素倒数第n个有着相同选择器的子元素

:nth-last-of-type(n)

6. 匹配其父元素的第一个子元素

:first-child

7. 匹配其父元素的最后一个子元素

:last-child

8. 匹配其父元素第一个有着相同选择器的子元素

:first-of-type

9. 匹配其父元素最后一个有着相同选择器的子元素

:last-of-type

10. 匹配其父元素的唯一子元素

:only-child

11. 匹配其父元素的唯一有着相同选择器的子元素

:only-of-type

12. 匹配没有子元素(包括文字节点)的元素

:empty

以上选择器中的n也可以写成表达式an+b,其中a和b是0或正整数,如2n、2n+1、4n+1等。

n是从0开始的整数,表达式的写法相当于把每a个子元素分成一组,取每组的第b个元素。比如2n表示匹配所有顺序是2的倍数的子元素。2n和2n+1也可以分别写成even和odd。表示第偶数,奇数个子元素。

再说一个:nth-child(n)和:nth-of-type(n)的区别。

:nth-child(n)表示其父元素的每n个子元素,无论其子元素的类别是什么。

:nth-of-type(n)表示的是同类别的第n个子元素。

具体可以参考我之前写过的文章。

CSS中的六种伪类选择器

区别这两个伪类原来这么简单

看到这篇,CSS命名从此不在纠结

CSS隐藏的秘密

正确使用CSS中的关键字unset

听说CSS可以写tab切换,我也来试一把

教你如何用CSS简单实现一个水果loading效果

天我们学习的内容有:过渡,动画,转换,伸缩盒子。

可以说今天学习的内容都是重量级的大佬,学好了,使用css3做出酷炫的效果 So Easy!~~

1.过渡

在css3中,有一个属性可以设置过渡效果。

它就是transition,所谓的过渡效果,指的就是以动画的形式慢慢演化样式属性变化的过程。

A.案例:通过transition设置焦点过渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意页面中的代码:

第一,我们给div添加了一个hover伪类样式,当我们鼠标悬停在div上方的时候,会给div盒子添加一个蓝色的盒子阴影。

第二,我们给div盒子添加了一个transition样式,设置的值为:all 1s linear 0.3s;

这四个数据分别对应

transition-property(需要过渡的属性):如果设置为all表示所有样式属性都需要过渡。

transition-duration(过渡的时间):以秒作为单位,设置过渡的时间

transition-timing-function(过渡的方式):常用的有linear(匀速),ease(先慢后快),ease-in,ease-out,ease-in-out等

transition-delay(延迟的时间):以秒作为单位进行延迟,延迟之后开始进行过渡效果。

所以,我们通过transition这个复合属性设置的过渡效果为:

all:需要过渡所有的属性

1s:过渡的时间为1秒

linear:匀速过渡

0.3s:在延迟0.3秒之后开始过渡动画。

如果大家理解了上面的描述,那么也就不难理解咱们鼠标放到div上之后,为啥会慢慢出现蓝色的光晕了,就是因为咱们添加了过渡,所以,慢慢的就会给盒子添加阴影效果。

2.动画:

在学习完了过渡之后,发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程,这可以帮助我们来实现一些过渡的动画。

但是,有的时候,我们的需求会更加的复杂,要求会更加的多变,那么,transition可能就无法满足我们的需要了,我们需要有更加炫酷,复杂的效果呈现。

那么,动画animation就可以满足我们的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代码效果如下:

同样,让我们来关注编写的代码:

1.在样式中,首先我们使用@keyframes 来定义了一个复杂的动画,在css3中,新增了@keyframes可以来帮助我们添加动画。代码如下:

/*动画的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*动画最初的时候,将left设置为0px,top设置为0px*/

0%{

left:0px;

top:0px;

}

/*当动画进行到25%的时候,使用动画将left过渡到200px,top过渡到200px,

背景颜色过渡为绿色,圆角过渡为0(无圆角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*当动画进行到50%的时候,使用动画将left过渡到400px,top过渡到200px,

背景颜色过渡为蓝色,圆角过渡为50%(正圆)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*当动画进行到75%的时候,使用动画将left过渡到400px,top过渡到0,

背景颜色过渡为灰色,圆角过渡为0(无圆角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*当动画结束的时候,使用动画将left过渡到0x,top过渡到0px,

背景颜色过渡为红色,圆角过渡为50%(正圆)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

}

这是一个比较复杂的动画效果,可以发现,它通过百分比的形式将一个完整的动画拆分成了5个部分,每个部分都有不同的样式效果,而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。

2.上面我们只是通过@keyframes创建了一个动画,我们还需要通过特定的语法来使用这个动画。

就是下面这句代码了:

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一个复合属性,设置了6个值,分别对应:

animation-name(设置动画的名称):用来设置动画的名字,我们这里写的是moveAndChange ,也就是说我们就是要使用我们刚刚创建的动画。

animation-duration(设置整个动画的时间):以秒作为单位,我们这里写的是5s,表示整个动画的时间为5秒

animation-timing-function(设置播放动画的方式):播放动画的方式,常用的有linear(匀速),ease(先慢后快),ease-in,ease-out,ease-in-out等,我们使用的是linear匀速播放动画。

animation-delay(设置动画的延迟):以秒作为单位,我们写的是0.5s,表示延迟0.5秒之后开始播放动画。

animation-iteration-count(设置动画播放的次数):播放动画的次数,我们这里写的是infinite ,表示动画将会被播放无限次,如果写数字,那么就会播放数字对应的次数。

animation-direction(设置是否反向播放动画):我们写的是normal,表示正常播放动画,如果写的是

alternate则表示要反向播放动画,大家也可以自己试一试这个效果。

最终,我们通过@keyframes创建动画,通过animation设置动画,成功完成了这个复杂的动画效果。

3.转换

在css3中,我们通过transform属性可以设置元素的转换效果,具体的效果如下:

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代码效果如下:

如上图所示,本来div盒子的位置是left:0,top:0;

但是我们通过transform: translate(300px,300px);将盒子进行了偏移,所以,盒子的位置发生了改变。

B.旋转

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代码效果如下:

如上图所示,本来div盒子应该是四四方方的。

但是,经过我们的代码transform: rotate(45deg); //deg为单位,表示度数。

进行了45度的旋转之后,呈现出来的就是一个菱形的盒子了,旋转的正方向为顺时针,负方向为逆时针。

C.缩放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代码效果如下:

如上图所示,本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放

scale的第一个参数为0.5,表示横向缩小为0.5倍

scale的第二个参数为0.25,表示纵向缩小为0.25倍。

scale的参数如果为1,则表示不进行任何缩放,小于1就是做缩小,而大于1表示做放大。

小结:transform转换中其实还包含了skew(倾斜),matrix(矩阵转换),相对来说用到的不是特别多,所以在本文中我们便不再做介绍。

4.flex布局

Flex布局,可以简便、完整、响应式地实现各种页面布局。

Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代码效果如下:

如图所示,咱们通过display:flex将.parent元素设置为了flex盒子,那么子元素将会按照justify-content设置的方式进行元素的排列,目前看来,和我们没有设置flex盒子的效果是一致的。

接下来我们更改一下,将justify-content设置为flex-end,效果如下图所示:

所以我们就应该发现,flex-start是让所有的子元素从父元素的左侧开始排列

而flex-end是让所有的子元素从元素的右侧开始排列。

我们再来更改一下,将justify-content设置为center,效果如下图所示:

更厉害了,子元素在父盒子的中央位置排列显示了。

然后,我们再将justify-content设置为space-around,效果如下图所示:

它是平均分配的形式为每一个子元素设置了间距,但是看起来有点变扭。

所以我们推荐将justify-content设置为space-between,效果如下图:

我们还可以通过flex-wrap来设置子元素是否换行显示,以及flex-direction设置子元素排列的顺序。

这两个属性可以设置的值如下:

flex-wrap: nowrap;//不换行,会自动收缩

flex-wrap: warp;//换行,会自动收缩

flex-wrap: warp-reverse;//反转,从默认的从上到下排列反转为从下到上。

flex-direction:row; //从左至右一行一行进行子元素的排列

flex-direction:column; //从上到下一列一列进行子元素的排列

flex-direction:row-reverse; //从右至左一行一行进行子元素的排列

flex-direction:column-reverse; //从下到上一列一列进行子元素的排列

案例代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我们设置了flex-wrap: nowrap;(不换行,压缩所有的子元素在一行中显示),以及flex-direction: row-reverse;(反向排列)

代码效果如下:

如果设置为flex-wrap: warp(换行显示无法在一行显示的子元素),则效果如下:

如果将flex-direction: column;,则会纵向排列元素,效果如下图:

除了上面的这些给伸缩盒子父元素设置的样式之外,我们还可以可以伸缩盒子的子元素设置flex属性,用来设置平均分配整个父盒子的空间。

代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下:

如上图所示,每个盒子平均分配了父盒子的空间,原本宽度为20%,现在被拉伸了。

除此之外,咱们还可以使用flex属性进行进一步的设置,代码如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下图:

我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.

这是什么意思呢?

四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1/6宽度。

同理,另外三个盒子分别占据2/6,2/6,1/6的宽度,所以就形成了我们现在看到的效果。

原文来源于:黑马程序员社区


学习资源:

想学习css,可以关注:黑马程序员头条号,后台回复:css

SS中的伪类真是个神奇的东西,有时要实现某些布局的时候菜鸟都是divdiv,实在不行上flex,而高手一般都是用最少的元素来实现效果,比如巧妙的运用伪类来达到目的的同时减少元素节点,代码清爽了很多不用再写一坨div

这不,最近学习了几招伪类的使用,特此记录下。

列表最后一行左对齐

flex布局中,最后一行个数不满的情况:

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}

最后一行不足4个:

<div class="container">
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
    <div class="list"></div>
</div>

解决思路有很多,这里我只说一种方式:使用伪类动态计算最后一个元素的margin。比如每行有4个元素,最后一行只有3个,就计算最后一个的margin-right为“元素宽度+间隔大小”,若只有2个,则margin-right为”2个元素宽度+2个间隔大小”,以此类推,代码如下:

.container {
    display: flex;
    /* 两端对齐 */
    justify-content: space-between;
    flex-wrap: wrap;
}
.list {
    width: 24%; height: 100px;
    background-color: skyblue;
    margin-top: 15px;
}
/* 如果最后一行是3个元素 */
.list:last-child:nth-child(4n - 1) {
    margin-right: calc(24% + 4% / 3);
}
/* 如果最后一行是2个元素 */
.list:last-child:nth-child(4n - 2) {
    margin-right: calc(48% + 8% / 3);
}

效果:

黄色部分为动态计算的margin,上面代码最重要的就是.list:last-child:nth-child(4n - 1),骚操作,头一次见,稍微解释下:

  • .list:last-child:nth-child(4n - 1):说明最后一个同时也是4n-1个,就是要么第3个元素,要么第7个元素…
  • .list:last-child:nth-child(4n - 2):说明最后一个同时也是4n-2个,就是要么第2个元素,要么第6个元素…

文本状态的切换

元素的展开和收起也是会经常遇到的,默认收起状态,点击后就会展开,类似于点击弹出下拉菜单,只涉及到两种状态,也可以结合伪类实现:

.btn::after {
  content: '展开'
}

#exp {
  display: none;
}

#exp:checked+.btn::after {
  content: '收起'
}

html如下:

<div class="wrap">
  <input type="checkbox" id="exp">
  <label class="btn" for="exp"></label>
</div>

效果:

这里巧妙地借助:checked伪类实现状态的切换,换做javascript就要写好几行代码。

生成箭头

.arrow-button {
  position: relative;
  width: 180px;
  height: 64px;
  background: #f49714;
}

.arrow-button::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 64px;
  top: 0;
  right: -32px;
  background:
    linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
    linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: 0 bottom, 0 top;
}

效果:

根据文本长度自动调整字体大小

这个就很极客了,先看看效果:

这个是先效果的背后和第一个例子一样使用了伪类级联,同一个选择器上使用多个伪类,核心代码如下:

.box span {
    font-size: 40px;    
}
.box span:first-child:nth-last-child(n+13),
.box span:first-child:nth-last-child(n+13) ~ span {
    font-size: 30px;    
}
.box span:first-child:nth-last-child(n+17),
.box span:first-child:nth-last-child(n+17) ~ span {
    font-size: 20px;    
}
.box span:first-child:nth-last-child(n+25),
.box span:first-child:nth-last-child(n+25) ~ span {
    font-size: 14px;    
}

通过使用伪类级联能控制不同字符个数的样式。

能实现的效果还有很多,很多我也不会。。。

就我自己在开发时,很容易就把伪类这个东西抛之脑后了,下意识地习惯直接div一把梭,实现不了就用javascript,因为这种下意思的习惯成本很低,不要多加思考。其实有时候仔细想想,很多情况真的没必要“杀鸡用牛刀”,习惯也是有代价的,下意识的使用方式看起来似乎成本很低,但代码因此变得复杂,增加了后期的维护成本和理解成本。不光是我们在编码的时候,生活中也是如此,遇到问题不妨多思考,不要急于作出反馈。

参考

http://www.zhangxinxu.com/wordpress/?p=1514

https://www.zhangxinxu.com/wordpress/?p=8540

https://segmentfault.com/a/1190000040030723