伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器</title>
<style>
a:link{
color: pink;
}
a:visited{
color: brown;
}
/*:hover 鼠标悬停*/
a:hover{
cursor: cell;/*悬停时鼠标为加号*/
font-size: 40px;
}
a:active{
font-size: 70px;
}
</style>
</head>
<body>
<a href="#">去百度</a>
</body>
悬停显示
hover鼠标悬停(最重要)
cursor鼠标样式
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li:first-child{
background-color: pink;
}
ul li:last-child{
background-color: green;
}
ul li:nth-child(4){
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
ul li:first-child{
bgc:red
}
将表格的第一个改成红色
last-child最后一个
ul li :nth-child(4)::selection选第四个(selection选中时)
(n)全选
(2n-1)选中数
(odd)奇数
(even)偶数
ul li :nth-of-type(3)只找li元素中的第三个
应用于子元素中有不同属性的时候,需要精确查找某元素中的
伪元素选择器
<style>
ul li::before{
content: "~";
}
ul li::after{
content: "666";
}
input::placeholder{--------表单提示词
color: red;
}
ul li:nth-child(4)::selection{------::selection选中时
color: pink;
}
</style>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li::before{
content: "~";
}
ul li::after{
content: "666";
}
input::placeholder{
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="sjhfk">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
ul li::before{
content:“456”
}在li元素显示出来的值前加上456
改成after就是在值后面加上456
input::placeholder {
表单提示词
}
文本水平对齐方式
text-align:center
文本样式
text-decoration:overline
单行垂直居中 行高等于元素高度/
line-height:200PX
去掉
list-style:none去掉无序列表默认的样式
行内元素无法设置宽、高,
要设置就转换成行内块元素加display:inline-block
元素显示模式
display:none隐藏元素,脱离文档流
背景图
background-image:url图片链接
background-repeat:no-reapt取消重复显示
边框
border-width边框宽度
-colour颜色
-radius边框弧度
border-top-left-radius:40%;左上角弧度
合并相邻边框(要加载table里面)
border-collapse:collapse
阴影
text-shadow:加像素值
轮廓线
outline
防止拖拽
resize:none
改变文字对齐方式
vertical:top\middle\bottom
脱离文档流原来的位置
display:none
元素保留
visiblility:hidden
绝对定位
position:relative
:absolute绝对定位
bottom/left
固定定位(相对于可视区域)
position:fixed;
right/top/width/height/bgc
粘性定位
postion:sticky;