<!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. php注册 及审核练习

    1.注册界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. js自动下载

    常用方法是利用a标签的属性download下载对应文件.图片等 <a href=".." download="...."></a> 但是 ...

  3. csp-s模拟测试98

    csp-s模拟测试98 $T1$??不是我吹我轻松手玩20*20.$T2$装鸭好像挺可做?$T3$性质数据挺多提示很明显? $One$ $Hour$ $Later$ 这$T1$什么傻逼题真$jb$难调 ...

  4. Java-Class-C：org.springframework.http.MediaType

    ylbtech-Java-Class-C:org.springframework.http.MediaType 1.返回顶部 1.1. /* * Copyright 2002-2018 the ori ...

  5. Putty 两步代理访问互联网

    工作在机房,有时需要访问外网. 此时浏览器需要使用代理服务器,访问的流程如下: 由于SERVER2不能直接访问互联网,而SERVER3可以(机房无法直接访问SERVER3)所以需要两步代理. 配置流程 ...

  6. 3.7.4 Tri0 and tri1 nets

    Frm: IEEE Std 1364™-2001, IEEE Standard Verilog® Hardware Description Language The tri0 and tri1 net ...

  7. 金三银四铜五铁六，Offer收到手软！

    作者:鲁班大师 来源:cnblogs.com/zhuoqingsen/p/interview.html 文中的鲁班简称LB 据说,金三银四,截止今天为止面试黄金时间已经过去十之八九,而LB恰逢是这批面 ...

  8. SpringAOP中的注解配置

    使用注解实现SpringAOP的功能: 例子: //表示这是被注入Spring容器中的 @Component //表示这是个切面类 @Aspect public class AnnotationHan ...

  9. Petrozavodsk Summer-2016. Warsaw U Contest, XVI Open Cup Onsite.

    Petrozavodsk Summer-2016. Warsaw U Contest, XVI Open Cup Onsite. Problem A. Gambling Problem B. Colo ...

  10. LINUX centos 7.2/7.3 搭建LAMP环境

    首先我们先查看下centos的版本信息 #适用于所有的linux lsb_release -a #或者 cat /etc/redhat-release #又或者 rpm -q centos-relea ...