<!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. POJ.1426 Find The Multiple （BFS）

    POJ.1426 Find The Multiple (BFS) 题意分析 给出一个数字n,求出一个由01组成的十进制数,并且是n的倍数. 思路就是从1开始,枚举下一位,因为下一位只能是0或1,故这个 ...

  2. 【Django实例】博客1

    (上一篇) 一.概述 Blog是一个博客应用. dbe工程的目录结构,参考<序言>的最后部分.blog应用位于/home/russellluo/Django/dbe/dbe/blog目录下 ...

  3. miya--图片上传--搭建分布式文件服务器（FastDFS+Nginx）

    资料获取(FastDFS+Nginx): 链接:https://pan.baidu.com/s/1kUI5WH5 密码:kzfd 安装rz,sz功能: yum install lrzsz 主攻: 利用 ...

  4. Function.caller, arguments.caller, arguments.callee, arguments.callee.calller

    Function.caller指向当前函数的调用者,是arguments.caller的替代者 arguments.caller也是指向当前函数的调用者,已被废弃 arguments.callee是对 ...

  5. Python3 字典 update() 方法

     Python3 字典 描述 Python 字典 update() 函数把字典dict2的键/值对更新到dict里. 语法 update()方法语法: dict.update(dict2) 参数 di ...

  6. 2018-2019 ACM-ICPC 沈阳赛区 K. Let the Flames Begin

    K. Let the Flames Begin 题目链接:https://codeforces.com/gym/101955/problem/K 题意: n个人围成一个圈,然后依次从1开始报数,报到k ...

  7. powerdesigner中物理模型与sql脚本的以及与数据库的连接设置

    使用JDBC连接失败的解决方案: http://blog.csdn.net/t37240/article/details/51595097 使用powerdesigner工具我们可以方便的根据需求分析 ...

  8. hihoCoder #1582 : Territorial Dispute 凸包

    #1582 : Territorial Dispute 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 In 2333, the C++ Empire and the Ja ...

  9. go defer注意点，很容易出错的！！！

    1:defer是在return之前执行的  函数返回的过程是这样的:先给返回值赋值,然后调用defer表达式,最后才是返回到调用函数中 返回值 = xxx 调用defer函数 空的return fun ...

  10. Java设计模式の责任链模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述责任链(Chain of Responsibility)模式的: 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其 ...