01-CSS基础选择器与CSS3新增选择器

 一、CSS

(一)、什么是 CSS

CSS 指 层叠 样式 表 (Cascading Style Sheets)
​
WEB标准中的表现标准语言
简单说就是如何修饰网页信息的显示样式
目前推荐遵循的是W3C发布的CSS3.0
1998年5月21日由w3C正式推出的css2.1

(二)、CSS 特性

1、层叠性  ---  长江后浪推前浪，前浪死在沙滩上
    多种CSS样式的叠加，是浏览器处理冲突的一个能力,
    如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
​
    一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准
​
    1.样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式
    2.样式不冲突，不会层叠
​
2、继承性  ---  龙生龙，凤生凤，老鼠生的孩子会打洞
    指书写CSS样式表时，子标签会继承父标签的某些样式
    想要设置一个可继承的属性，只需将它应用于父元素即可
        可继承的属性有：
            字体系列属性：font、font-family、font-weight、font-size、font-style
            文本系列属性：color、text-align、line-height、text-decoration、
                        text-indent......
            列表系列属性: list-style
            光标系列属性：cursor
            元素可见属性：visibility
3、优先级  --- 胜者为王，败者为寇
    定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题
​
    1.继承样式的权重为0
        即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式
    2.行内样式优先
        应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级
    3.权重相同时，CSS遵循就近原则
        也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大
    4.CSS定义了一个!important命令，该命令被赋予最大的优先级
        也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级

(三)、CSS 权重

优先级规则：
        规则1：最近的祖先样式比其他祖先样式优先级高
        规则2："直接样式"比"祖先样式"优先级高
        规则3： 优先级关系：内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器
        
        规则4：权重原则     （内联）        1000、
                         （id）          0100、
                         （类，伪类，属性） 010、
                         （元素，伪元素）  0001、
                          其他           0000、继承属性没有权重
        规则5：属性后插有 !important 的属性拥有最高优先级,若同时存在，则再利用规则 3、4 判断优先级

(四)、CSS 权重CSS 设置样式

1、CSS基础选择器（设置样式的元素）

基本选择器
​
    1、通配符选择器
        * {
​
        }
        * 选择的是当前页面中所有的元素
​
    2、元素选择器  =======  权重为1
        元素名称 {
​
        }
        选择的是 当前页面中的 某一类元素
​
    3、id 选择器  =======  权重为100
        # id {
​
        }
        id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
        id 是独一无二的
​
    4、class 选择器 =======  权重为10
        .class {
​
        }
        class 选择器用于描述一组元素的样式，
        class 选择器有别于id选择器，class可以在多个元素中使用
        一个元素可以设置多个类名
​
    5、群组选择器
        使用逗号（,）表示
        把多个选择器写在一起，方便样式的组织管理，组内的选择器是任意类型的
​
    6、伪类选择器=======  权重为10
        伪类，用于向某些选择器添加特殊的效果。
        用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上
​
        设置 a标签 的四种状态
        :link访问前的状态
        :visited访问后的状态
        :hover鼠标移入效果
        :active激活状态(按下未松开)
        l-v-h-a : love-hate按照顺序书写
​
        需要注意的是：除了超链接的4种伪类选择器之外，其他伪类和伪对象选择器不被 IE6 及其以下版本浏览器支持
​
    7、后代选择器
        使用空格（ ）表示
        前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器
​
    8、伪元素选择器  =======  权重为1
        伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，
        这个容器不包含任何DOM元素，但是可以包含内容
​
        ::after         在选择器后增加内容
        ::before        在选择器前增加内容
        ::placeholder   设置input元素的placeholder内容的样式
        ::first-letter  选择器的首字母
        ::first-line    选择器的首行
        ::selection     改变被用户选取的部分文字的样式

二、CSS3 新增

(一)、什么是 CSS3

CSS3是CSS（层叠样式表）技术的升级版本，
于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，
主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
​
CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，
CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性
但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂

(二)、渐进增强和优雅降级（面试题）

渐进增强（Progressive Enhancement）：
    一开始就针对低版本浏览器进行构建页面，完成基本的功能，
    然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
    渐进增强相当于向上兼容
​
优雅降级（Graceful Degradation）：
    一开始就构建站点的完整功能，然后针对浏览器测试和修复
    比如一开始使用 CSS3 的特性构建了一个应用
    然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
    优雅降级相当于向下兼容
​
区别
    优雅降级是从复杂的现状开始，并试图减少用户体验的供给
    而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
    降级（功能衰减）意味着往回看
    而渐进增强则意味着朝前看，同时保证其根基处于安全地带

(三)、CSS3 新增选择器

1、层级选择器 
    使用大于号（>）表示 E > F
        子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
    使用波浪线（+）表示 E + F
        相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
    使用波浪线（~）表示 E ~ F
        相邻选择器类似，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
​
2、属性选择器  =======  权重为10
    E[attr]：只使用属性名，但没有确定任何属性值
    E[attr="value"]：指定属性名和属性值(值完整)
    E[attr~="value"]：指定属性名，并且具有属性值，
    此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
    E[attr^="value"]：属性值是以value开头的(一部分也可以)
    E[attr$="value"]：属性值是以value结束的(一部分也可以)
    E[attr*="value"]：属性值中包含了value(一部分也可以)
    E[attr|="value"]：属性值是value或者以“value-”开头的值
​
3、结构伪类选择器   =======  权重为10
    (el):first-child            匹配属于任意元素的第一个子元素的 el 元素
    (el):first-of-type          选择父元素中的第一个 el 元素
    (el):last-child             选择所有 el 元素的最后一个子元素
    (el):last-of-type           选择父元素中最后一个 el 元素
    
    (el):empty                  匹配没有子元素（包括文本节点）的 el 元素
    
    (el):nth-child(n)           选择所有 el 元素的父元素的第 n 个子元素
    (el):nth-of-type(n)         选择所有p元素第 n 个为 el 的子元素
    (el):nth-last-child(n)      选择所有 el 元素倒数的第 n 个子元素
    (el):nth-last-of-type(n)    选择所有p元素倒数的第 n 个为 el 的子元素
        odd  even  numN
    (el):only-child             选择所有仅有一个子元素，并且子元素是 el 元素
    (el):only-of-type           选择所有仅有一个子元素中为 el 的元素
​
4、否定伪类选择器 =======  权重为10
    :not(el)                选择所有 el 以外的元素
​
5、状态（表单元素）伪类选择器 =======  权重为10
    :focus                      选择元素输入后具有焦点
    :enabled                    匹配每个已启用的元素
    :disabled                   匹配每个被禁用的元素
    :checked                    匹配每个已被选中的  元素
    :required                   选择有"required"属性指定的元素属性
    :optional                   选择没有"required"的元素属性
    :read-only                  选择只读属性的元素属性
    :read-write                 选择没有只读属性的元素属性
    :valid                      选择所有有效值的属性
    :invalid                    在表单元素中的值是非法时设置指定样式
    :in-range                   用于标签的值在指定区间值时显示的样式
    :out-of-range               选择指定范围以外的值的元素属性
​
6、目标伪类选择器  =======  权重为10
    E:target
    用来匹配文档中url中某个标志符的目标元素
    url中的标志通常会包含一个#，后面带有一个标志符名称
    
    target的大白话总结：
        ●指定选择器：#brand:target 对应的 a标签一点击,则会触发此样式！
        ●自动匹配全部选择器:target 只要对应的a标签点击,则匹配的选择器就自  动触发样式！
​
    target 实现 tab 切换的案例