<!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. 取对数求阶乘位数——lightoj1045

    /* 求 n! 在base进制下的位数 取对数,用换底公式,预处理对数前缀和 b^x = n! x = log_b(n!) = log_10(n!)/log_10(b) 对x向上取整即可 */ #in ...

  2. 配置Tomcat-8.5 JVM内存参数

    配置Tomcat-8.5 JVM内存参数 apache-tomcat-8.5与之前的版本存在些许差异,配置方式有所改变,并且针对JVM一些参数不再支持.故本文档主要简介一下如何在apache-tomc ...

  3. HDU1501-Zipper-字符串的dfs

    Given three strings, you are to determine whether the third string can be formed by combining the ch ...

  4. 如何在Spring Boot 中动态设定与执行定时任务

    本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...

  5. SpringIOC中的注解配置

    Spring中的注解是个好东西,可以简化我们的操作,但是使用了注解又会在一定的程度上增加程序的耦合度,xml中的配置写在了类中虽然简化了开发过程,但是或多或少的违背了开闭原则.所以在开发过程中要先明确 ...

  6. Java多线程（五）之BlockingQueue深入分析

    一.概述: BlockingQueue作为线程容器,可以为线程同步提供有力的保障.   二.BlockingQueue定义的常用方法 1.BlockingQueue定义的常用方法如下:  1)add( ...

  7. C++之程序流程_选择结构

    C/C++支持最基本的三种程序运行结构:==顺序结构.选择结构.循环结构== * 顺序结构:程序按顺序执行,不发生跳转* 选择结构:依据条件是否满足,有选择的执行相应功能* 循环结构:依据条件是否满足 ...

  8. js面向对象编程：this究竟代表什么？第二篇

         总觉得自己弄明确了js中this的含义.this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个非常奇怪的问题.    代码例如以下:   ...

  9. 2018-8-10-WPF-使用-Direct2D1-画图-绘制基本图形

    title author date CreateTime categories WPF 使用 Direct2D1 画图 绘制基本图形 lindexi 2018-08-10 19:16:53 +0800 ...

  10. JS对象 神奇的Math对象，提供对数据的数学计算。注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别

    Math对象 Math对象,提供对数据的数学计算. 使用 Math 的属性和方法,代码如下: <script type="text/javascript"> var m ...