1. <!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中的标签*/
  2.  
  3.         /*class选择器*/
            /*.c1{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
            /*}*/
  4.  
  5.         /*标签选择器*/
            /*div {*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
            /*}*/
  6.  
  7.         /*标签层级选择器  --行内标签无法应用  宽  高等属性*/
            /*div span{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
            /*}*/
  8.  
  9.         /*class层级选择器*/
            /*.c2 span{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
            /*}*/
  10.  
  11.         /*id层级选择器*/
            /*#i2 span{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
            /*}*/
  12.  
  13.         /*id组合选择器*/
            /*#i1,#i2,#i3{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
                /*margin-top: 5px; 间隔作用*/
            /*}*/
  14.  
  15.         /*class组合选择器*/
            /*.c1,.c2,.c3{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
                /*margin-top: 5px;*/
            /*}*/
  16.  
  17.         /*属性选择器*/
            /*div[jjj='abc']{*/
                /*height: 100px;*/
                /*width: 100px;*/
                /**/
                /*margin-top: 5px;*/
            /*}*/
  18.  
  19.     </style>
  20.  
  21. </head>
    <body>
  22.  
  23. <!--1、可以在任意标签中添加style属性，增加css样式-->
    <!--<div style="height: 100px;width: 100px;border:red 2px solid;"></div>-->
    <!--<div id="i1"></div>  引入i1选择器-->
  24.  
  25. <!--2、head中style添加css样式-->
    <!--理解：在标签当中增加了一个id的属性 他的属性就是i1 在head中通过style标签，以id选择器的方式 #i1写了一个css样式 他引用到了div这个标签上-->
    <!--简单的说 就是在head中写了id选择器i1 写了css样式 在后面的div标签中引用了这个-->
  26.  
  27. <!--3、引入 css-->
    <!--<div id="i2"></div>  引入i2选择器-->
    <!--选择器在是唯一的  不能重复  重复就会报错-->
  28.  
  29. <!--测试三种引入css样式的方式的优先级-->
    <!--<div id="i1" style="height: 100px;width: 100px;"></div>-->
    <!--顺序  先引用--这里是为了测试优先级 所以选择器都是使用的i1-->
    <!--1、 标签中css  style属性  优先级最高  也就是div后面的优先级别是最高的-->
    <!--2、引入的css和head中的style中的标签的优先级  主要是看在head中是由下往上一次查找 那个在最下面就先被引用-->
  30.  
  31. <!--id选择器不能重复  但是class是可以重复的-->
  32.  
  33. <!--<div class="c1"></div>  class选择器-->
    <!--<div class="c1"></div>-->
  34.  
  35. <!--<div></div>  /*标签选择器*/-->
  36.  
  37. <!--<div>-->
        <!--行内标签无法应用  宽  高  --层级选择器-->
        <!--<span>1</span>-->
    <!--</div>-->
  38.  
  39. <!--<div>   class层级选择器-->
        <!--行内标签无法应用  宽  高  --层级选择器-->
        <!--<div class="c2">-->
            <!--<span>12222</span>-->
        <!--</div>-->
    <!--</div>-->
  40.  
  41. <!--<div>  id层级选择器-->
        <!--<div id="i2">-->
            <!--<span>2222</span>-->
        <!--</div>-->
    <!--</div>-->
  42.  
  43. <!--<div id="i1"></div>  id组合选择器-->
    <!--<div id="i2"></div>-->
    <!--<div id="i3"></div>-->
  44.  
  45. <!--<div class="c1"></div>  class组合选择器-->
    <!--<div class="c2"></div>-->
    <!--<div class="c3"></div>-->
  46.  
  47. <!--<div jjj="abc"></div>   属性选择器-->
  48.  
  49. </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. linux 修改 elf 文件的dynamic linker 和 rpath

    linux 修改 elf 文件的dynamic linker 和 rpath https://nixos.org/patchelf.html 下载地址 https://nixos.org/releas ...

  2. 【刷题】BZOJ 3172 [Tjoi2013]单词

    Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N ...

  3. Docker学习笔记一：如何在线安装

    一.Docker简介: Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后 ...

  4. 【BZOJ1416/1498】【NOI2006】神奇的口袋（数论，概率）

    [BZOJ1416/1498][NOI2006]神奇的口袋(数论,概率) 题面 BZOJ1416 BZOJ1498 洛谷 题面都是图片形式是什么鬼.. 题解 考虑以下性质 1.\(x[1],x[2]. ...

  5. 【NOIP2017】列队（Splay)

    [NOIP2017]列队(Splay) 题面 洛谷 题解 其实好简单啊... 对于每一行维护一棵\(Splay\) 对于最后一列维护一棵\(Splay\) \(Splay\)上一个节点表示一段区间 每 ...

  6. 【ZJOI2005】沼泽鳄鱼 题解报告

    题目描述 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客. 为了让游玩更有情趣,人们在池塘的中央建设了几座石墩和石桥 ...

  7. bzoj5118: Fib数列2（费马小定理+矩阵快速幂）

    题目大意:求$fib(2^n)$ 就是求fib矩阵的(2^n)次方%p,p是质数,根据费马小定理有 注意因为模数比较大会爆LL,得写快速乘法... #include<bits/stdc++.h& ...

  8. 解题：AHOI 2013 作业

    题面 emmm......我把莫队扔到了杂题里,因为感觉局限挺大的=.= 这题是莫队维护信息+分块查询答案,都是两者的基本操作,复杂度$O(m$ $sqrt(n)+n$ $sqrt(m))$ 所以为啥 ...

  9. 《剑指offer》— JavaScript（7）斐波那契数列

    斐波那契数列 题目描述 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 实现代码 function Fibonacci(n) { var arr = ...

  10. 特征点检测学习_2(surf算法)

    依旧转载自作者:tornadomeet 出处:http://www.cnblogs.com/tornadomeet 特征点检测学习_2(surf算法) 在上篇博客特征点检测学习_1(sift算法) 中 ...