一 基础选择器
标签选择器：选择的标签的‘共性’，而不是特性
div{}、ul{}、ol{}、form{}
类选择器：.box{}
id选择器：#box{} 只能选择器的特性，主要是为了js
*通配符选择器：重置样式
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css学习</title> 6 <style> 7 /*#标签选择器*/ 8 p{ 9 color: red; 10 } 11 /*类选择器*/ 12 .c1{ 13 color:green; 14 } 15 /*id选择器*/ 16 #d2{ 17 color: yellow; 18 19 } 20 </style> 21 </head> 22 <body> 23 <div>div标签</div> 24 <div id="d2">div标签2</div> 25 <p class="c1">p标签</p> 26 <span class="c1">我是span标签</span> 27 <span>我是span2号</span> 28 29 </body> 30 </html>
二 高级选择器
1 后代选择器 子带选择器（儿子选择器） 毗邻选择器 弟弟选择器
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>高级选择器</title> 6 <style> 7 /*后代选择器(儿子，孙子，子子孙孙)*/ 8 div a{ 9 color: red; 10 } 11 /*儿子选择器*/ 12 div>a{ 13 color:blue 14 } 15 /*毗邻选择器，就是a和span紧挨着*/ 16 a+span{ 17 color:yellow 18 } 19 /*弟弟选择器,相当于这个标签下面的所有标签都生效*/ 20 a~span{ 21 color:aqua; 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <div> 28 <p> 29 <a>我是孙子p标签</a> 30 </p> 31 </div> 32 <a>我是儿子p标签</a> 33 <span>我是span1号</span> 34 <span>我是span2号</span> 35 36 </div> 37 38 39 </body> 40 </html>
2 交集选择器
交集选择器：第一个选择器是标签选择器，第二个选择器是类选择器
form input.active{
200px;
}
3 伪类选择器
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 <style> 7 /*去除超链接的下划线*/ 8 a{ 9 text-decoration:none; 10 } 11 /*鼠标放到超链接上线显示的样式*/ 12 a:hover{ 13 color: red; 14 15 } 16 17 /*设置第一个首字母的样式*/ 18 p:first-letter{ 19 color: red; 20 font-size: 30px; 21 22 } 23 /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ 24 p:before{ 25 content: 'alex'; 26 } 27 /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ 28 29 p::after{ 30 31 /*解决浮动带来的问题*/ 32 content:'.'; 33 display: block; 34 /* 100px; 35 height: 100px; 36 background-color: red;*/ 37 visibility: hidden; 38 height: 0; 39 } 40 </style> 41 </head> 42 <body> 43 <p>我是p标签1</p> 44 <a href="http://www.baidu.com">百度一下</a> 45 46 </body> 47 </html>
三 样式权重问题
1 行内的样式>内接样式>外接
例子：
1 <!--外接式和导入式只能同时存在一个--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>css引入方式</title> 7 <!--文件类型内接式--> 8 <style type="text/css"> 9 p{ 10 color: green; 11 width: 100px; 12 height: 100px; 13 } 14 </style> 15 <!--外接式，不用写style--> 16 <link rel="stylesheet" href="./css/index.css"> 17 <!--导入式--> 18 <style type="text/css" media="screen"> 19 @import url('./css/index.css'); 20 21 </style> 22 </head> 23 <body> 24 <div style="color:red;"> 25 我是一个div 26 </div> 27 <p>段落</p> 28 <a href="#">百度</a> 29 30 </body> 31 </html>
2 权重问题比较
100>010>001
id>类>标签
例子：
1 <!--优先级大小--> 2 <!--id class 标签 三者依次从左到右的个数，那个左边的数字大，那个就会生效，所以pa生效--> 3 <!DOCTYPE html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> 7 <title>选择器</title> 8 <!--下面这个是把默认的样式重置--> 9 <link rel="stylesheet" type="text/css" href="https://unpkg.com/reset-css@4.0.1/reset.css"> 10 <style type="text/css" media="screen"> 11 /*1 0 0*/ 12 #pa{ 13 color: yellow; 14 15 } 16 /*0 1 0*/ 17 .app{ 18 color:red; 19 } 20 /*0 0 1*/ 21 p{ 22 color: blue; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div id="box"> 29 <div> 30 <div> 31 <div class="child"> 32 <p id="pa" class="app">猜猜我是什么颜色</p> 33 34 </div> 35 </div> 36 </div> 37 38 </div> 39 <p>段落</p> 40 41 </body> 42 </html>
四 样式继承问题
继承来的属性权重为0，如果权重都为0，谁描述的近谁优先，就是写的越详细越优先
继承和权重
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>继承</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 div{ 12 width: 200px; 13 height:100px; 14 background-color: green; 15 color:red; 16 font-size: 20px; 17 text-align:center; 18 line-height: 100px; 19 /*设置行高可以让文字居中显示*/ 20 } 21 </style> 22 </head> 23 <body> 24 <div> 25 <p>德国</p> 26 </div> 27 28 29 </body> 30 </html>