css基础知识

1.css
 1.1 什么是css
     负责优化界面

1.2如何引入css
     1.  ① 行内样式： 标签内部加入style属性
       ②内链式: 在 head 里面加入style标签
       ③ <link rel="stylesheet" href="css文件的路径">
        css如何操作的标签？选择器去操作标签
    2.基础选择器
        （1）标签选择器:标签名{
                         属性:属性值
                           }
        （2）class选择器:.标签中class的值{
                        属性:属性值
                          }
        姓名 可以重复 精确度也比较高
         （3） id选择器:#id值{
                          属性:属性值 
                   }
        
          （4)  通配符选择器:
                    *{
                           } 
                     相当于最大范围 中国 优先级最低【精确度小】
                  注意:解决的问题:避免同一个标签有过多的属性设置，而且每个属性设置之间操作的元素不相同
             选择器的优先级：id>class>标签>*
      (5)多类名选择器 
              在class中可以有多个类名，id不行   优先级就是谁在最下面就执行谁

           
1.3 连接伪类选择器
     1.a:link  未访问的连接
     2.a:visited  已访问的链接
     3.a:hover  鼠标悬停时显示的属性
     4. a: active   鼠标点击时显示的属性
  伪类选择器的延申  
   hover和active 在可以用于其他标签中
   a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
1.4结构伪类选择器
      标签/类选择器:first-child 选择第一个元素进行操作  【部分浏览器低版本中不兼容】
      标签/类选择器: :last-child  选择最后一个元素进行操作
      标签/类选择器::nth-child()even 【偶数】odd 【奇数】数字指定元素【从前到后选择】【可以指定多个】
      标签/类选择器::nth-last-child(数字) 跟上面的一样【他是从后到前选择】数字代表倒数第几个
       
       标签:first-of-type 选择第一个标签元素
        :last-of-type 选择最后一个标签元素
        :nth-of-type(数字  even) ven 【偶数】odd 【奇数】数字指定元素【从前到后选择】【可以指定多个】
        :nth-last-of-type 跟上面的一样【他是从后到前选择】数字代表倒数第几个
       子元素选择器  
    
         ***\*:only-child: 选择的元素是他父元素的唯一一个元素

         ***\*:only-of-type:选择的元素是他上级元素的唯一一个相同类型的子元素

         ***\*:empty: 现在的元素里面没有任何的内容或子节点

          ***\*:root:     匹配文档的根节点
    
       为了方便记忆，把CSS的结构伪类选择器归为四类：

          1. 通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth-last-child(n)（逆序过滤）

          2. 通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和 :nth-last-of-type(n)（逆序过滤）

          3. 特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type

          4. 特定状态的元素：:root（根节点）、:only-child（独子元素）、:only-of-type（独子类型元素）、:empty（孤节点）
1.5目标伪类选择器
      :target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。
1.6CSS复合选择器
       复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

    1.交集选择器
        交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或者id选择器，两个选择器之间不能有空格，
         交集选择器是并且的意思，即...又...的意思
   注意点：
        1、选择器之间没有任何的连接符号
        2 、选择器可以是class，也可以是id，还可以是标签，但标签要放在前
        比如： p.one 表示选择类名既是.one 且是段落标签。
        2.并集选择器
        并集选择器是各个选择器通过***\*逗号连接\****而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器。
        并集选择器表示 和 的意思，只要使用逗号分隔，所有选择器都会执行后面的样式。
        3.兄弟选择器
         兄弟选择器是CSS3.0新增的一个选择器，语法格式： A~B或者 A+B
 ‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。
 ‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。
       4.后代选择器
       后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用*空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
      子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。
       5.子元素选择器
       子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,
      注意：这里的子元素表示亲儿子，不包含孙子、重孙子之类。

         6.属性选择器

              表示选取标签带有某些特殊属性的选择器。
         8.伪元素选择器（CSS3）

        1. E::first-letter 块级文本的第一个单词或字
        2. E::first-line 文本的第一行
         3. E::selection 可改变选中文本的样式
        注意：“.”一个点是类选择器， “：”一个冒号是伪类选择器， “::”两个冒号是伪元素选择器。
        E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

注意：before与after表示在***\*盒子内部\****的前端和后端插入内容。