700字范文 > css选择器的定义做了有什么体会 css复合选择器有哪三种 – CSS – 前端边框 css

css选择器的定义做了有什么体会 css复合选择器有哪三种 – CSS – 前端边框 css

时间：2021-01-15 18:58:24

2、id选择器 #id属性值{ }

3、类选择器 .class属性值{ }

4、选择器分组(并集选择器)

作用：通过它可以同时选中多个选择器对应的元素(通常用于集体声明)

语法：选择器1，选择器2，选择器n{ }

5、复合选择器(交集选择器)

作用：选择更准确更精细的目标元素并为其设置属性

语法：选择器1选择器2选择器n{ }

!注意选择器之间不能有空格，要紧挨在一起

6、通配选择器

作用：用来选中页面中所有的元素

语法：*{ }

7、后代元素选择器

作用：选中指定元素的指定后代元素

语法：祖先元素后代元素{ }

8、子元素选择器

作用：选中指定父元素的子元素

语法：父元素>子元素

9、伪类选择器

伪类表示元素的一种特殊状态

:hover 移入时元素的状态

:visited 已被访问过后的元素的状态

:active 被点击时元素的状态

10、属性选择器

作用：根据元素中的属性或属性值来选取指定元素

语法：[属性名]选取含有指定属性的元素

? [属性名=“属性值”]选取含指定属性值的元素

? [属性名^="属性值"] 选取属性值以指定内容开头的元素

? [属性名$="属性值"] 选取属性值以指定内容结尾的元素

? [属性名*="属性值"] 选取属性值包含指定内容的元素

11、兄弟元素选择器

+选择器

作用：选中一个元素后紧挨着的指定的兄弟元素

语法：前一个+后一个(作用在后一个)

~选择器

作用：选中后边所有的制定兄弟元素

语法：前一个~后边所有

@ keyframes创建动画的好处？

@keyframes 语法规则在动画过程中，可以多次更改CSS样式。指定的变化发生时使用％，或关键字"from"和"to"，这和0％到100％相同。0％是开头动画，100％是当动画完成。为了获得最佳的浏览器支持，应该始终定义为0％和100％的选择器。

@keyframes就是个动画，可以理解成多个transform组成的一个组。语法：@keyframes 动画名 { from{ css1} to{ css2 } }

@keyframes 动画名{0% {css1}50% {css2}100% {css3}}注：使用animation属性来控制动画的外观，还使用选择器绑定动画。

二、animation属性值

当调用这个动画时用animation ，animation由六个属性组成：

animation-name 指定要绑定到选择器的关键帧的名称animation-duration 动画指定需要多少秒或毫秒完成animation-timing-function 设置动画将如何完成一个周期animation-delay 设置动画在启动前的延迟间隔animation-iteration-count 定义动画的播放次数animation-direction 指定是否应该轮流反向播放动画animation : 动画名时间速度曲线开始的时候延迟播放次数轮流反向播放举个例子看看：

让正方形从左上角向右上角再向右下角到左下角最后回到左上角，并且颜色也会随之变化

CSS3中使用@keyframes创建动画，实例讲解代码块

div{animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

}

@keyframes mymove

{

0% {top:0px; left:0px; background:red;}

25% {top:0px; left:100px; background:blue;}

50% {top:100px; left:100px; background:yellow;}

75% {top:100px; left:0px; background:green;}

100% {top:0px; left:0px; background:red;}