本文主要是介绍CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 一、复杂选择器
- 兄弟选择器：选择平级元素的唯一办法
- 属性选择器：
- 1、通用：基本用不着，太泛了
- 2、自定义：4种
- 伪类选择器：
- 1、目标伪类：
- 2、结构伪类：
- 3、元素状态伪类：
- 4、伪元素选择器：应用于文字，使网页看起来想杂志
- 5、否定伪类：选择器:not([本选择器的条件]) /*有兼容问题，少用*/
- 二、内容生成
- 1、伪元素
- 三、变形(transform)----迅速变化
- 1、旋转 rotate
- 2、位移 translate
- 3、缩放 scale
- 4、倾斜 skew
- 5、3D变形
- 四、过渡(transition) --缓慢变化 --简单动画
- 一、分别定义，每个属性要一一对应
- 二、整合transition属性：
- 三、transition:all 0.5s;对本元素触发变化后，变化了的所有属性生效
- 五、动画(animation) --关键帧动画 --无规律变化
一、复杂选择器
兄弟选择器：选择平级元素的唯一办法
-适用：通过已知元素选择之后的平级兄弟元素时
1、相邻兄弟选择器:
语法：p+b{/*平级的之后相邻的一个元素*/}
2、通用兄弟选择器：
语法：p~b{/*相同父元素下，p后所有的b生效*/}
属性选择器：
-通过元素的属性来定位元素
1、通用：基本用不着，太泛了
[title]{/*带有title属性的所有元素*/}
p[id]{/*附带id属性的p元素。*/}
p[id][class]{/*附带id和class属性的p元素*/}
2、自定义：4种
1、精确条件：
p[title="summary"]:附带title属性的p元素，且title的值为summary。
2、模糊条件：
开头：p[class^="b"]： class属性以b开头的所有p元素。
包含：p[class*="b"]： class属性包含b串的所有p元素
结尾：p[class$="b"]： class属性以b结尾的所有p元素。
3、模糊条件：很少用，只有class能用着，但没必要，直接用点就可以了
p[class~=" 单词 "]；附带class属性的p元素，class属性是空格隔开的单词列。
p[class!="value"]
伪类选择器：
伪类：是一种特殊状态，触发时状态生效，触发消失时，状态消失
1、目标伪类：
-:target 选择当前正在被跳转到的锚点元素
1、一次只能选择一个元素，如果有同名的name锚点，只选择第一个
2、唯一一个可以触发其他元素样式变化的伪类
3、target是要定义在锚点上，锚点被改变
4、锚点个性化定义可以用 E:target
5、触发的是a元素，锚点可以用id和name定义
示例： css
这篇关于CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(animation)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
