CSS笔记

选择器

通配选择器

*{}

元素选择器

元素{}

类选择器

.类名{}

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><ahref=""></a><ahref=""></a><ahref=""></a><p><ahref=""></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><divtitle="nihaot">你好</div><divtitle="nihao1">你好1</div><divtitle="anihtao2">你好2</div><divtitle="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><ahref="#">链接1</a><ahref="www.baidu.com">链接2</a><inputtype="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><pclass="fail"title="你要加油啊！孙七">孙七：58分</p><pclass="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><ahref="#one">去看第1个</a><ahref="#two">去看第2个</a><ahref="#three">去看第3个</a><ahref="#four">去看第4个</a><ahref="#five">去看第5个</a><ahref="#six">去看第6个</a><hr><divid="one">第1个</div><br><divid="two">第2个</div><br><divid="three">第3个</div><br><divid="four">第4个</div><br><divid="five">第5个</div><br><divid="six">第6个</div>

语言伪类

<style>/* 根据指定的语言选择元素（本质是看lang属性的值） */div:lang(en){color: red;}</style><div>第一个div</div><divlang="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><inputtype="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调整定位，但是最好不要这么做