知识点
- 基本选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配符选择器
- 复合选择器
- 交集选择器
- 后代选择器
- 子代选择器
- 并集选择器
选择器
选择器是一个选择谁（标签）的过程。
选择器{属性:值； 属性:值;}
| 属性 | 解释 |
|---|---|
| width:20px; | 宽 |
| height:20px; | 高 |
| background-color:red; | 背景颜色 |
| font-size:24px; | 文字大小 |
| text-align:left / center / right | 内容的水平对齐方式 |
| text-indent:2em; | 首行缩进 |
| color:red; | 文字颜色 |
基础选择器
标签选择器
标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*标签选择器*/
div{
font-size: 50px;
color: red;
background-color: yellow;
width: 450px;
height: 200px;
}
p{
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<div>Web前端威武</div>
<div>Web前端威武</div>
<p>前端威武</p>
<p>前端威武</p>
<div>Web前端威武</div>
</body>
</html>
- 颜色的显示方式
- 直接写颜色的名称
red、green - 十六进制显示颜色
0~f
#000000;前2位代表红色，中间2位代表绿色，后边2位代表蓝色。 - rgb:每一位取值范围：
0~255
color:rgb(120,120,120)
- 直接写颜色的名称
- rgba
A：代表alpha 不透明度 值 0-1
color:rgba(102,120,120,0.5)
类选择器(重点)
.自定义类名{属性:值; 属性:值；}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*类选择去*/
.box{
font-size: :40px;
color: #ff0088
}
._miss{
background-color: #f8f8f8;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="box _miss">Web前端威武</div>
<div>前端威武</div>
<p>高新</p>
<p>就是666</p>
</body>
</html>
- 特点： 谁调用，谁生效。
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器。 - 类选择器命名规则
- 不能用纯数字或者数字开头来定义类名
- 不能使用特殊符号或者特殊符号开头（_下划线除外）来定义类名
- 不建议使用汉字来定义类名
- 不推荐使用属性或者属性的值来定义类名
- 页面布局常见命名规范
头：header
内容：content/container
尾：footer
侧栏：nav
栏目：column
页面外围控制整体布局宽度：wrapper
左右居中：left right center
登录条：login bar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
ID选择器
#自定义名称{属性:值;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
font-size: 40px;
color: rgb(0,255,255);
background-color: white;
}
#miss{
width: 450px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">Web前端威武</div>
<div id="miss">前端威武</div>
<p>高新</p>
<p>就是666</p>
</body>
</html>
特点：
一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
案例：Google的logo
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.G{
font-size: 200px;
color: rgb(21,105,234);
}
.o1{
font-size: 200px;
color: rgb(213,62,38)
}
.o2{
font-size: 200px;
color: rgb(253,182,5)
}
.g1{
font-size: 200px;
color: rgb(21,105,234);
}
.l{
font-size: 200px;
color: #019956;
}
.e{
font-size: 200px;
color: #D7422E;
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
</html>
案例效果
通配符选择器
*{属性:值;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
color: red;
background-color: #e8e8e8;
}
</style>
</head>
<body>
<div>Web前端</div>
<span>Web前端</span>
<p>Web前端</p>
</body>
</html>
特点：给所有的标签都使用相同的样式。
不推荐使用，增加浏览器和服务器负担。
复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。
交集选择器
标签+类（ID）选择器{属性：值；}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
font-size: 50px;
}
div.box{
color: red;
}
div#miss{
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">你好</div>
<p class="box">哈哈</p>
<div id="miss">Hello</div>
</body>
</html>
特点：即要满足使用了某个标签，还要满足使用了类（id）选择器。
后代选择器（重点）
选择器+空格+选择器{属性：值;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.box{
font-size: 40px;
color: red;
}*/
div p span{
font-size: 50px;
}
div span{
color: yellow;
}
.box .miss{
background-color: #ff00ff;
}
</style>
</head>
<body>
<div class="box">
<p><span class="miss">Web前端开发</span></p>
</div>
<div>前端开发威武<span>你好</span></div>
</body>
</html>
后代选择器首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边。
特点：
无限制隔代。
只要能代表标签，标签、类选择器、ID选择器自由组合。
子代选择器
选择器>选择器{属性:值;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div>span{
color: red;
}
p>span{
color: yellow;
}
</style>
</head>
<body>
<div>
<p><span>你好</span></p>
<span>hello</span>
</div>
</body>
</html>
选中直接下一代元素。
并集选择器
选择器+，+选择器+，选择器{属性:值;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span,p,div,h1{
color: green;
font-size: 50px;
}
.box,#miss,p,h1{
background-color: yellow;
}
</style>
</head>
<body>
<span class="box">你好</span>
<div id="miss">Hello</div>
<p>小伙子真帅</p>
<h1>小伙子，加油</h1>
</body>
</html>
复合选择器应用：
div.div1 ul.box li,div.div1 p{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.div1 ul.box li,div.div1 p{
color: green;
}
</style>
</head>
<body>
<div class="div1">
<ul class="box">
<li>你好</li>
</ul>
</div>
<div class="div1">
<p>大前端</p>
</div>
</body>
</html>
div.box p.p1,div.box div.div1 p,p{}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div.box p.p1,div.box div.div1 p,p{
color: red;
}
</style>
</head>
<body>
<div class="box">
<p class="p1">nihao</p>
<div class="div1"><p>哈哈</p></div>
</div>
<div class="box"><div class="div1"><p>Nice to meet you</p></div></div>
<p>hehe</p>
</body>
</html>
相邻兄弟选择器
选择器1+
++选择器2{}
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}。这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul>li{
font-size: 20px;
line-height: 30px;
}
/*ul > li + li{
color: #f40;
}*/
ul > li.item + li{
color: #f40;
}
</style>
</head>
<body>
<ul>
<li></li>
<li class="item"></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
