知识点
基本选择器
标签选择器
类选择器
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~255color:rgb(120,120,120)
rgba
A：代表alpha 不透明度 值 0-1color: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>
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/1d38a846d0bb
共同学习，写下你的评论
评论加载中...
作者其他优质文章
