CSS之选择器
2018-02-13 本文已影响0人
追逐_chase
CSS是cascading style sheet 层叠式样式表的简写.
CSS是从审美的角度复测页面的样式
标签选择器
标签选择器就是标签的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
h1{
color: red;
font-size: 30px;
text-decoration: underline;
background: aquamarine;
font-style: italic;
}
</style>
</head>
<body>
<!--标签选择器-->
<h1>这是标签选择器</h1>
</body>
</html>
标签选择器.jpeg
类选择器
- 以class开头
- 在样式中 . + 类名 表示 ( 比如下面的例子：.lei{
}
) - 同一个标签可以有不同的class类，用空格隔开
- 知道抽取公共的类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
h1{
color: red;
font-size: 30px;
text-decoration: underline;
background: aquamarine;
font-style: italic;
}
.lei {
color: yellow;
background: aquamarine;
text-decoration: underline;
font-style: italic;
font-size: 50px;
}
</style>
</head>
<body>
<h1>这是标签选择器</h1>
<p class="lei teshu"> 这是类选择器</p>
<p class="teshu">这是teshu的类</p>
</body>
</html>
<style type="text/css">
.lv{
color:green;
}
.da{
font-size: 60px;
}
.xian{
text-decoration: underline;
}
</style>
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
公共的类.jpg
Id选择器
- 在一个html页面中不可以有相同的Id名
- id名的取名规范
- 只能以字母，数字，下划线
- 必须以字母开头
- 不能和标签同名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
#hezi{
background: aqua;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="hezi"></div>
</body>
</htm
id选择器.jpg
后代选择器
- 后代选择和在其他的选择之间 用 空格 隔开
- 比如 .houdai p 表示类选择器houdai所有的p
.houdai p{
background-color: bisque;
font-size: 50px;
color: red;
}
<div class="houdai">
<ul>
<li>
<p>后台选择器的测试</p>
</li>
</ul>
</div>
后代.png
交集选择器
交集.png
- 交集选择器满足2个条件（如上图所示）
- 必须是h3标签
- 必须是 special标签
- 交集选择器没有空格
h3.special {
background-color: bisque;
color: red;
}
<div>
<h3 class="special">交集选择器</h3>
<h3 class="special">交集选择器</h3>
<h3>交集选择器</h3>
<h3>交集选择器</h3>
<h3>交集选择器</h3>
</div>
并集选择器
- 不相关的标签用逗号隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
h3,li{
color: red;
}
</style>
</head>
<body>
<div>
<h3>这是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>这是个列表</li>
</ul>
</div>
</body>
</html>
通配符选择器
-
用 * 表示所有的元素
-
缺点：效率不高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<div>
<h3>这是一个标题</h3>
<p>是一个段落</p>
<ul>
<li>这是个列表</li>
</ul>
</div>
</body>
</ht
