<!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. css清除浮动的几种方法

    推荐几种好用的清除浮动方法: 方法1: .clearfix:after { content:"."; display:block; height:; clear:both; vis ...

  2. 仿淘宝使用flex布局实现页面顶部和底部的固定布局

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

  3. 构建高性能高并发Java系统 .

    转:http://blog.csdn.net/nengyu/article/details/7591854 场景这里指的高性能高并发服务器是一个有状态的服务,可以理解成web或者socket服务器,每 ...

  4. Java-Class-@I：org.springframework.beans.factory.annotation.Autowired

    ylbtech-Java-Class-@I:org.springframework.beans.factory.annotation.Autowired 1.返回顶部   2.返回顶部 1. pack ...

  5. 微信-小程序-开发文档-服务端-模板消息：templateMessage.addTemplate

    ylbtech-微信-小程序-开发文档-服务端-模板消息:templateMessage.addTemplate 1.返回顶部 1. templateMessage.addTemplate 本接口应在 ...

  6. Spring随笔-核心知识DI与AOP

    DI 依赖注入,使得相互依赖的组件松耦合. AOP 面向切面编程,使各种功能分离出来,形成可重用的组件.

  7. Async_Study

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 2019 牛客多校第三场 B Crazy Binary String

    题目链接:https://ac.nowcoder.com/acm/contest/883/B 题目大意   给定一个长度为 N 的 01 字符串,输出最长子串和子序列的长度,满足其中 0 和 1 的个 ...

  9. 牛客练习赛43D Tachibana Kanade Loves Sequence

    题目链接:https://ac.nowcoder.com/acm/contest/548/D 题目大意 略 分析 贪心,首先小于等于 1 的数肯定不会被选到,因为选择一个数的代价是 1,必须选择大于1 ...

  10. 干货：Java技术栈18年02月精彩好文汇总

    一晃眼,一个月过去了,新年也过完了. 一晃眼,又老了一岁了,感觉新的一年压力更大了. 我们也该为这一个月的技术做做汇总了,错过的同学正好可以统一回顾看看,已经看过的同学也可以再温习一下.. Java技 ...