CSS选择器基础知识与应用 - 第九期线上班

一、元素按显示方式分为哪几种？ 并举例。

1、按内容是否可替换，可分为置换元素和非置换元素。

1.1、置换元素，元素内容来自文档外部，可以替换成不同的资源。例如：<img>,<input>都是这类元素；

1.2、非置换元素，元素内容由文档直接提供，通常非置换元素的内容放在二个标签之间，所以大多采用双标签。例如：<h1><p><span><div><table><ul+li><a>等。

2、按元素是否独占一行，可分为块级元素和行内元素。

2.1、块级元素，总是独占一行显示，自动充满父级元素的内容区；块级元素二边不允许有任何其它元素，也就是它总是自带换行的；块级元素在没有内容撑开的情况下，需要设置宽高，否则无法感知其存在。例如：<div>, <ul+li>, <table>,<p>,<h1-h6>等；

2.2、行内元素，总是在一行文本元素的内部生成，它的宽高由所在行决定，不可以设置。例如：<span>,<input>, <em>,<strong>,<a>等。

总之，一切元素都是框，任何元素都会在页面上占据一定的空间，页面是以框的形式来显示它们，块级框对应的是块级元素，行内框对应的是行内元素，行内框的宽高，由它内部的内容决定，块级框的宽高，是由它内部的子元素决定。

二、 CSS是什么？它的主要作用是什么？

 CSS是层叠样式表（Cascading Style Sheets）的缩写，它是用来设置页面中的元素样式和布局。

三、 什么是CSS选择器，它的样式声明是哪二部分组成？

HTML页面中要实现对元素一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。它的样式声明由属性和属性值（例如：p{color:red;}）组成。

四、CSS简单选择器

根据元素的标签名称和属性来选择元素，是最朴素、最直观的方式，常用的简单选择器有以下5种。

实例

<style>
        /*元素选择器（标签选择器）*/
        p{
            color: green;
        }
        /*属性选择器*/
        p[class]{
            color: aqua;
        }
        p[class="red"]{
            color: mediumorchid;
        }
        p[id="blue"]{
            color: bisque;
        }
        /*类选择器*/
        .red{
            background-color: red;
        }
        /*ID选择器*/
        #blue{
            background-color: chartreuse;
        }
        /*群组选择器*/
        .red,h2{
            background-color: yellow;
        }
        /*通配符选择器*/
        html{
            font-size: 14px;
        }
        body *{
            font-size: 2rem;
        }
</style>

选择器优先级：ID选择器>类选择器>元素选择器

五、CSS上下文选择器

所谓上下文选择器，是指元素之间的结构关系，如层级、包含等，主要有4种选择器类型。

实例

<style>
    /*后代选择器*/
     section h2 {
         color: green;
     }
    /*父子选择器*/
    section > h2 {
        color: yellow;
    }
    /*同级相邻选择器*/
    #item + * {
        background-color: aqua;
    }
    /*同级所有选择器*/
    #item ~ * {
        background-color: coral;
    }
</style>

后代选择器：空格

父子选择器：>

同级相邻选择器：+

同级所有选择器：~

六、常用CSS结构伪类选择器

分为非限定类型和限定类型。

实例

<style> 
    /*选中页面内所有的ul下面的第二个子元素*/
     ul > :nth-child(2) {
         background-color: lightblue;
     }
    
    /*选中第一个ul下面的第二个子元素*/
    ul:first-child > :nth-child(2) {
        background-color: lightgreen;
    }
    
    /*选中第一个ul下面的最后一个子元素*/
    ul:first-child > :last-child {
        background-color: lightpink;
    }
    
    /*选中第一个ul下面的最后一个子元素中类型为<p>的所有元素*/
    /*参数是表达式，n从0开始，n+1--->表示的索引是：1,2,3,4...*/
    ul:first-child > :last-child > p:nth-child(n+1) {
        background-color: yellow;
    }
</style>

所谓非限定类型，是指只关注子元素的位置，忽略子元素类型（当然也可以指定类型）；所谓限定类型，是指既关注子元素的位置，也关注子元素类型（当然也可以忽略类型）。

七、常用CSS表单伪类选择器

实例

<style>
    /*选择所有有效的input表单元素*/
     input:enabled {
         background-color: red;
     }
    
    /*选择表单input所有的禁用元素*/
    input:disabled {
        background-color: blue;
    }
    
    /*选择表单input所有的必选项*/
    input:required {
        background-color: yellow;
    }
</style>