css3学习篇之选择器
1 基本选择器
*{}
说明：选择所有元素
ID选择器:
#box1{}
说明：选择id为 “box1”的元素
类选择器:
.box1{}
说明：选择所有类为“box1”的元素
元素选择器：
div{}
说明：选择所有div元素
后代选择器：
#box .smallBox{}
说明：选择所有id为“box”下类为“box1”的元素
子元素选择器（直接后代选择）
#box>.smallBox{}
说明：选择id为“box”下类为“smallBox”的所有元素
相邻兄弟选择器
.box .smallBox+.smallBox2{}
说明：选择类为“box”下类为“smallBox”下一个相邻的类为“smallBox”的兄弟元素（条件：1.下一个兄弟元素 2.相邻）
通用兄弟选择器
.box .smallBox~.smallBox2{}
说明：选择类为“box”下类为“smallBox”后面的类为“smallBox2”的所有元素（条件：1.兄弟元素 2.元素后面）
分组选择器
.box,.smallBox{}
说明：选择所有类为“box”和类为“smallBox”的所有元素
2 属性选择器
2.1 存在和值选择器
存在选择器
div[name]{background: chocolate}
说明：选择所有div中有属性为name的所有元素
值选择器
div[name="sss"]{background: cornflowerblue}
说明：选择所有div中有属性为name并且值为“sss”的所有元素
div[name~="box"]{color: #ffff00;}
说明：选择所有div中有属性为name并且值包含“box1”的所有元素
2.2 子串值选择器
div[name|="con"]{color: #1b6d85;background: #4c4c4c;}
说明：选择所有div中有属性为name并且值是“con”或者以“con-”开头的所有元素
div[name^="cont"]{color: #4cae4c;background: #4c4c4c;}
说明：选择所有div中有属性为name并且值是“cont”或者以“con” 开头的所有元素
div[name$="Box1"]{color: #ffff00;background: #faebcc;}
说明：选择所有div中有属性为name并且值是“Box1”或者以“Box1” 结尾的所有元素
div[name*="Box"]{color: #ffff00;background: #269abc;}
说明：选择所有div中有属性为name并且值是“Box”或者包含“Box” 的所有元素
3 伪类与伪元素选择器
3.1 伪类与伪元素选择器
a:link{
background:#c9302c;
}
说明：设置超链接的背景色，（必须放在hover和active前面，否则会失效）
a:visited{
background:#d6d6d6;
}
说明：设置访问后的超链接的背景色（必须放在hover和active前面，否则会失效;color、background-color、border-color有效，其他属性无效）
:target{
display: block;
}
<a href="#div1" target="_blank" rel="external nofollow" >超链接1</a>//选中时id为div1的元素display：block；
<a href="#div2" target="_blank" rel="external nofollow" >超链接2</a>//选中时id为div2的元素display：block；
<a href="#div3" target="_blank" rel="external nofollow" >超链接3</a>//选中时id为div3的元素display：block；
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
说明：选中id为点中的超连接的uri的元素，并设置样式
3.2 动态伪类（可以用在div或者其他元素中）
#test2:hover{
background: lightcoral;
说明：id为“test2”的元素鼠标移入时改变样式
#test2:active{
background: #761c19;
}
说明：id为“test2”的元素鼠标点击时改变样式
4 表单伪类选择器
input:enabled {}
说明：可以点击的input设置样式
input:disabled{}
说明：禁用的input设置样式
input:focus {}
说明：获得焦点的input设置样式
input:checked {}
说明：选中的input设置样式
伪类选择器实现自定义单选按钮
<style>
label{
width: 150px;
height: 150px;
position: relative;
float: left;
border:solid 1px darkgrey;
}
label input {
position: relative;
float: left;
left: -50%;
top: -50%;
}
label div {
position: absolute;
float: left;
width: 100%;
height: 100%;
}
input:checked+div{
background: #000;
}
</style>
</head>
<body>
<label>
<input type="radio" name="box">
<div></div>
</label>
<label>
<input type="radio" name="box">
<div></div>
</label>
<label>
<input type="radio" name="box">
<div></div>
</label>
5 伪类与伪元素选择器
5.1 结构性伪类
Nth-child（index）系列
#box div:nth-child(2){
background: #ec971f;
}
说明：选中id为“box”中所有子元素并且的第二个并且是div的元素（如果box下面的第二个子元素不是div则不会被选中）
#box :nth-child(1){
background: #ec971f;
}
说明：选中id为“box”中的第一个子元素（后面的属性与类似）
:nth-child(1){
background: #ec971f;
}
选中所有有父容器的第一个元素（后面的属性与类似）
#box div:first-child{
background: #ec971f;
}
说明：选中id为“box”中所有子元素并且中的第一个并且是div的元素（如果不是div则不会被选中）
#box div:nth-last-child(2){
background: #ec971f;
}
说明：选中id为“box”中所有子元素并且中的第最后二个并且是div的元素（如果不是div则不会被选中）
#box div:nth-last-child(2){
background: #ec971f;
}
说明：选中id为“box”中所有子元素并且中的第最后二个并且是div的元素（如果不是div则不会被选中）
#box div:only-child{
background: #ec971f;
}
说明：选中id为“box”中唯一一个子元素并且该子元素是div的元素（如果不是div则不会被选中，如果box中有一个以上也不会被选中）
总结：冒号前面不加类型表示匹配任何类型，冒号前面的可以匹配类、标签名、id，括号中填入odd代表奇数，even代表偶数
5.2 Not
#box p:not(:last-child){
background: #f0ad4e;
}
说明：最后一个p标签不选中，其他标签都选中
5.3 伪元素选择器
一个元素只有有两个伪元素,一个::after，一个::before
#box2::after {
content: "";
width: 100px;
display: block;
height: 100px;
background: #5bc0de;
}
说明：选中box2下面的伪元素
#box2::before {
content: "";
width: 100px;
position: relative;
float: left;
display: block;
height: 100px;
background: #8a6d3b;
}
说明：选中box2前面的伪元素
#box2::first-letter {
color: red;
font-size: 2em;
}
说明：选中box2中的第一个字（box中可以有其他元素，但是如果第个元素内容为空时还是会选中第一个元素的””,””也算是内容）
#box2::first-line {
color: royalblue;
font-size: 2em;
}
说明：选中box2中的第一行字（box中不可以有其他元素）
5.4伪元素使元素垂直居中（图片垂直居中最佳方案）
.box {
width: 100%;
height: 200px;
background: #818175;
text-align: center;
}
.box::after{
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
.box2{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
background: #ac2925;
}
<div class="box">
<div class="box2"></div>
</div>
原理：
- inline-block元素的基线取决于较高的那个兄弟的基线，vertical-align: middle使元素基线居中
- 给父容器添加一个子元素，该元素是一个伪元素，该元素高度设置为100%，当设置vertical-align: middle时，伪元素的基线就会在水平方向
- 想要居中的元素设置vertical-align: middle，并设置为display:inline-block
6 Root
:root{
border: solid 1px red;
}
说明：选中根元素
![flex弹性布局中的flex：1的理解[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)