CSS的选择器基础使用（标签选择、类、属性、伪类、表单伪类选择，ID选择，以及CSS调用优先级）-第九期线上班20191031

1、元素按显示方式分为哪几种, 并举例, 正确描述它们

元素按显示方式分为“块级元素”和“行内元素”

块级元素

1. 遵循：“最大化原则”，块级元素的特点都是独占一行，自动充满父级元素的内容区。

2. 在未设置样式的情况下无法与其他块级元素同行显示。

3. 高度在未设置的情况下随内容高度变化。

4. 块级元素有<div> <header> <nav> <footer> <p>,<form>等。

行内元素

1. 遵循：“最小化原则，行内元素的特点是宽高由所在行决定，不可以设定。

2. 例如: <span> <input> <em> <strong> <a>等。

2、CSS是什么? 它的主要作用是什么?

CSS层叠样式表（英文全称：Cascading Style Sheets），它主要的作用是用来设置HTML元素在文档中的布局与显示方式。
如果说HTML是一个人，那么CSS就是定义一个人的外表衣着，妆容，发型等。

3、什么是CSS选择器,它的样式声明是哪二部分组成?

CSS选择器就是通过CSS对HTML页面元素实现一对一，一对多，多对一的样式的定义。
一个HTML标签最终如何呈现是有CSS选择器来定义的。
CSS的样式声明由选择器+样式声明组成，例如：

img{                /** img就是选择器 **/
    width:500px     /** {}中的内容就是对选择器的定义 **/
}

4、举例演示CSS简单选择器(全部)

实例

<style type="text/css">
    nav{
        color:#f00;
    }
    section{
        color:#0f0;
    }
    footer{
        color:#00f
    }
    p[name="a1"]{
        color:#f00
    }
    div[name]{
        color:#0f0
    }
    .cls{
        color:#f00
    }
    #idSelect{
        color: #f0f;
    }
    table th,table td{
        color: #f00;
    }
    dl *{
        color:#f00
    }
</style>
<h3>元素选择</h3>
<hr>
<nav>我的nav标签  - 元素选择</nav>
<section>我是section标签  - 元素选择</section>
<footer>我是footer标签 - 元素选择</footer>
<h3>属性选择</h3>
<hr>
<p name="a1">我是P标签 - 属性选择</p>
<p name="a2">我是P标签 - 属性选择</p>
<div>我是DIV标签 - 属性选择</div>
<div name="a4">我是DIV标签 - 属性选择</div>
<h3>clas与ID选择</h3>
<hr>
<div class="cls">我是DIV标签 - class选择</div>
<div id="idSelect">我是DIV标签 - ID选择</div>
<h3>群组选择器</h3>
<hr>
<table border="1" cellspacing="0" cellpadding="5">
    <thead>
    <tr>
        <th>th单元格</th>
        <th>th单元格</th>
        <th>th单元格</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>td单元格</td>
        <td>td单元格</td>
        <td>td单元格</td>
    </tr>
    </tbody>
</table>
<h3>通配符选择器</h3>
<hr>
<dl>
    <dt>dt普通文本</dt>
    <dd>dd普通文本</dd>
    <dd><a href="">链接文本</a></dd>
</dl>

运行实例 » 

5、举例演示CSS上下文选择器(全部)

实例

<style type="text/css">
.list>li{
    color: #f00;
}
ul>li{
    color: #000;
}
.list2 li{
    color: #f00;
}      
.spc + dd{
    color: #f00;
}
div p ~ p{
    color: #f00;
}
</style>
<h3>父子选择器</h3>
<hr>
<ul class="list">
    <li>父子选择器</li>
    <li>
        <ul>
            <li>孙元素本身样式不会受影响</li>
        </ul>
    </li>
    <li>父子选择器</li>
</ul>
<h3>后代选择器</h3>
<hr>
<ol class="list2">
    <li>后代选择器</li>
    <li>后代选择器</li>
    <li>
        <ol>
            <li>父元素下所有符合条件的元素都会被改变</li>
        </ol>
    </li>
</ol>
<h3>同级相邻选择器</h3>
<hr>
<dl>
    <dd>同级相邻选择器</dd>
    <dd class="spc">同级相邻选择器</dd>
    <dd>同级相邻选择器</dd>
</dl>
<!-- 同级选择器 由[兄]+[弟]组成，选择的是[兄]标签后的一个同级标签，最终样式只会影响[弟]，[兄]不会有变化 -->
<h3>同级所有选择器</h3>
<hr>
<div>
    <p>同级所有选择器</p>
    <p>同级所有选择器</p>
    <p>同级所有选择器</p>
<!-- 同级所有选择器 由[起始] ~ [结束]组成，启示元素后所有元素样式都会有变化，但不包括[起始] -->
</div>

运行实例 » 

6、举例演示常用CSS结构伪类选择器(不少于四种)

实例

<style type="text/css">
        .pseudo-cls ul li:nth-child(3){
            color:#f00
        }
        .pseudo-cls ul li:first-child{
            color:#0f0
        }
        .pseudo-cls ul li:last-child{
            color:#00f
        }
        .pseudo-cls h2:first-of-type{
            color:#f00
        }
        .pseudo-cls p:nth-of-type(2){
            color:#f00
        }
    </style>
    <div class="pseudo-cls">
        <ul>
            <li>LI标签 first-child元素</li>
            <li>LI标签 nth-child元素</li>
            <li>LI标签 nth-child元素</li>
            <li>LI标签 last-child元素</li>
        </ul>
        <h2>H2标签 first-of-type</h2>
        <h2>H2标签</h2>
        <p>我是P标签 </p>
        <p>我是P标签 nth-of-type(2)</p>
    </div>

运行实例 » 

7、举例演示常用CSS表单伪类选择器(不少于三种)

实例

<style type="text/css">
        input:enabled{
            background-color: lightyellow;
        }
        input:disabled{
            background-color: lightcoral;
        }
        input:checked+label{
            color:red
        }
        input:required{
            background-color:#f00
        }

</style>
<form action="">
    <p>
    <label for="username">用户:</label><input type="text" id="username" name="username" placeholder="请输入用户名">
    </p>
    <p>
        <label for="password">密码:</label><input type="text" id="password" name="password" placeholder="请输入密码">
    </p>
    <p><label for="male">性别：</label><input type="radio" name="gender" id="male"><label for="male">男</label><input type="radio" name="gender" id="female"><label for="female">女</label></p>
    <p>
        <label for="phone">手机号:</label><input type="tel" id="phone" name="phone" placeholder="手机号必须输入" required>
    </p>
    <p>
        <label for="warn">警告:</label><input type="text" id="warn" name="warn" placeholder="每天只许登录3次" disabled>
    </p>
    <p>
        <button>注册</button>
    </p>
</form>

运行实例 » 

总结

1.引用css的方法有3种：

   1. HTML页面内部使用 <style></style>，该方法只对一个HTML文件生效
   2. <head>标签头部调用 <link rel="stylesheet" href='style.css'>
   3. @import调用 import url('style.css')，@import可以在<style>标签，或者.css文件第一行使用

2.CSS选择器的使用中，优先级尤为重要，顺序依次为：

<div style="">行内样式 > #id选择器 > 类选择器,属性选择器,伪类选择器 > 伪元素选择器,标签选择器

3.在一个标签元素被多个样式选择时，按照优先级来决定最终效果，如果选择器级别相同，那么按照代码的优先顺序决定结果。

<style type="text/css">
     #a1{
     color:red    
     }
     .a2{
     color:blue    
     }
     .a3{
     color:blue
     }
     p[name]{
     color:red    
    }
    .a4{
    background-color:#0f0    
    }
</style>
<div class="a2" id="a1">ID选择器高于CLASS选择器，并且两个选择器都指定了color属性，那么最终结果以优先级高的ID选择器为准</div>
<p name='' class="a3">两个同级选择器定义的CSS属性冲突时最终结果以代码顺序为准</p>
<p name='' class="a4">两个同级选择器定义的CSS属性没有发生冲突，则两个属性会生效</p>

运行实例 » 

4.上下文选择器，~ 和 + 可以按照[兄]和[弟]来理解，并不包含[兄]元素本身，生效的是[兄]元素之后[弟]的元素。