CSS复杂选择器、内容生成、弹性布局

1.复杂选择器

1.兄弟选择器

作用：获取某个元素平级的后面的兄弟元素

注意：兄弟选择器，只能向后找，不能向前找

（1）相邻兄弟选择器

  作用：获取紧紧挨在某元素后边的兄弟元素

  语法：选择器1+选择器2{ ... }

（2）通用兄弟选择器

  作用：获取某元素后的兄弟元素

  语法：选择器1~选择器2{ ... }

2.属性选择器

作用：通过元素所附带的属性及其值来匹配页面的元素

语法：

1、基本语法：[attr]
	作用：匹配附带 attr 属性的元素
	ex:
		1、[id] : 匹配页面中所有附带id属性的元素
		2、[class]:匹配页面中所有附带class属性的元素
2、elem[attr]
	elem : 表示任意元素
	attr : 表示任意属性
	作用：匹配页面中附带 attr 属性的 elem 元素
	ex:
		1、匹配页面中所有附带了id属性的div元素
			div[id]
		2、匹配页面中所有附带type属性的input元素
			input[type]
		3、.important[id]
3、[attr1][attr2]...
	作用：匹配同时附带多个 属性的 元素
	ex:
		1、匹配页面中即有id又有class的div元素
			div[id][class] { ... }
4、[attr=value]
	作用：匹配 attr 属性的值为 value 的元素
	ex:
		匹配页面中所有的文本框
			input[type=text]{ ... }
			input[type='text']{ ... }
			input[type="text"]{ ... }

3.伪类选择器

（1）目标伪类

  作用：突出显示活动的HTML锚点元素，匹配到被激活的锚点

  语法：  :target{…}

（2）结构伪类

1、:first-child
	匹配的元素是属于其父元素中的首个子元素
2、:last-child
	匹配的元素是属于其父元素中的最后一个子元素

	<style>
		div:first-child{
			 ...
		}

		div:last-child{
						
		}
	</style>

	<header>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</header>

3、:nth-child(n)
	匹配的元素是属于其父元素中的第n个子元素

	//将第二行中的第三列的背景颜色设置为 orange
        #tab tr:nth-child(2) td:nth-child(3){
				background-color: orange;
			}

4、:empty
	匹配没有子元素的元素
5、:only-child
	匹配的元素是属于其父元素中的唯一子元素

（3）否定伪类

  作用：将满足指定选择器的元素给排除出去

  语法：  :not(selector)　

4.伪元素选择器

（1） :first-letter 或 ::first-letter

  作用：匹配某元素中的首字符

（2）:first-line 或 ::first-line

  作用：匹配某元素中的首行

（3）::selection

   作用：匹配被用户选取的部分内容

  注意：只能修改文本颜色 和 背景颜色

练习：

1、创建一个div元素，id为d1，并且通过lorem生成几段文本
2、将d1中的首字符样式设置为 加粗的字体，红色的文本颜色，文字大小为20pt，右外边距15px
3、将d1中的首行文本设置为，文字颜色为 orange，斜体
4、将用户选取的部分内容设置为 红色背景，黄色文字

        <style type="text/css">
            #d1::first-letter{
                font-weight: bold;
                color: red;
                font-size: 20px;
                margin-right: 15px;
            }
            #d1::first-line{
                color: orange;
                font-style: italic;
            }
            #d1::selection{
                background-color: red;
                color: yellow;
            }
        </style>

2.内容生成

1.作用：使用CSS动态的向某元素中插入一部分内容

2.伪元素选择器

1、:before 或 ::before
	作用：匹配到某元素的内容区域之前
	<p>(:before)举头望明月</p>
2、:after 或 ::after
	作用：匹配到某元素的内容区域之后
	<p>低头思故乡(:after)</p>

3.属性：

属性：content

作用：向某位置处增加内容

取值：

1、字符串 ：用 "" 引起来的普通文本
2、url() ：要生成一副图像显示在指定的位置处

解决的问题：
	1、浮动元素父元素高度的问题
		.clear:after{
			content:"";
			display:block;
			clear:both;
		}
	2、子元素外边距溢出的问题
		#d2:before{
			content:"";
			display:table;
		}

3.弹性布局(Flexible Layout)

1.作用：是一种布局方式，是一种解决某元素中"子元素"的布局方式

2.flex容器：将元素变为flex容器后，那么所有的子元素都将成为flex项目，都允许按照弹性布局的方式来排列

  属性：display

  取值：

1、flex:将块级元素变为弹性布局的容器
2、inline-flex:将行内元素变为弹性布局的容器

  注意：

1、元素设置为 display:flex 之后，子元素的float,clear,vertical-align 将失效
2、子元素的尺寸是允许被修改的
3、弹性布局容器的text-align属性会失效

3.属性

（1）容器属性

1、flex-direction
	作用：指定容器的主轴及其排列方向
		主轴：项目排列的一根轴，如果横轴作为主轴的话，那么项目则横向排列，如果纵轴作为主轴的话，项目则纵向排列

		交叉轴：与主轴交叉的轴,如果横轴为主轴，那么纵轴则为交叉轴，如果纵轴为主轴，那么横轴则为交叉轴
	取值：
		1、row 
			默认值，即主轴为横轴，起点在左端
		2、row-reverse
			主轴为横轴，起点在右端
		3、column
			主轴为纵轴，起点在顶端
		4、column-reverse
			主轴为纵轴，起点在底端
2、flex-wrap
	作用:一根主轴排列不下所有的项目时,如何换行
	取值：
		1、nowrap ：默认值，即不换行，项目缩小
		2、wrap ：换行
		3、wrap-reverse
3、justify-content
	作用:定义项目在主轴上的对齐方式
	取值：
		1、flex-start : 在主轴的起点对齐
		2、flex-end : 在主轴的终点对齐
		3、center : 在主轴上居中对齐
		4、space-between ：两端对齐,第一个项目挨着起点，最后一个项目挨着终点，中间间隔平分
		5、space-around
4、align-items
	作用：项目在交叉轴上如何对齐
	取值：
		1、flex-start ：在交叉轴的起点对齐
		2、flex-end ：在交叉轴的终点对齐
		3、center ：在交叉轴上居中对齐
		4、baseline ：在交叉轴上基线对齐
		5、stretch ：如果项目未设置高度的话，将占满容器的整个高度

（2）项目的属性

  该组属性只能设置在某一项目上，只控制某一项目，不影响容器以及其他项目　　

flex-grow
	作用：定义项目的放大比例。如果容器有足够的多余空间的话，项目将如何放大
	取值：整数数字，默认为0，即不放大，取值越大，占据的剩余空间也就越多