CSS3选择器

CSS 层叠样式表 不能脱离html而单独存在
语法：
1.属性名和属性值之间使用:隔开
2.多对属性之间使用；隔开
3.最后一对属性可以不加分号

id、class、style、title 四个公有属性

速记写法：
简写形式：
div
盒子：内容区+内边距+边框+外边距

padding 内边距

padding:10px; 上下左右均为10PX内边距wai
padding：10px 20px；上下10px；左右20px
padding：10px 20px 30px；上10px 左右20px 下30px
padding：10px 20px 30px 40px； 上 右 下 左

margin 外边距
border-image
list-style{image type position}
backgorund
border:1px solid red

3.注释
/注释内容/
1.注释写法
2.注释作用
解释说明
便于代码的维护和管理
3.注释能否嵌套使用
注释不能嵌套使用
/*
*/

4.在html中引入CSS的几种方式
1.行内样式
style属性
2.内联样式
style标签

3.外部引入
创建一个以.css为后缀名的文件
link标签 优先解析CSS
@import url(); 优先解析html，不建议使用 不兼容ie

引入方式的优先级：
行内样式>内联样式/外部引用
就近原则：哪一个样式更靠近元素，那一个样式的优先级更高

外部link标签：实际开发
一、选择器
标签选择器
根据标签名称选择一类元素

id选择器
通过id属性选择一个元素
#value
类选择器
class
.value
普遍选择器
：所有
后代选择器
>：选择当前元素的直接子元素
空格：选择当前元素的所有后代元素，包含孙代元素
兄弟选择器
+：选择当前元素之后的一个兄弟
～：选择当前元素之后的所有兄弟元素
属性选择器
根据元素的属性选择一类元素
[id]:选择当前页面中具有id属性的元素
[class=‘one’]：选择当前页面中具有class属性并且属性值为one的元素
[class~=‘one’]：选择当前页面中具有class属性，并且属性值之一为one的元素
[class^=‘o’]：选择当前页面中具有class属性。并且属性值以o开头
[class$=‘o’]：选择当前页面中具有class属性。并且属性值以o结尾
[class=‘o’]：选择当前页面中具有class属性。并且属性值中包含o的元素
多选择器
使用逗号隔开多个选择器
div 5
p3
div,p{
width:100px;
height:100;
}
组合选择器：
将多个选择器组合到一起使用
div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素
伪类选择器：
:伪类名称
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(number/odd/even) 选中同级别中的第n个标签
数字/奇数/偶数
和状态相关的：
:hover 当鼠标悬停在某个元素上时
:avtive 当鼠标按下时的状态
:link 当前元素未被点击过的状态
visited 当前元素被访问过之后的状态
书写顺序：
link->visited->hover->active
伪元素选择器：
::伪元素名称

    <div>hello</div>
    
    ::first-letter第一个字符
    ::first-line第一行
    ::selection被选择的文本
    ::after
        content:'text'.url  行内元素转换成块级元素
        ()
    ::befor

选择器优先级：
根据特性值进行比较，特性值越大，优先级越高
!import不计入特性值，优先级最高

style属性：1000
id选择器：100
类选择器、伪类选择器、属性选择器：10
元素选择器、伪元素选择器：1