CSS3 高级- 复杂选择器、内容生成、变形(transform)、过渡(transition)、动画(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

:target{
   
	width:200px;
	height:200px;
	border:1px solid red;
}
a:target{
   /*a元素在公共样式基础上再加block*/
	display:block;
	border:1px solid green;
}
<p><a href="#new1" >跳转到内容1 </a></p><br/>
<p><a href="#new2" >跳转到内容2 </a></p><br/><br/>
<a name="new1" >new1 </a>
<div id="new2">new2</div>
html
<p><a href="#news1">跳转到内容1</a></p>
<p><a href="#news2">跳转到内容2</a></p>
<a name="news1">内容1.。。</a>
<div id="news2">内容2.。。</div>

2、结构伪类：

匹配父元素的首个、最后一个、