<!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. 【硬盘】RAID卡

    独立磁盘冗余阵列,或简称磁盘阵列(Redundant Array of Independent Disks) RAID是一种把多块独立的物理硬盘按不同方式组合起来形成一个逻辑硬盘,一般分为硬RAID卡 ...

  2. QueryList 内容过滤

    <?php require 'vendor/autoload.php'; use QL\QueryList; $html =<<<STR <div id="de ...

  3. NX二次开发-UFUN拾取屏幕位置UF_UI_specify_screen_position

    #include <uf.h> #include <uf_ui.h> UF_initialize(); //拾取屏幕位置 //在屏幕用鼠标拾取一点 char sMessage[ ...

  4. JsJquery小技巧

    JS对URL编码 :encodeURI() .Net对URL解码:HttpUtility.UrlDecode() 格式化输出百分数 function formatePercent(data){     ...

  5. hdu多校第八场 1003 （hdu6659） Acesrc and Good Numbers 数论/打表

    题意: 对于某数k,若数字d在1-k中出现次数恰好为k,则称k为好数. 给定d,x,求x以内,对于d而言最大的好数.k范围1e18. 题解: 打表二分即可. 但是,1e18的表是没法打出来的,只能在o ...

  6. Spring-Security (学习记录四)--配置权限过滤器,采用数据库方式获取权限

    目录 1. 需要在spring-security.xml中配置验证过滤器,来取代spring-security.xml的默认过滤器 2. 配置securityMetadataSource,可以通过ur ...

  7. [转]WinForm DataGridView 绑定泛型List(List<T>)/ArrayList不显示的原因和解决

    背景:无意间遇到了一个不大不小的问题,希望对一些遇到的人有所帮助! 一.问题 WinForm DataGridView 绑定泛型List (List<T>)/ArrayList不显示,UI ...

  8. class10_Frame 框架

    最终运行效果图(程序见序号2):   #!/usr/bin/env python # -*- coding:utf-8 -*- # ---------------------------------- ...

  9. ElasticSearch 索引查询使用指南

    1.检测集群是否健康,我们通常用下面的命令.确保9200端口号可用: http://localhost:9200/_cat/health?v 或者 http://localhost:9200/_clu ...

  10. <Django>博客项目

    0.项目的通用流程 项目立项 需求分析 原型 前端 页面设计 UI及交互实现 后端 架构设计 数据库设计 代码模板实现 单元测试 网站整合 功能及集成测试 网站发布 1.BBS项目需求分析 需要哪些表 ...