<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   <!-- 指定编码 -->
    <title>liudaozhang</title>
    <link rel="shortcut icon" href="http://www.xxxxx.cn:80/wp-content/logo.jpg">
    <!--<link rel="stylesheet" href="jjj.css">  这是第三种___引入css-->
    <!--<link rel="stylesheet" href="jjj2.css">  这是第三种___引入css-->
    <style>
        /*id选择器   这是第二种方式*/
        /*#i1{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/
/*这里会先引用style中的标签，然后在引用link中jjj2  再试jjj中的标签*/

        /*class选择器*/
        /*.c1{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/

        /*标签选择器*/
        /*div {*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/

        /*标签层级选择器  --行内标签无法应用  宽  高等属性*/
        /*div span{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/

        /*class层级选择器*/
        /*.c2 span{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/

        /*id层级选择器*/
        /*#i2 span{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
        /*}*/

        /*id组合选择器*/
        /*#i1,#i2,#i3{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
            /*margin-top: 5px; 间隔作用*/
        /*}*/

        /*class组合选择器*/
        /*.c1,.c2,.c3{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
            /*margin-top: 5px;*/
        /*}*/

        /*属性选择器*/
        /*div[jjj='abc']{*/
            /*height: 100px;*/
            /*width: 100px;*/
            /**/
            /*margin-top: 5px;*/
        /*}*/

    </style>

</head>
<body>

<!--1、可以在任意标签中添加style属性，增加css样式-->
<!--<div style="height: 100px;width: 100px;border:red 2px solid;"></div>-->
<!--<div id="i1"></div>  引入i1选择器-->

<!--2、head中style添加css样式-->
<!--理解：在标签当中增加了一个id的属性 他的属性就是i1 在head中通过style标签，以id选择器的方式 #i1写了一个css样式 他引用到了div这个标签上-->
<!--简单的说 就是在head中写了id选择器i1 写了css样式 在后面的div标签中引用了这个-->

<!--3、引入 css-->
<!--<div id="i2"></div>  引入i2选择器-->
<!--选择器在是唯一的  不能重复  重复就会报错-->

<!--测试三种引入css样式的方式的优先级-->
<!--<div id="i1" style="height: 100px;width: 100px;"></div>-->
<!--顺序  先引用--这里是为了测试优先级 所以选择器都是使用的i1-->
<!--1、 标签中css  style属性  优先级最高  也就是div后面的优先级别是最高的-->
<!--2、引入的css和head中的style中的标签的优先级  主要是看在head中是由下往上一次查找 那个在最下面就先被引用-->

<!--id选择器不能重复  但是class是可以重复的-->

<!--<div class="c1"></div>  class选择器-->
<!--<div class="c1"></div>-->

<!--<div></div>  /*标签选择器*/-->

<!--<div>-->
    <!--行内标签无法应用  宽  高  --层级选择器-->
    <!--<span>1</span>-->
<!--</div>-->

<!--<div>   class层级选择器-->
    <!--行内标签无法应用  宽  高  --层级选择器-->
    <!--<div class="c2">-->
        <!--<span>12222</span>-->
    <!--</div>-->
<!--</div>-->

<!--<div>  id层级选择器-->
    <!--<div id="i2">-->
        <!--<span>2222</span>-->
    <!--</div>-->
<!--</div>-->

<!--<div id="i1"></div>  id组合选择器-->
<!--<div id="i2"></div>-->
<!--<div id="i3"></div>-->

<!--<div class="c1"></div>  class组合选择器-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->

<!--<div jjj="abc"></div>   属性选择器-->

</body>
</html>

html基础-css-选择器的更多相关文章

  1. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  2. css基础,css选择器

    07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...

  3. HTML+css基础 css选择器的种类

    css选择器的种类 标签   权重是001 类  class权重是0010 相当于255个标签选择器 Id   权重是0100相当于255个类 *通配符   代表所有的标签   权重是0000 后代选 ...

  4. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  5. Scrapy基础------css选择器基础

    基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...

  6. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

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

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

  8. html基础和CSS选择器

    一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...

  9. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  10. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

随机推荐

  1. [BZOJ3507]通配符匹配

    3507: [Cqoi2014]通配符匹配 Time Limit: 10 Sec  Memory Limit: 128 MB Description 几乎所有操作系统的命令行界面(CLI)中都支持文件 ...

  2. 【UOJ#188】Sanrd（min_25筛）

    [UOJ#188]Sanrd(min_25筛) 题面 UOJ 题解 今天菊开讲的题目.(千古神犇陈菊开,扑通扑通跪下来) 题目要求的就是所有数的次大质因子的和. 这个部分和\(min\_25\)筛中枚 ...

  3. 【BZOJ1443】游戏（二分图匹配，博弈论）

    [BZOJ1443]游戏(二分图匹配,博弈论) 题面 BZOJ 题解 很明显的二分图博弈问题. 发现每次移动一定是从一个黑点到达一个白点,或者反过来. 所以可以对于棋盘进行染色然后连边. 考虑一下必胜 ...

  4. Alpha 冲刺 —— 十分之二

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 协助前端界面的开发 搭建测试用服务器的环境 完成 ...

  5. Zookeeper(三) Zookeeper原理与应用

    一.zookeeper原理解析 1.进群角色描述 2.Paxos 算法概述( ZAB 协议)    分布式一致性算法 3.Zookeeper 的选主(恢复模式) 以一个简单的例子来说明整个选举的过程. ...

  6. Linux之系统信息操作20170330

    介绍一下Linux系统中一些自带信息的获取操作等,首先从源码中找到系统信息结构体进行分析. 1.系统信息结构体说明与获取方法: 含义: struct sysinfo { long uptime;    ...

  7. 什么是end-to-end神经网络？

    https://www.zhihu.com/question/51435499 来源:知乎著作权归作者所有. 国立台湾大学的李宏毅教授在其机器学习课程中有讲到深度神经网络的 End-to-end Le ...

  8. logstash 中配置GeoIP解析地理信息

    logstash中配置的GeoIP的数据库解析ip了,这里是用了开源的ip数据源,用来分析客户端的ip归属地.官网在这里:MAXMIND 下载GeoLiteCity数据库 wget http://ge ...

  9. 「七天自制PHP框架」第一天：路由与控制器

    我们为什么要使用路由? 原因1:一个更漂亮的URI 1.URI的改进 刚刚开始学PHP时,我们一定写过blog.php?id=1之类的URI,使用GET方式获取参数.这样的URI有两个缺点,一是容易被 ...

  10. vim如何粘贴

    刚开始vim的学习之旅,在进行粘贴操作时遇到了麻烦. 教程上粘贴的命令是p,但我发现该命令只适用于从vim到vim的复制(p未必就仅仅局限于此,但我目前所了解到的情况如此),当我从网上复制了一段代码想 ...