前端--css复合选择器及元素显示模式（3）

一、复合选择器

选择器分为基础选择器和复合选择器，复合选择器建立在基础选择器之上。

复合选择器包括为：后代选择器、子选择器、并集选择器、伪类选择器

1、后代选择器

选择父元素里面的子元素，外层标签写在前面，内层标签写在后面，中间用空格分隔。

 ol li {
            color: blue;
        }

2、子选择器

选择作为某元素的最近一级子元素（选亲儿子），中间用>隔开。最终选择的是子集

 .navv>a {
            color: red;
        }

3、并集选择器

选择多组标签给他们定义为相同的样式，用，连接。

 div,
        p,
        .pig li {
            color: pink;
        }

4、伪类选择器

用于向某种选择器添加特殊的效果，例如给连接添加效果，用（：）隔开

 /* 链接伪类选择器 lvha顺序不可颠倒*/
        /* 未坊问的链接a:link */
        a:link {
            color: black;
            text-decoration: none;
        }

        /* 已访问的 a:visited*/
        a:visited {
            color: orangered;
        }

        /* 鼠标经过链接时 */
        a:hover {
            color: aquamarine;
        }

        /* 鼠标按下链接文字时还没松开 */
        a:active {
            color: blue;
        }

        /* 伪类选择器  把获得光标的input表单选取出来*/
        input:focus {
            background-color: brown;
            color: aqua;
        }

二、元素显示模式

元素显示模式是元素以什么方式展示（比如div自己单独占一行，一行可以放多个span）

html元素分为块元素和行元素

1、块元素

块元素有<h1>—<h6>，<p>、<li>、<div>，div是最常见的

优点：自己独占一行

高、宽、外边距、内边距都可以控制

是一个盒子，里面可以放行内元素或者行内块元素

注意：文字类元素不能使用块级元素

<p>放文字，不可放块级元素

 /* 行内块元素可以设置宽高 */
        input {
            width: 249px;
            height: 35px;
        }

2、行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<span>等 ，span是经典的行内元素

特点：相邻行内元素在一行上，一行可以有多个行内元素

宽高不可设置

注意：链接里不能在放链接

<a>里面可以放块级元素

3、行内块元素

<img />、<input />、<td>，它们 同时具有块元素和行内元素的特点

特点： 和行内块元素在一行上，但他们之间有空白空隙

高度、行高、外边距和内边距都可以控制（块级元素特点）

三、元素显示模式转换

转换块元素display:block;

转换为行内元素：display:inline:

转换为块内元素：display:inline-block;