一 基础选择器
标签选择器：选择的标签的‘共性’，而不是特性
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:blue14 ????????}15 ????????/*毗邻选择器，就是a和span紧挨着*/16 ????????a+span{17 ????????????color:yellow18 ????????}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{ ???????????????width: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 ????????????/*width: 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 ????我是一个div26 </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>11-1 css属性选择器
原文地址：https://www.cnblogs.com/huningfei/p/9260070.html