CSS选择器、显示转换和背景

一、复合选择器

1.交集选择器、 公共的部分   标签名.类名

                1、一般只用于标签名与类名的交集

                2、不会让id与其他选择器进行交集，因为id是唯一的

                3、通配符选择器不与其他选择器进行交集

 2. 并集选择器

                 选择器1,

                 选择器2,

                 选择器3 {

                  }

  3.子代选择器  父选择器>子选择器

               

  4.后代选择器  祖先选择器 后代选择器

二、伪类选择器

a的伪类： :link/:hover/:active/:visited

非a标签适用的伪类：:hover /:active

        1.未连接

        a:link {

        }

        清除浏览器缓存的快捷键 ctrl+shift+del

        2.鼠标移入时

        a:hover {

        }

        3.鼠标单击时

        a:active {

        }

        4.访问过

        a:visited {

        }

    去掉a标签默认的下划线 

    a {

      text-decoration:none;

    }

    去掉无序列表默认的小点和有序列表默认的序号 

    ul,

    ol {

      list-style: none;

    }

三、标签的显示模式

 标签==元素

 1.块状元素：hn/p/div/ol/ul/dl/dd/dd/li/table/caption/thead/tbody/tr/form/header/footer/section/article/nav/aside

            特点：

              1、有默认的宽高，宽度是父元素的100%，高度是内容撑起来的高度（表格系列标签除外）

              2、宽高可以设置的

              3、可以包含任意的元素（表格系列标签除外、h标签不能包含h标签、p不能包含p）

              4、独占一行

    2.行内元素：span/a/b/strong/i/em/u/ins/s/del

            特点：

              1、有默认的宽高，宽高都是内容所撑起来的

              2、不能设置宽高

              3、只能包含行内元素

              4、相邻的行内元素在同一行上显示

      3.行内块元素：img/input/label/select/option/button/textarea

            特点：

              1、有默认的宽高

              2、可以设置宽高

              3、一般不去包含其他元素（select--option）

              4、相邻的行内块元素在同一行上显示

四、元素之间的转换

      1.转换为块状元素 

       display: block; 

      2.转换为行内块元素 

      display: inline-block;

      3.转换为行内元素 

      display: inline;

五、背景

     1、背景色 

              background-color: red; 

              background-color:rgb(0,255,0) 

              background-color:#0000ff

     2、背景图 

              background-image:url(./images/peiqi.jpeg);

     3、背景图的平铺重复属性

              background-repeat: no-repeat;

      4、背景图的尺寸属性   x轴  y轴 

              background-size:900px 500px; 

      5、背景图的位置属性

          方位名词

          像素

          百分比

      background-position: right top;

      background-position: left bottom;

      background-position: center;

      background-position: 400px -100px;

      background-position: 100% 100%;