#是占位符
<a href = "malito:aaa@bbb.com">联系我们</a>
层次高的会覆盖层次低的
内联样式
<p stple = 'color:red;font-size:40px'>
内部样式表
<style type = 'text/css'> </style>
为指定样式设置
<llink rel= 'stylesheet' type= 'text/css' href = 'css/style.css'>
css注释/*内容*/ 必须写在style中
选择器 声明快
p {color :xx ; font-size:xx;}
p#p$*4
ctrl+/注释
ctrl+shift+d 复制
span为文字设样式
标签名{}
id选择器
#id属性值{}
类选择器 通过class属性选中一组元素
.class属性值{}
选择器分组 可以选中多个选择器
选择器1 选择器2 选择器n{}
通配选择器 所有样式
*{}
符合选择器
选择器1.选择器2.选择器n{}
后代元素选择器
祖先元素 后代元素{}
子元素选择器 选中父元素里指定的子元素
父元素>子元素
伪类选择器 都是冒号开头
名称：选择{}
文本输入框
<input type = 'text'>
input:focus{背景色}
p::selection{}
p::-moz-selection{}
伪元素
p:first-letter{内容}
p:first-line{内容}
p:before{content:内容; color:}开头 / after结尾
p:first-child{内容} one last最后
p:nth-child(第几个){内容}
first-of-type{内容}
兄弟元素选择器
span + {内容}后一个 ~所以的兄弟元素
否定伪类
p:not(内容)：{} 否定，不是
a的伪类
样式继承
把样式个祖先元素，让子类继承
跟背景相关的样式不能被继承
选择器权重：
！important 最高优先级
内联样式 1000！
id选择器 100
类和伪类 10
元素选择器 1
通配 * 0
继承的样式，没有优先级
一样的话使用后面的
并集选择器单独计算优先级
！important 最高优先级
<p title = '内容'> 任何标签都可以用
p[title]{} title属性标签
[属性名 = 属性值]
[title^ = ‘ab’] 以ab开头的 $结束
块元素
无论多少都会独占一行
div p h1~h6 ul li...
内联元素（行内元素）不会独占一行
span a img iframe
块元素包含内联元素 a除外
a可以包含任意元素，出来它本身
复习：
使用伪元素来表示元素中的一些特殊的位置
一般设置常用的命令：颜色:color 字体:font-size 背景色:background-color
:link 表示普通的链接（没访问过的链接）
:visited 表示访问过的链接
:hover 表示鼠标移入的状态
:active 表示超链接被点击的状态
brfore 前 after后
可以将CSS样式编写到head中的style标签里，称为内部样式表
作业
plate 元素选择器
bento 元素选择器
#fancy id选择器
plate apple 后代元素选择器
#fancy pickle 复合选择器
.small 类选择器
orange.small 类选择器
bento orange 后代元素选择器
plate,bento,plate 并集选择器
* 通配选择器 选择一个类里所有的东西
plate* 后代元素选择器（plate中所有的元素）
plate+apple 兄弟选择器 （不明白为什么要这样写）
plate~pickle (同上)
plate>apple 子元素选择器
orange:first-child 子元素选择器
:only-child 子元素选择器 （只选择一个子元素）
.small:last-child 子元素选择器
plate:nth-child(3) 子元素选择器
nth-last-child(4) 子元素选择器
apple:first-of-type 子元素选择器
plate:nth-of-type(even) 子元素选择器
plate:nth-of-type(2n+3) 子元素选择器
apple: only-of-type 子元素选择器
.small:nth-child(even) 子元素选择器
bento:empty 子元素选择器（子元素为空）
apple:not(.small) not选择器
---- 吕东泽
网友评论