一、CSS选择器

  CSS3选择器规范地址：        https://www.w3.org/TR/2011/REC-css3-selectors-20110929/

  CSS3选择最新选择器规范:  https://www.w3.org/TR/selectors 

  问题：

  1.css的全称是什么？Cascading  style sheets

  2.样式表的组成： 规则——选择器+声明块——   声明—— CSS合法的属性名+属性值

  3.浏览器读取编译css的顺序？从右往左 

1.基本选择器

  通配符选择器       * { margin: 0; padding: 0; border: none; }

  元素选择器   body （任何一个HTML元素）

  类选择器        .

  ID选择器        #

  后代选择器   空格

   选择器分组   h1,h2,h3 此处的逗号我们称之为结合符

 2.基本选择器扩展

   子元素选择器       > 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素

   相邻兄弟选择器 +它只会匹配紧跟着的兄弟元素

   通用兄弟选择器 ~ 它会匹配所有的兄弟元素(不需要紧跟)  

3.属性选择器

 存在和值属性选择器

   [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

   [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

   [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

  子串值属性选择器

    [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。

    [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。（^拖字符）

    [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

    [attr*=val] : 选择attr属性的值中包含字符串val的元素。

 4.伪类与伪元素选择器（不在DOM树中）

  链接伪类 (注意:link，:visited，:target是作用于链接元素的！)

    :link表示作为超链接，并指向一个未访问的地址的所有锚

     :visited    表示作为超链接，并指向一个已访问的地址的所有锚

     :target    代表一个特殊的元素，它的id是URI的片段标识符 （ 面试题：用css实现选项卡）

   动态伪类(注意:hover，:active基本可以作用于所有的元素！)

     :hover     表示悬浮到元素上

     :active     表示匹配被用户激活的元素（点击按住时）

     由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

      隐私与:visited选择器:只有下列的属性才能被应用到已访问链接：color       background-color      border-color

     表单相关伪类

      :enabled 匹配可编辑的表单

      :disable   匹配被禁用的表单

      :checked          匹配被选中的表单   （实例：自定义单选按钮）

       :focus                匹配获焦的表单

　　结构性伪类

       index的值从1开始计数！！！！

　　index可以为变量n(只能是n),index可以为even (奇数)odd（偶数）

        #wrap ele:nth-child(index)  表示匹配#wrap中第index的子元素 这个子元素必须是ele

        #wrap ele:nth-of-type(index)     表示匹配#wrap中第index的ele子元素

         除此之外:nth-child和:nth-of-type有一个很重要的区别！！nth-of-type以元素为中心！！！

         :nth-child(index)系列   :first-child

                                             :last-child

                                              :nth-last-child(index)

                                              :only-child       (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

         :nth-of-type(index)系列:first-of-type

                                              :last-of-type

                                              :nth-last-type(index)

                                               :only-of-type (相对于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

                                               :not         

                                              :empty(内容必须是空的，有空格都不行，有attr没关系)

       伪元素   

       ::after     ::before      ::firstLetter         ::firstLine         ::selection

5.css声明的优先级

 选择器的特殊性：

 选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如    0,0,0,0

  一个选择器的具体特殊性如下确定：

1.对于选择器中给定的ID属性值，加 0,1,0,0

 2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0

 3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1

 4.通配符选择器的特殊性为0,0,0,0

  5.结合符对选择器特殊性没有一点贡献

  6.内联声明的特殊性都是1,0,0,0

  7.继承没有特殊性

 特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)，选择器的特殊性最终都会授予给其对应的声明，如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意：id选择器和属性选择器      div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）  

重要声明：

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前插入  !important  来标志，必须要准确的放置  !important 否则声明无效。 !important 总是要放在声明的最后，即分号的前面， 标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。 实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决， 非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决， 如果一个重要声明与非重要声明冲突，胜出的总是重要声明

继承：

继承没有特殊性，甚至连0特殊性都没有，0特殊性要比无特殊性来的强

来源：

css样式的来源大致有三种（实例：自定义IE浏览器页面背景）

 创作人员、读者、  用户代理  

 权重：

读者的重要声明

创作人员的重要声明

创作人员的正常声明

 读者的正常声明

 用户代理的声明

 层叠：

1.找出所有相关的规则，这些规则都包含一个选择器

 2.计算声明的优先级，先按来源排序，在按选择器的特殊性排序， 最终按顺序

二、自定义字体和字体图标

@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，可以消除对用户电脑字体的依赖

font-family  所指定的字体名字将会被用于font或font-family属性

 src  字体资源

注意: 不能在一个 CSS 选择器中定义 @font-face

字体图标:1.制作一套矢量图

              2.将矢量图与字符进行绑定

              3.使用工具或者站点生成一套字体

               4.最终使用

 字体兼容处理网站  https://www.fontsquirrel.com/tools/webfont-generator

   icomoon字体图标  https://icomoon.io/#home

实例：淘宝矢量图标文字

        

三、新增UI样式

1.文本新增样式

opacity属性

指定了一个元素的透明度    ，默认值：1.0    ，不可继承

 新增颜色样式 rgba

文字阴影：

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）默认值：none     ，   不可继承 

           <color> 可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。

          <offset-x> <offset-y>必选。这些长度值指定阴影相对文字的偏移量。

         <offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。        

          <offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。

          如果两者均为0，则阴影位于文字正后方(如果设置了<blur-  radius> 则会产生模糊效果)。

          <blur-radius>  可选。这是 <length> 值。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡

         实例：用css实现背景透明文字不透明、文字阴影、浮雕文字、文字模糊、模糊背景

文字描边：

只有webkit内核才支持：-webkit-text-stroke（准确的来说不能算是css3的东西，但需要大家知道）

文字排版：

direction:控制文字的方向， 一定要配合unicode-bidi:bidi-override;来使用

 text-overflow :确定如何向用户发出未显示的溢出内容信号。它可以被剪切， 显示一个省略号（'...'）

实例： 怎么溢出显示省略号   (包裹区域必须不能让子元素撑开)

                    

 white-space=no-wrap

  overflow=hidden

  text-overflow=ellipsis

 

                  

标签：CSS3,知识,attr,val,特殊性,元素,实例,声明,选择器
来源： https://www.cnblogs.com/ibabyli/p/12371565.html