[TOC] # 写的位置 1. 页嵌式: ...... 写在页内 ~~~ <style type="text/css"> ...... </style> ~~~ 2. 连接式: 连到外部css文件,href表示路径 ~~~ <link rel="stylesheet" href="css/style.css"> ~~~ 3. 行内式: 写在行里 ~~~ <div style="width:100px;"></div> ~~~ 4. 导入式:`@import url(style.css);`导入外部css文件. 4种中用2连接式最好(正常情况下) **其权限是.3行内式>2连接式>1页嵌式>4导入式** # 写法 选择器是一个选择谁(标签)的过程 ~~~ 选择器{属性:值; 属性:值;} ~~~  # 基础选择器 标签选择器 ~~~ 标签{属性 : 值;} ~~~ 特点:标签选择器定义后,会将页面所有的元素都执行这个标签样式 ~~~ div { font-size:50px; } ~~~ ## 颜色的显示方式 * 直接写颜色的名称 * 十六进制显示颜色 0-9 a-f ~~~ #000000; 前2位代表红色,中间2位代表绿色,后边2位代表蓝色 ~~~ rgb ~~~ color: rgb(120,120,120); ~~~ rgba A代表alpha 不透明度 值 0-1 ~~~ color: rgba(102,217,239,0.5); ~~~ # 类选择器 ~~~ .自定义类名{属性名:值; 属性:值; } ~~~ ~~~ .box{ font-size:40px; } <div class="box">11</div> ~~~ 特点.谁调用谁生效 一个标签可以调用多个类选择器 多个标签可以调用同一个类选择器  # ID选择器 写法 ~~~ #自定义名称{属性:值;} ~~~ 特点: 一个ID选择器在一个页面只能调用一次.如果使用2次或者2次以上,不符合w3c规范,js调用会出问题 一个标签只能调用一个ID选择器 一个标签可以同时调用类选择器和ID选择器 # 通配符选择器 ~~~ *{属性: 值;} ~~~ 特点:给所有的标签使用相同的样式 不推荐使用,给浏览器和服务器负担 # 复合选择器 概念:两个或者两个以上的基础选择器通过不同的方式连接在一起 是即又的关系 * 交集选择器 ~~~ 标签+类(ID) 选择器{属性: 值;} ~~~ 特点:既要满足使用了某个标签,还有满足使用了类(id)选择器 ~~~ div .box{ color:red; } <div class="box">11</div> ~~~ # 后代选择器 所有后代 ~~~ 选择器+空格+选择器{属性: 值;} ~~~ 后代选择器首选要满足包含(嵌套)关系 父集元素在前边,子集元素在后面 特点:无限制隔代 只要能代表标签,类选择器,ID选择器自由组合 ~~~ .box span{ color:red; } <div class="box"> <span>11</span> </div> ~~~ # 子代选择器 **直接后代** 孙子不管 ~~~ 选择器>选择器 {属性:值;} ~~~ 选中直接下一代元素 ~~~ div>span{ color:red; } <div> <span>11</span> </div> ~~~ # 并集选择器 都变 ~~~ 选择器+,+选择器+,选择器{属性:值;} ~~~ ~~~ .box, #miss{ color:red; } <div class="box"> <span id="miss">11</span> </div> ~~~ # 交集选择器 由两个选择器构成,其中第一个标签选择器,第二个为class选择器,两个选择器中间不能有空格. 交集选择器是并且的意思. ~~~ p.one ~~~ # 伪类选择器 ## 链接伪类选择器 * :link 未访问的链接 * :visited 已访问的链接 * :hover鼠标移动到链接 * :active选定的链接 ~~~ a:link{} a{} 链接未访问的状态 a:visited{} 链接访问之后的状态 a:hover{} 鼠标放上去显示的状态 A:active{} 链接激活的状态 :focus{} 获取焦点的方式 ~~~ 注意写的时候,顺序不要颠倒lvha顺序 ~~~ a:hover { } ~~~ ## 结构伪类选择器 - :first-child :选取属于其父元素的首个子元素的指定选择器 - :last-child :选取属于其父元素的最后一个子元素的指定选择器 - :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型 - :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是数字、关键词或公式 n值为odd是所有奇数,even是所有偶数 n值为2n就是0,2,4,6,8... n值为3n就是0,3,6,9...... ~~~css li:first-child { /* 选择第一个孩子 */ color: pink; } li:last-child { /* 最后一个孩子 */ color: purple; } li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */ color: skyblue; } ~~~ ## 目标伪类选择器(CSS3) :target目标伪类选择器 :选择器可用于选取当前活动的目标元素 ~~~css :target { color: red; font-size: 30px; } ~~~ # 属性选择器 | 选择器 | 示例 | 含义 | | --------------------- | ---- | -------------------- | | `E[attr] ` | | 存在attr属性即可 | | `E[attr=val]` | | 属性值完全等于val | | `E[attr*=val]` | | 属性值里包含val字符并且在“任意”位置 | | `E[attr^=val]` | | 属性值里包含val字符并且在“开始”位置 | | `E[attr$=val]` | | 属性值里包含val字符并且在“结束”位置 | ~~~css /* 获取到 拥有 该属性的元素 */ li[type] { border: 1px solid gray; } /* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */ li[type="vegetable"] { background-color: green; } /* 使用空格分隔的 多个属性 其中有某个属性即可获取 */ li[type~="hot"] { font-size: 40px; } /* 获取以某个属性开头的语法 */ li[color^='green'] { background-color: orange; } /* 获取以某个值 结尾的属性 */ li[type$='t']{ color: hotpink; font-weight: 900; } /* 获取 属性中 拥有某个值的 元素 */ li[type*=ea] { font-size: 100px; } /* 如果属性的值 只有very 也能够获取 用来获取 多个属性 并且 使用-连接 */ li[price|='very'] { background-color: darkred; } ~~~ ~~~html <ul> <li type='fruit' color='green'>西瓜</li> <li type='vegetable' color='greenyellow'>西兰花</li> <li type='meat'>牛肉</li> <li type='meat hot'>猪肉</li> <li type='drink hot'>可乐</li> <li type='drink hot'>雪碧</li> <li price='very-cheap'>红酒</li> <li price='very'>白酒</li> </ul> ~~~ 伪元素选择器（CSS3) 1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等） 2. E::first-line 文本第一行； 3. E::selection 可改变选中文本的样式； ~~~css p::first-letter { font-size: 20px; color: hotpink; } /* 首行特殊样式 */ p::first-line { color: skyblue; } p::selection { /* font-size: 50px; */ color: orange; } ~~~ 4. E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为**行内元素**，且必须要结合content属性使用。 ~~~css div::befor { content:"开始"; } div::after { content:"结束"; } ~~~ E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。 `":"` 与 `"::"` 区别在于区分伪类和伪元素 # 总结