高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*基本选择器*/
/*通配符选择器 标签选择器 类名选择器 ID选择器*/
/*高级选择器*/
/*并集选择器 通过逗号连接，可以写两个选择器用一套样式*/
.list-1,p{
color: red;
}
/*后代选择器 中间用空格引用，选择某个标签的后代*/
.box div{
font-size: 32px;
}
/*直接后代选择器 中间用大于号连接。一层一层找下去，直到找到目标元素*/
.box>div>ul>li{
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="list-1">hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li>
</ul>
<div>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</div>
</div>
<p>你好</p>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
</html>
标签的显示模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*
块元素：独占一行，可以设置宽高
行内元素:不独占一行，不可以设置宽高
行内块元素：不独占一行。可以设置宽高
缺点：元素里面的内容行数不齐时，容易塌陷
*/
div{
width: 200px;
height: 200px;
background-color: red;
/*display: inline;*/
/*转换成行内元素*/
display: inline-block;
/*转换成行内块元素*/
}
span{
width: 200px;
height: 200px;
background-color: yellow;
/*display: block;*/
/*转换成块元素*/
display: inline-block;
/*转换成行内块元素*/
}
</style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*伪类选择器 加在 选择器和大括号中间*/
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box:hover{
/*鼠标移入生效,鼠标离开消失*/
font-size: 50px;
width: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
hello
</div>
</body>
</html>
文本修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
a{
text-decoration: none;
/*删除下划线*/
}
a:hover{
text-decoration: underline;
/*鼠标移入添加下划线*/
}
p{
/*underline : 下划线
line-through : 删除线
overline : 上划线*/
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<p>今天天气不错</p>
</body>
</html>
css的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*id选择器大于类名选择器大于标签选择器大于通配符选择器*/
/*伪类选择器优先级为1*/
/*通配符选择器 优先级0*/
*{
color: red;
}
/*标签选择器 优先级1*/
div{
color: green;
}
/*类名选择器 优先级10*/
.box{
color: blue;
}
/*id选择器 优先级100*/
#pox{
color: pink;
}
</style>
</head>
<body>
<div class="box" id="pox">hello word</div>
<div>hello word</div>
<p>hello word</p>
<span>hello word</span>
</body>
</html>
