简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端第三课：CSS基础与选择器-PHP培训九期线上班
Blogger Information
Blog 37
fans 0
comment 0
visits 21062
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端第三课：CSS基础与选择器-PHP培训九期线上班
渡劫小能手
Original
637 people have browsed it

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

1、块级框，对应块级元素：遵循最大化原则，总是独占一行，自动充满父级元素的内容区，且两边不允许有任何其他元素，自动在没有内容撑开的情况下, 需要设置宽高,否则无法感知存在。例如：<div>、<ul+li>、<table>、<p>    

2、行内框，对应行内元素：遵循最小化原则，总是在一行文本元素的内部生成，它的宽高由所在行决定，不可以设置。例如：<span>、<input>、<strong>、<a> 

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

CSS是层叠样式表，主要作用是用来设置HTML元素在文档中的布局与显示方式

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

1、CSS选择器就是用于选择需要加载CSS样式的元素

2、样式声明是由“属性”和“值”两部分组成组成

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*元素选择器，选择指定的所有P标签*/
        P {
            color: green;
        }
        /*属性选择器，选择所有指定的属性或者属性值*/
        p[class]{
            color: lightgray;
        }
        p[class="red"]{
            color: red;
        }
        p[id="blue"]{
            color: blue;
        }
        /*类选择器, 对应标签中的class属性*/
        .red{
            background-color:yellow;
        }
        /*ID选择器, 对应标签中的id属性,级别最高*/
        #blue {
            background-color: lightgray;
        }
        /*群组选择器，选中所有red和h2属性*/
        .red,h2 {
            background-color:lightcyan;
        }
        /*通配符选择器*/
        body * {
            font-size: 2rem;
        }
    </style>
</head>
<body>
<p>测试的第一步</p>
<p class="red">测试的第二步</p>
<p class="red" id="blue">测试的第三步</p>
<p>测试的第四步</p>
<h2>测试的第五步</h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-02_232750.jpg

2019-11-02_232804.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下文选择器/结构选择器</title>
    <style>
        /*后代选择器，空格表示子级孙级h2都被选中，>表示只选择子级*/
        section h2 {
            color: green;
        }
        /*父子选择器*/
        section > h2 {
            color: red;
        }
        /*同级相邻选择器*/
        #item + * {
            background-color: lightblue;
        }
        /*同级所有选择器*/
        #item ~ * {
            background-color: lightpink;
        }
    </style>
</head>
<body>
<section>
    <div>
        <h2 id="item">测试第一步</h2>
        <h2>测试第二步</h2>
        <h2>测试第三步</h2>
    </div>
    <h2>测试第四步</h2>
    <h2>测试第五步</h2>
</section>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-02_235621.jpg

2019-11-02_235635.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*非限定类型的伪类*/
        /*选中所有ul下面的第二个子元素*/
        ul > :nth-child(2) {
            background-color: lightblue;
        }
        /*只选中第一个ul中的第二个子元素*/
        ul:first-child > :nth-child(2) {
            background-color: lightcoral;
        }
        /*选中最后一个ul中的最后一个子元素*/
        ul:first-child > :last-child {
            background-color: lightpink;
        }
        /*选中最后一个子元素中类型为<p>*/
        ul:first-child > :last-child > p:nth-child(n+1) {
            background-color: yellow;
        }
        /*选中最后一个子元素中类型为li*/
        ul:first-child > :last-child li:nth-child(n+1) {
            background-color: lightgray;
        }
        /*限定类型的伪类*/
        /*选中最后一个子元素中类型为<p>*/
        ul:first-of-type > :last-of-type > p:nth-of-type(n+1) {
            background-color: cyan;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h3>购物车</h3>
        <ul>
            <li>苹果</li>
            <li>梨子</li>
            <li>芒果</li>
        </ul>
    </li>
    <li>
        <h3>工作计划</h3>
        <ul>
            <li>第一天</li>
            <li>第二天</li>
            <li>第三天</li>
        </ul>
    </li>
    <li>
        <h2>重要通知</h2>
        <p>全体加班</p>
        <ul>
            <li>第一组</li>
            <li>第二组</li>
            <li>第三组</li>
        </ul>
        <p>关于补助</p>
    </li>
</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-03_004942.jpg

2019-11-03_004958.jpg

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单伪类选择器</title>
    <style>
        input:enabled {
            background-color: lightblue;
        }
        input:disabled {
            background-color: red;
        }
        input:required {
            background-color: yellow;
        }
    </style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required placeholder="example@email.com">
    </p>

    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required placeholder="不得少于6位">
    </p>

    <p>
        <label for="save" >保存密码:</label>
        <input type="checkbox" id="save" name="save" checked readonly>
    </p>

    <p>
        <label for="save_time">保存期限:</label>
        <select name="save_time" id="save_time">
            <option value="7" selected>7天</option>
            <option value="30">30天</option>
        </select>
    </p>

    <p>
        <input type="hidden" name="login_time" value="登陆时间戳">
    </p>

    <p>
        <label for="warning">警告:</label>
        <input type="text" id="warning" value="一天内仅允许登录三次" style="border:none" disabled>
    </p>


    <script>
        document.querySelector('[type="hidden"]').value = new Date().getTime()
    </script>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2019-11-03_010805.jpg

八、总结

引入css样式表，通过操作选择器和伪类，可以对网页中指定的元素或者表单进行样式控制

选择器

*后代选择器: `空格`, 如 `div p`, `body *`
* 父子选择器: `>`, 如 `div + h2`
* 同级相邻选择器: `+`, 如 `li.red + li`
* 同级所有选择器: `~`, 如 `li.red ~ li`

非限定类型

* `:nth-child(n)`: 匹配父元素中指定索引的子元素
* `:first-child`: 匹配父元素中的第一个子元素
* `:last-child`: 匹配父元素中的最后一个子元素
* `:nth-last-child(n)`: 匹配从父元素中倒数选择子元素
* `:only-child`: 匹配父元素中的唯一子元素

限定类型

* `selector:nth-of-type(n)`: 匹配父元素中指定索引的子元素
* `selector:first-of-type`: 匹配父元素中的第一个子元素
* `selector:last-of-type`: 匹配父元素中的最后一个子元素
* `selector:nth-last-of-type(n)`: 匹配从父元素中倒数选择子元素
* `selector:only-of-type`: 匹配父元素中的唯一子元素

表单伪类
* `:enabled`: 选择每个启用的 `<input>` 元素
* `:disabled`: 选择每个禁用的 `<input>` 元素
* `:checked`: 选择每个被选中的 `<input>` 元素
* `:required`: 包含`required`属性的元素
* `:optional`: 不包含`required`属性的元素
* `:valid`: 验证通过的表单元素
* `:invalid`: 验证不通过的表单
*: `:read-only`: 选择只读表单元素

Correction status：qualified

Teacher's comments：选择器是一个系统思维的过程 , 用的时候, 一定要灵活, 有所取舍, 一定要把可读性放在第一位
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！