选择器
通配选择器
*{
}
元素选择器
元素{
}
类选择器
.类名{
}
id选择器
#id名{
}
复合选择器
交集选择器
/*p元素且类名为beauty的元素*/
p.beauty {
}
.rich.beauty {
}
并集选择器
又称分组选择器
.rich,.beauty,.navtop,#myIMage{
}
后代选择器
<!-- 选中后代中所有li -->
<style>
ul li{
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<div>
<li></li>
</div>
</ul>
子代选择器
<!-- 选中div子代中的a元素 -->
<style>
div>a{
}
</style>
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<p>
<a href=""></a>
</p>
</div>
兄弟选择器
<style>
/*向下找紧紧相邻（中间不能被其他元素隔开）的兄弟 --相邻兄弟选择器*/
div+p{
}
/*向下找兄弟 --通用兄弟选择器*/
div~p{
}
</style>
<div></div>
<p></p>
<p></p>
<p></p>
属性选择器
<style>
/* 选中具有title属性的元素 */
[title]{
color:red;
}
/* 选中具有title属性，且属性值为nihao1的元素 */
[title="nihao1"]{
color:blue;
}
/* 选中具有title属性，且属性值以a开头的元素 */
[title^="a"]{
color:green;
}
/* 选中具有title属性，且属性值以u结尾的元素 */
[title$="u"]{
color:skyblue;
}
/* 选中具有title属性，且属性值含字母“t”的元素 */
[title*="t"]{
color:orchid;
}
</style>
<div title="nihaot">你好</div>
<div title="nihao1">你好1</div>
<div title="anihtao2">你好2</div>
<div title="nihao3u">你好3</div>
伪类选择器
动态伪类选择器
<style>
/* 选中没有访问过的a元素 */
a:link{
color:red;
}
/* 选中访问过的a元素 */
a:visited{
color:green;
}
/* 鼠标悬浮状态a元素 */
a:hover{
color:brown;
}
/* 激活状态（鼠标点下去，但是没有抬起来）的a元素 */
a:active{
color: chocolate;
}
/* 被获取焦点的元素 ---表单类元素才能用*/
input:focus{
color:antiquewhite;
background-color: black;
}
</style>
<a href="#">链接1</a>
<a href="www.baidu.com">链接2</a>
<input type="text">
结构伪类选择器
<style>
/* 选中div的第一个儿子元素且它是p元素
一下例子中，假如第一个p之前有个别的元素，就选不中了*/
div>p:first-child{
color:red;
}
</style>
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</div>
<style>
/* 选中div的后代p元素中 第一个p元素
且p的父级是谁无所谓，但p必须是其父级的第一个元素*/
div p:first-child {
color: red;
}
div
</style>
<div>
<p>第一段①</p>
<marquee>
<p>第一个②</p>
<p>第二个</p>
</marquee>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</div>
<style>
/* 第一个p元素
且p的父级是谁无所谓，但p必须是的第一个元素*/
div p:first-child {
color: red;
}
div
</style>
<div>
<p>第一段①</p>
<marquee>
<p>第一个②</p>
<p>第二个</p>
</marquee>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</div>
:last-child 选中最后一个元素
:nth-child(n) 选中第n个元素
:nth-child(2n) 选中第偶数个元素（也可以用even）代替
:nth-child(2n+1) 选中第奇数个元素
:ntl-child(-n+5) 选中前五个元素
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第n个
否定伪类选择器
<style>
/*选中的是div的儿子p元素，但是排除类名为fail的元素*/
div>p:not(.fail){}
/*选中的是div的儿子p元素，但是排除title属性值以“你要加油”开头的*/
div>p:not([title^="你要加油"]){}
/*选中的是div的儿子p元素，但排除第一个儿子元素*/
div>p:not(:first-child){}
</style>
<div>
<p>张三：98分</p>
<p>李四：88分</p>
<p>王五：78分</p>
<p>马六：68分</p>
<p class="fail" title="你要加油啊！孙七">孙七：58分</p>
<p class="fail" title="你要加油啊！老八">老八：48分</p>
</div>
UI伪类选择器
/* 选中的是勾选的复选框或单选按钮 */
input:checked{}
/* 选中的是被禁用的input元素 */
input:disabled{}
/* 选中的是可用的input元素 */
input:enabled{}
目标伪类
:target 选中锚点指向的元素
<style>
div{
height: 50px;
background-color:gainsboro;
}
div:target{
background-color: blue;
}
</style>
<a href="#one">去看第1个</a>
<a href="#two">去看第2个</a>
<a href="#three">去看第3个</a>
<a href="#four">去看第4个</a>
<a href="#five">去看第5个</a>
<a href="#six">去看第6个</a>
<hr>
<div id="one">第1个</div><br>
<div id="two">第2个</div><br>
<div id="three">第3个</div><br>
<div id="four">第4个</div><br>
<div id="five">第5个</div><br>
<div id="six">第6个</div>
语言伪类
<style>
/* 根据指定的语言选择元素（本质是看lang属性的值） */
div:lang(en){
color: red;
}
</style>
<div>第一个div</div>
<div lang="en">second div第二个</div>
<p>前端</p>
<span>span标签</span>
伪元素选择器
<style>
/* 选中div中的第一个 文字、字符、字母 */
div::first-letter{
color:red;
font-size: 20px;
}
/* 选中div中第一行文字 */
div::first-line{
background-color: antiquewhite;
}
/* 选中div中被鼠标选择的文字 */
div::selection{
background-color: aquamarine;
}
/* 选中的是input中的提示文字 */
input::placeholder{
color: skyblue;
}
/* 选中的是p元素中最开始的位置，随后创建一个子元素 */
p::before{
content:"￥"
}
/* 选中的是p元素中最后的位置，随后创建一个子元素 */
p::after{
content:".00"
}
</style>
<div>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas itaque similique aliquid atque rerum inventore mollitia, amet fugiat facilis ut cum nisi q
</div>
<br>
<input type="text" placeholder="请输入文字">
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
选择器优先级
ID选择器 > 类选择器 > 元素选择器 >通配选择器
权重（a,b,c）
a：ID选择器的个数
b：类、伪类、属性、选择器的个数
c：元素、伪元素、选择器的个数
颜色
第一种表示：颜色名
第二种表示：rgb与rgba
/*rgb：无透明度*/
background-color: rgb(138,34,226);
/*rgba：有透明度*/
background-color: rgba(138,34,226,0.5);
第三种表示：HEX与HEXA
/*HEX:无透明度*/
background-color: #363B40;
/*HEXA:有透明度*/
background-color: #363B40EE;
第四种表示：HSL与HSLA
/*HSL:无透明度【色相、饱和度、亮度】*/
background-color: #363B40;
/*HSL：有透明度*/
background-color: #363B40EE;
文本
文本间距
/*字母间的间距*/
letter-spacing:**px;
/*单词间的间距*/
word-spacing:**px;
文本修饰
上划线 下划线 删除线
text-decoration:overline;
text-decoration:underline;
text-decoration:line-throught;
/*【线条也可以控制比如:删除的红色的虚线*/
text-decoration:line-throught dotted red;
文本缩进
div{
text-size:20px;
text-indent:40px;
}
文本对齐-水平
text-align：center;
文本属性-行高
line-height:**px;
line-height:normal;
line-height:1.5;
line-height:150%;
列表
ul{
/* 列表符号 */
/* list-style-type: decimal; */
/* 列表符号的位置 */
/* list-style-position: inside; */
/* 自定义列表符号 */
/* list-style-image: url("./images/首页文章列表符号.png"); */
/* 复合属性 */
list-style: decimal inside url("./images/首页文章列表符号.png");
}
表格相关属性
边框相关属性
这里的属性，其他元素也能用，比如span
border-width: 1px;
border-color: balck;
border-style: solid;
/* 简写属性 */
border: 1px solid black;
表格独有的属性
table{
border: 2px solid black;
width:500px;
/* 控制表格的列宽 */
table-layout: fixed;
/* 控制单元格之间的距离【合并单元格情况下，此效果失效】 */
border-spacing: 5px;
/* 合并相邻的单元格的边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格【合并单元格情况下，视觉上不奏效】 */
empty-cells: hide;
/* 设置表格标题的位置 */
caption-side: top;
}
背景相关属性
/* 设置背景颜色，默认值是transparent */
background-color:skyblue;
/* 设置背景图片 */
background-image:url(../images/bg.jpg);
/* 设置背景图片的重复方式 */
background-repeat:no-repeat;
/* 控制背景图片的位置方式1：关键词 */
background-position:center；
/* 控制背景图片的位置方式1：用具体的像素值 */
background-positon:300px;
/* 复合属性 */
background:green url(../images/bg.jpg) no-repeat 300px;
鼠标相关属性
div{
/* 设置鼠标移入div时鼠标的形状 */
cursor: pointer;
}
处理内容溢出
overflow:hidden;
overflow:scroll;
overflow:auto;
隐藏元素的两种方式
div{
/*页面上不占位*/
display:none;
/*页面上站位*/
visibility:hidden;
}
浮动
float
元素浮动后的特点
1、脱离文档流
2、浮动后默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
3、不会独占一行，可以与其他元素共用一行
4、不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding
5、不会像行内块一样被当做文本处理（没有行内块的空白问题）
浮动后的影响：
对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。
解决浮动的影响：
定位
相对定位
position:relative
left:10px;
/*top、bottom、left、right 参考原始的位置*/
应用场景：
1、微调元素的位置的时候
2、能和绝对定位一起使用
绝对定位
参考的是它的包含块。如果没有脱离文档流时候父元素就是它的包含块。脱离文档流时候第一个开启定位的祖先元素就是它的包含块。
position:absolute
top:10px;
/*top、bottom、left、right*/
绝对定位的特点：
1、脱离文档流，会对后面的兄弟元素、父元素有影响
2、left不能和right一起设置，top和bottom不能一起设置
3、绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4、绝对定位的元素，也能通过margin调整定位，但是最好不要这么做
5、无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素
定位元素的默认宽高都是被内容撑开的，且能再设置宽高
固定定位
参考视口
position:fixed;
top:10px;
/*top、bottom、left、right*/
固定定位的特点：
1、脱离文档流，会对后面的兄弟元素、父元素有影响
2、left不能和right一起设置，top和bottom不能一起设置
3、固定定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
4、固定定位的元素，也能通过margin调整定位，但是最好不要这么做
5、无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素
定位元素的默认宽高都是被内容撑开的，且能再设置宽高
粘性定位
参考离它最近的能滚动的祖先元素，当它的父容器也被推走的时候它也会跟着走。
position:sticky;
top:10px;
粘性定位的特点：
1、不脱离文档流
2、最常用的是top值
3、粘性定位和浮动可以同时设置，但是不推荐这么做
4、固定定位的元素，也能通过margin调整定位，但是最好不要这么做
