CSS笔记

选择器

通配选择器

*{
}
1
2

元素选择器

元素{

}
1
2
3

类选择器

.类名{

}
1
2
3

id选择器

#id名{

}
1
2
3

复合选择器

交集选择器

/*p元素且类名为beauty的元素*/
p.beauty {
    
}
.rich.beauty {
    
}
1
2
3
4
5
6
7

并集选择器

又称分组选择器

.rich,.beauty,.navtop,#myIMage{
}
1
2

后代选择器

<style>
    ul li{
        
    }
style>
<ul>
	<li>li>
    <li>li>
    <li>li>
    <div>
        <li>li>
    div>
ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子代选择器

<style>
    div>a{
    }
style>
<div>
    <a href="">a>
    <a href="">a>
    <a href="">a>
    <p>
        <a href="">a>
    p>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

兄弟选择器

<style>
    /*向下找紧紧相邻（中间不能被其他元素隔开）的兄弟  --相邻兄弟选择器*/
    div+p{
        
    }
    /*向下找兄弟 --通用兄弟选择器*/
    div~p{
        
    }
style>

<div>div>
<p>p>
<p>p>
<p>p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

属性选择器

<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">你好1div>
<div title="anihtao2">你好2div>
<div title="nihao3u">你好3div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

伪类选择器

动态伪类选择器

<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="#">链接1a>
<a href="www.baidu.com">链接2a>
<input type="text">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

结构伪类选择器

<style>
    /* 选中div的第一个儿子元素且它是p元素 
    一下例子中，假如第一个p之前有个别的元素，就选不中了*/
    div>p:first-child{
        color:red;
    }
style>
<div>
    <p>第一段p>
    <p>第二段p>
    <p>第三段p>
    <p>第四段p>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

:last-child 选中最后一个元素
:nth-child(n) 选中第n个元素
:nth-child(2n) 选中第偶数个元素（也可以用even）代替
:nth-child(2n+1) 选中第奇数个元素
:ntl-child(-n+5) 选中前五个元素
1
2
3
4
5

:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第n个
1
2
3

否定伪类选择器

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

UI伪类选择器

/* 选中的是勾选的复选框或单选按钮 */
input:checked{}
/* 选中的是被禁用的input元素 */
input:disabled{}
/* 选中的是可用的input元素 */
input:enabled{}
1
2
3
4
5
6

目标伪类

: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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

语言伪类

<style>
    /* 根据指定的语言选择元素（本质是看lang属性的值） */
    div:lang(en){
        color: red;
    }
style>
<div>第一个divdiv>
<div lang="en">second div第二个div>
<p>前端p>
<span>span标签span>
1
2
3
4
5
6
7
8
9
10

伪元素选择器

<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>199p>
<p>299p>
<p>399p>
<p>499p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

选择器优先级

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);
1
2
3
4

第三种表示：HEX与HEXA

/*HEX:无透明度*/
background-color: #363B40;
/*HEXA:有透明度*/
background-color: #363B40EE;
1
2
3
4

第四种表示：HSL与HSLA

/*HSL:无透明度【色相、饱和度、亮度】*/
background-color: #363B40;
/*HSL：有透明度*/
background-color: #363B40EE;
1
2
3
4

文本

文本间距

/*字母间的间距*/
letter-spacing:**px;
/*单词间的间距*/
word-spacing:**px;
1
2
3
4

文本修饰

上划线 下划线 删除线

text-decoration:overline;
text-decoration:underline;
text-decoration:line-throught;
/*【线条也可以控制比如:删除的红色的虚线*/
text-decoration:line-throught dotted red;
1
2
3
4
5

文本缩进

div{
    text-size:20px;
    text-indent:40px;
}
1
2
3
4

文本对齐-水平

text-align：center;
1

文本属性-行高

line-height:**px;
line-height:normal;
line-height:1.5;
line-height:150%;
1
2
3
4

列表

ul{
    /* 列表符号 */
    /* list-style-type: decimal; */
    /* 列表符号的位置 */
    /* list-style-position: inside; */
    /* 自定义列表符号 */
    /* list-style-image: url("./images/首页文章列表符号.png"); */
    /* 复合属性 */
    list-style: decimal inside url("./images/首页文章列表符号.png");
}
1
2
3
4
5
6
7
8
9
10

表格相关属性

边框相关属性

这里的属性，其他元素也能用，比如span

border-width: 1px;
border-color: balck;
border-style: solid;
/* 简写属性 */
border: 1px solid black;
1
2
3
4
5

表格独有的属性

table{
    border: 2px solid black;
    width:500px;
    /* 控制表格的列宽 */
    table-layout: fixed;
    /* 控制单元格之间的距离【合并单元格情况下，此效果失效】 */
    border-spacing: 5px;
    /* 合并相邻的单元格的边框 */
    border-collapse: collapse;
    /* 隐藏没有内容的单元格【合并单元格情况下，视觉上不奏效】 */
    empty-cells: hide;
    /* 设置表格标题的位置 */
    caption-side: top;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

背景相关属性

/* 设置背景颜色，默认值是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;
1
2
3
4
5
6
7
8
9
10
11
12

鼠标相关属性

div{
    /* 设置鼠标移入div时鼠标的形状 */
	cursor: pointer;
}
1
2
3
4

处理内容溢出

overflow:hidden;
overflow:scroll;
overflow:auto;
1
2
3

隐藏元素的两种方式

div{
    /*页面上不占位*/
    display:none;
    /*页面上站位*/
    visibility:hidden;
}
1
2
3
4
5
6

浮动

float

元素浮动后的特点

1、脱离文档流

2、浮动后默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高

3、不会独占一行，可以与其他元素共用一行

4、不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding

5、不会像行内块一样被当做文本处理（没有行内块的空白问题）

浮动后的影响：

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。

对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

解决浮动的影响：

定位

相对定位

position:relative
left:10px;
/*top、bottom、left、right 参考原始的位置*/
1
2
3

应用场景：

1、微调元素的位置的时候

2、能和绝对定位一起使用

绝对定位

参考的是它的包含块。如果没有脱离文档流时候父元素就是它的包含块。脱离文档流时候第一个开启定位的祖先元素就是它的包含块。

position:absolute
top:10px;
/*top、bottom、left、right*/
1
2
3

绝对定位的特点：

1、脱离文档流，会对后面的兄弟元素、父元素有影响

2、left不能和right一起设置，top和bottom不能一起设置

3、绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主

4、绝对定位的元素，也能通过margin调整定位，但是最好不要这么做

5、无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素

定位元素的默认宽高都是被内容撑开的，且能再设置宽高

固定定位

参考视口

position:fixed;
top:10px;
/*top、bottom、left、right*/
1
2
3

固定定位的特点：

1、脱离文档流，会对后面的兄弟元素、父元素有影响

2、left不能和right一起设置，top和bottom不能一起设置

3、固定定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主

4、固定定位的元素，也能通过margin调整定位，但是最好不要这么做

5、无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素

定位元素的默认宽高都是被内容撑开的，且能再设置宽高

粘性定位

参考离它最近的能滚动的祖先元素，当它的父容器也被推走的时候它也会跟着走。

position:sticky;
top:10px;
1
2

粘性定位的特点：

1、不脱离文档流

2、最常用的是top值

3、粘性定位和浮动可以同时设置，但是不推荐这么做

4、固定定位的元素，也能通过margin调整定位，但是最好不要这么做