这是我学习选择器和弹性盒模型做的笔记

选择器

基础选择器

通配符选择器

* {
 
}

标签选择器

h2{

}

类选择器

.box{

}

id选择器 id不能重复不推荐用id定义样式

#btn{

}

多类样式声明

<div class="a1 a2 a3"></div>

此时盒子拥有了三种类名下定义的样式

结构选择器用法

后代选择器

main article h2, article h1{/*后代选择器，并列选择器*/
	color: red;
}

子代选择器

main> article{
 color:blue;
}

兄弟选择器

<article>
	<h2></h2>
	<h1></h1>
	<h2></h2>
	<h2>
		<a>yemen</a>
	</h2>
	<div><h2></h2></div>
</article>

article h1~h2{
color:green;/**/
}

此时选中了article标签里面， h1标签后面的h2标签能被选中， h1前面的h2标签不能被选中， h2标签里的a标签能被选中， div标签里的h2不能被选中

article h1+h2{/*只有紧挨在h1后面的一个h2能被选中*/
	color:red;
}

属性选择器

设置一个属性

<h1 title></h1>

h1[title] {
  color: red；
}

设置多个属性

<h1 title h1></h1>

h1[title][h1]{/*要同时具备这两个属性才能被选中*/
	font-size:36px;
}

给属性设值

<h1 title="mmm"></h1>

h1[title="mmm"] {
color:red;
}

属性和值对应才能被选中

以指定字符开头

<h1 title="a1"></h1>
<h1 title="a12"></h1>

h1[title^="a1"]{
color:red;
}

==正则表达式语法==

以指定字符结束

h1[title$="2"]{
color:blue;
}

包含指定字符

h1[title*="houdunren"]{
text-decoration:none;
}

包含指定词

h1[title~="houdunren"]{
text-decoration:none;
}

词的范围比指定字符小，词必须是单独的，与左右有空格

只有指定词或者以指定词开头以短横杠连接可以被选中

h1[name="you"]

h1[name="you-qqq"]

伪类选择器

a:link{/*默认状态*/
color:black;
}

a:hover{/*鼠标悬浮*/
color:yellow;
}

a:active{/*点击时*/
color:red;
}

a:visited{/*访问之后*/
color:blue;
}

input:focus{/*聚焦时*/
color:green;
}

目标

<!--目标-->
<a href="#attention"> attention</a>

<div id="attention">attention div</div>

点击a标签就能跳转到id为attention的盒子

根选择器

html{
    color:red;
}

/*根伪类选择器*/
:root{/*与前面的选择器效果相同*/
	color:red;
}

空选择器

/*空选择器*/
li:empty{
display:none;/*没有内容的li标签不显示*/
}

后代选择器

article :first-child{
	color:red;
}

后代中每一个元素的第一个"儿子" 所有子元素的第一个子元素该子代被选中后它的所有后代都会继承这个属性

article>:first-child{/*第一个子代*/
	color:red;
}

article h1:first-child{/*article子代中的第一个元素且标签是h1，同时满足这两个条件才能被选中*/
color:red;
}


article h1:first-of-type{/*article子代中第一个标签为h1的元素*/
    color:red;
}

最后一个元素 原理上同

article:last-child{

}

article>:last-child{
color:red;
}

article h2:last-child {/*在article的后代中，对于每一个元素，h2满足是最后一个子元素，就能被选中*/
	color:red;
}

article>h2:last-of-type{/*article的子元素中最后一个标签为h2的元素*/
color:red;
}

唯一的子元素

article :only-child{/*后代当中，满足是父元素的唯一子元素，就能被选中*/
color:red;
}

article h3:only-child{/*article的后代当中，元素满足标签为h3且是父元素唯一的子元素，就能被选中*/
color:blue;
}

article>h1:only-of-type{/*article的子元素中，如果h1是article的唯一一个标签为h1的子元素，就能被选中，不管article有多少个子元素*/
	color:blue;
}

辨析：only-child only-of-type
only-child必须满足是父元素唯一的子元素
only-of-type需要满足是父元素唯一一个目标标签的子元素，即不管父元素有多少个"儿子"

根据元素编号灵活选择

ul li:nth-child(3){/*选择第3个*/
color:blue;
}

ul li:nth-child(2n){/*选择偶数子代*/

}

ul li:nth-child(2n-1){/*选择奇数子代*/

}

ul li:nth-child(odd){/*选择奇数子代*/

}

ul li:nth-child(even){/*选择偶数子代*/

}

ul li:nth-child(-n+2){/*只选择前两个*/

}

ul li:nth-child(n+2){/*从第2个元素开始*/

}

/*从最后一个元素开始数，其它原理跟上面一样*/
ul li:nth-last-child(3){/*倒数第3个*/

}

div h2:nth-child(2){/*div后代中同时满足标签是h2和是父元素的第二个子元素*/
}

div h2:nth-of-type(2){/*div的后代中同时满足标签是h2和是父元素的第二个h2子元素，不需要在所有子元素中排行第二*/

}

article>h2:nth-last-child(3){

}

article>h2:nth-last-of-type(2){

}

focus-within

div:focus-within{/*当div的子元素获得焦点之后，父元素的样式*/

}

排除选择器

div p:not(.a){/*div后代的p元素中，排除类名为a的*/

}

div p:not(:nth-child(2)){/*div后代的p元素中，排除排行为2的*/

}

通过表单伪类创建个性化表单

权重

就近原则

强制提升优先级

!important

.cover{
	color:green !important;/*这个是最高优先级*/
}

CSS继承

子元素会继承父元素的样式
继承没有权重 NULL
通配符权重0
0>NULL

使用预处理器解决样式权重

下载easy LESS插件新建后缀名为.less的文件

div{
	a{
		color:red;
	}
	a:hover{
		color:blue;
	}
}

文件会自动帮你编译成CSS样式文件

弹性盒模型

加入适用设备缩放的标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

声明弹性盒子

display: flex;/*块级弹性盒子*/
display:inline-flex;/*行级弹性盒子*/

改变元素方向

放在盒子中的元素，可设置它们的排列方向

display:flex默认水平排列改变排列方向
flex-direction:row行排列（默认）沿着水平轴从左侧开始排列
flex-direction:row-reverse行排列，沿着水平轴从右侧开始排列
flex-direction:column列排列，从上到下
flex-direction:column-reverse列排列，从下到上

控制弹性元素溢出换行处理

当元素行排列时

flex-wrap: wrap; 控制元素在溢出的时候换行,从上往下折行
flex-wrap:wrap-reverse;反向折行，从下往上

当元素列排列时

默认从左向右折行

flex-wrap: wrap; 从左往右折行
flex-wrap:wrap-reverse反向折行，从右往左

以上两种属性可以统一设置

flex-direction+flex-wrap == flex-flow

例如

flex-flow: row wrap;
flex-flow: row wrap-reverse;
flex-flow: column wrap;
flex-flow: column wrap-reverse;

轴概念

主轴与交叉轴

排列方式

主轴元素

justify-content: flex-start; /从主轴起点处对齐/ justify-content: flex-end; /从主轴终点处对齐/

注意对齐方式不同，轴的起点就不一样

justify-content: center主轴居中对其齐
justify-content: space-between 左右靠边贴紧，最中间的居中，元素之间间距相等
justify-content: space-around 元素会根据行宽自动确定左右边距，每个元素的左右外边距相等，此时两元素之间会呈现两倍间距
justify-content: space-evenly元素完全平均分布,左边距，右边距以及元素之间间距都相等

交叉轴

若主轴是水平轴，副轴是垂直轴

对垂直轴的设置如下

align-items: flex-start 对齐到一列的起点
align-items: flex-end 对齐到一列的重点
align-items: stretch 元素会拉伸以对齐起点和终点，此属性会被高度限制，优先级不如height

多行元素在交叉轴上的排列

多行的时候，对副轴的对齐方式设置：

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-evenly;
align-content: space-between;

样式控制

对弹性元素进行设置

交叉轴样式控制

div: first-child {
  align-self: stretch;/*这样可以单独设置它的排列样式*/
  height: auto;
}

可用空间分配

flex-grow:  1; /*对盒内元素平均分配所占空间*/

<style>
  div :first-child{
  flex-grow: 0;
}
div: nth-child(2){
  flex-grow: 1;
}
div nth-child(3) {
  flex-grow: 2;
}
</style>

控制元素缩小比例

<style>
  div :first-child{
  flex-shrink: 0;
}
div: nth-child(2){
  flex-shrink: 1;
}
div nth-child(3) {
  flex-shrink: 2;
}
</style>
<!--以上三个元素会按比例缩小-->

主轴的基准尺寸

flex-basis: 100px;/*设置主轴基准尺寸为100px*/

权重

大 max-width\max-height

到 flex-basis

小 width

组合定义

flex: 1 2 100px; /*分别是 flex-grow, flex-shrink, flex-basis*/
/*第一个值必须写*/

改变弹性元素的顺序

<style>
  div: nth-child(1){
	order:2;/*设置子元素排列顺序*/
  }
</style>

深入学习CSS之选择器与弹性盒模型

选择器