1. CSS 选择器
1.1 基出选择器
基础选择器:标签选择器、id 选择器、类选择器和通配符选择器。
以下是基础选择器的示例代码:
1.标签选择器、id 选择器、类选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
p{
font-size: 50px;
color: red;
height: 100px;
}
/*类选择器*/
.W{
font-size: 50px;
color: green;
text-indent: 2em;
}
/*ID选择器*/
/*一个ID选择器只能在一个页面调用一次*/
#M{
font-size: 50px;
color: pink;
width: 200px;
height:100px;
}
</style>
</head>
<body>
<p>世界通史</p>
<p>菜根谭</p>
<div class="W">百年孤独</div>
<div id="M">人间词话</div>
<span class="W" >老人与海</span>
<br>
<span class="W" id="M">巴黎圣母院</span>
</body>
</html>
2.通配符选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器练习</title>
<style type="text/css">
*{
font-size: 50px;
color: red;
text-indent: 2em;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div >计算机</div>
<div>应用数学</div>
<P>CSS选择器</P>
<P>CSS选择器</P>
<span>前端</span>
</html>
1.2 复合选择器
复合选择器:交集选择器、并集选择器、后代选择器和子代选择器。
1.交集选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<!-- 标签+类、ID选择器{属性:值;} -->
<!-- 既要满足标签还要满足使用的id或类选择器 -->
<style type="text/css">
.box{
font-size: 50px;
}
div.box{
color: red;
}
#miss{
color: red;
}
div#miss{
width: 200px;
height: 60px;
font-size: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">高级程序设计</div>
<p class="box">穆斯林的葬礼</p>
<div id="miss">人间词话</div>
</body>
</html>
2.并集选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style type="text/css">
.box,#fox,span,h1{
font-size: 50px;
background-color: #00ff00;
color: yellow;
}
</style>
</head>
<body>
<div class="box">人间词话</div>
<p id="fox">人性的优点</p>
<span>人性的弱点</span>
<h1>语言的突破</h1>
</body>
</html>
3.后代选择器,元素的所有后代,包含元素后代的后代:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<!-- 标签+空格+标签{ 属性:值} -->
<style type="text/css">
div p span{
font-size: 50px;
color: red;
}
.box p span{
font-size: 80px;
color: green;
}
#frist span{
font-size: 120px;
color: blue;
}
</style>
</head>
<body>
<div>
<p><span>亨利之书</span></p>
</div>
<article class="box">
<p><span>会计刺客</span></p>
</article>
<div id="frist">
<p><span>一个明星的诞生</span></p>
</div>
</body>
</html>
4.子代代选择器,只包含元素的直接后代,不包含元素后代的后代:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<!-- 标签+空格+标签{ 属性:值} -->
<style type="text/css">
div p span{
font-size: 50px;
color: red;
}
.box p span{
font-size: 80px;
color: green;
}
#frist span{
font-size: 120px;
color: blue;
}
</style>
</head>
<body>
<div>
<p><span>亨利之书</span></p>
</div>
<article class="box">
<p><span>会计刺客</span></p>
</article>
<div id="frist">
<p><span>一个明星的诞生</span></p>
</div>
</body>
</html>
1.3 属性选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input[type=text][id=one]{
height: 20px;
background: pink;
/* 取消边框线 */
border-style: none;
}
</style>
</head>
<body>
文本输入框:<input type="text" value="text">
<br>
文本输入框:<input type="text" value="text" id="one">
<br>
密码输入框:<input type="password" >
<br>
普通按钮:<input type="button" value="button">
<br>
表单提交按钮:<input type="submit" value="submit">
<br>
</html>