<!doctype html><!--声明文档类型 网页文档-->

<html><!--根目录标签 父级-->

    <head><!--网页的头部 用户看不见的-->

        <meta charset='UTF-8'><!--国际编码 字符的编码格式-->

        <!--网页三要素  title keywords description-->

        <title>咸鱼联盟</title><!--网页的标题-->

        <meta name='keywords' content='关键的搜索字符'><!--让搜索引擎找到网页-->

        <meta name='description' content='这是一个简单的模板文件'><!--网页的描述-->

        <style type="text/css">

            .box-one{    /* .+名字  class选择器 */

                width:300px;

                height:150px;

                background:yellow;

            }

            .box-two{

                width:300px;

                height:75px;

                background:deeppink;

            }

            #text{     /* #+名字 id选择器 */

                width:300px;

                height:100px;

                background:purple;

                color:yellow;    /* 设置文字颜色 */

            }

            .box-three{

                width:300px;

                height:100px;

                background:pink;

            }

            .box-three .box-four{    /*后代选择器*/

                width:150px;

                height:50px;

                background:yellow;

            }

            .box-three+.box-four{    /* 相邻(下面的)兄弟选择器 */

                width:300px;    /* 可以用~代替+选中下边所有的兄弟 */

                height:100px;

                background:green;

            }

            body .box-four{

                width: 100px;

                height: 100px;

                background: greenyellow;

            }

            .box-five{

                width: 300px;

                height: 100px;

                background: antiquewhite;

            }

            .box-five>.box-six{    /* 子代选择器 */

                width: 100px;

                height: 50px;

                background: purple;

            }

            *{        /* 通配符选择器 */

            }

        </style>

    </head>

    <body><!--网页的身体 用户可视化区域-->

        <div class="box-one"></div>

        <div class="box-two"></div>

        <p id='text'>咸鱼联盟</p>

        <div class="box-four"></div>

        <div class="box-three">    <!--父级-->

            <div class="box-four"></div>    <!--子级-->

        </div>

        <div class="box-four"></div>    <!--兄弟-->

        <div class="box-four"></div>

        <div class="box-five">

        <div class="box-six"></div>

        </div>

        <!--

            命名规范

                统一使用单引号

                不允许出现数字开头结尾

                html中不出现'_',选用'-'

                取名要规范,百度有

            选择器

                标签选择器 div p ul li

                class选择器   .+名字

                id选择器   #+名字

                后代选择器   只要有空格就是后代选择器

                相邻兄弟选择器  .box-three+.box-four仅是下一个兄弟

                普通兄弟选择器  .box-three~.box-four下边的兄弟都可以选的到

                后代选择器    body .box-four   但是这个的优先级要比class选中的低

                子代选择器    .box-five>.box-six  选择儿子辈的东西

            选择器的权重

                id选择器>class选择器>标签选择器>通配符选择器

                权重高的选择器会覆盖权重低的重复属性(就是都有的属性)

                id选择器>后代选择器>class选择器

        -->

    </body>

</html>

03-css选择器的更多相关文章

  1. 03.CSS选择器-->交集并集选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 前端03 /css简绍/css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  3. [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动

    刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...

  4. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

  5. 【笔记】CSS选择器整理（IE低版本支持性测试）

    时间:2015.05.11 参考附件:css选择器.xmind(网友共享) 查看链接:http://www.w3school.com.cn/cssref/css_selectors.asp   htt ...

  6. 【转】CSS选择器笔记

    作者: 阮一峰 日期: 2009年3月12日 来源:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html 去年我学jQuery的时候,曾经 ...

  7. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  8. 【CSS选择器】理解汇总和记录

    1.选择器中符号含义汇总(这部分包含了对选择器的通用理解): 1.1.多元素组合符号:(共6个,一个是CSS3的)(适用所有元素:ID组合,类组合,属性组合,标签组合,伪类组合,以及以上所有混合组合) ...

  9. CSS选择器知识梳理

    <一>CSS选择器结构逻辑图 温馨提示:各位小伙伴,可以把逻辑图下载下来放大,看的比较清除,也可以给我留言,我分享原百度脑图给各位小伙伴. <二>接下来按照结构逻辑图具体讲解各 ...

  10. 简易数据分析 15 | Web Scraper 高级用法——CSS 选择器的使用

    这是简易数据分析系列的第 15 篇文章. 年末事情比较忙,很久不更新了,后台一直有读者催更,我看了一些读者给我的私信,发现一些通用的问题,所以单独写篇文章,介绍一些 Web Scraper 的进阶用法 ...

随机推荐

  1. JavaWeb学习篇之----Servlet

    今天来继续学习JavaWeb的相关知识,之前都是都介绍一些基本知识,从今天开始我们来说一下如何在服务器编写程序,这里就需要来介绍一下Servlet的相关知识了.Servlet就是一个能够运行在服务器端 ...

  2. 一次Spring Transactional嵌套事务使用不同的rollbackFor的分析

    起因: 项目期间由于一次异常回滚问题,发现自己在事务知识方面知识的遗漏,趁着这次机会,做了几次rollbackFor的测试. 测试:   现在有两个事务,事务oute包含事务Inner.事务A回滚规则 ...

  3. NX二次开发-UFUN删除链表函数UF_MODL_delete_list

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...

  4. NX二次开发-删除经典工具栏UF_UI_remove_toolbar

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  5. Python字典列表字段重组形成新的字典

    最近遇到这样一个需求,需要将字典列表中的字段进行重组,形成一个新的字典.举个例子吧: l1 = [{"x": 22, "y": 22, "demand ...

  6. Fedora Linux 安装Qt5.2.0

    1.下载 qt-linux-opensource-5.2.0-x86-offline.run 2. chmod u+x ./qt-linux-opensource-5.2.0-x86-offline. ...

  7. 杂项：ionic

    ylbtech-杂项:ionic ionic是一个用来开发混合手机应用的,开源的,免费的代码库.可以优化html.css和js的性能,构建高效的应用程序,而且还可以用于构建Sass和AngularJS ...

  8. shell设置时间递减脚本

    经常要用shell来做时间的定时任务,尤其是用sqoop脚本拉取数据的时候,那么假如当你要导入数据是残缺的时候呢,我写了一个能自定义时间并逐条递减的程序 #!/bin/bash   . /etc/pr ...

  9. Scala 可变长参数

    Scala 允许你指明函数的最后一个参数可以是重复的.这可以允许客户向函数传入可变长度参数列表.想要标注一个重复参数,在参数的类型之后放一个星号. 例如:定义一个可变参数的函数param def pa ...

  10. numpy基本函数

    在学习python的时候常常需要numpy这个库,每次都是用一个查一个,这个,终于见到一个完整的总结了http://blog.csdn.net/blog_empire/article/details/ ...