<!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. Coding and Paper Letter（四十五）

    资源整理. 1 Coding: 1.Python库gempy,一种基于Python的开源三维结构地质建模软件,它允许从界面和方向数据隐式(即自动)创建复杂的地质模型. 它还支持随机建模以解决参数和模型 ...

  2. C++11新利器

    C++11常用特性的使用经验总结 unordered_map可能用的会比较多 省的写哈希表了. 但是浪费空间

  3. 手脱FSG 2.0 -> bart/xt

    声明: 只为纪录自己的脱壳历程,高手勿喷 1.在入口的第二行ESP定律下硬件断点然后F9运行8次(因为第9次就跑飞了) 0040955C > pushad 0040955D EB jmp //E ...

  4. sessionStorage和localStorage的使用

    不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key ...

  5. centos7通过yum安装MySQL

    一:去官网查看最新安装包 https://dev.mysql.com/downloads/repo/yum/ 二:下载MySQL源安装包 wget http://dev.mysql.com/get/m ...

  6. VS工程使用Git时的过滤文件

    1.解决方案必须保留的文件sln和suo,需要过滤的文件为sdfVisual Studio.NET采用两种文件类型(.sln和.suo)来存储特定于解决方案的设置,它们总称为解决方案文件.为解决方案资 ...

  7. ZOJ 3774 Fibonacci的K次方和

    In mathematics, Fibonacci numbers or Fibonacci series or Fibonacci sequence are the numbers of the f ...

  8. 什么是Qt Widget？

    Qt帮助文档如此解释: The user interface contains visual elements that are called widgets in Qt. Examples of w ...

  9. PowerShell入门

    最近需要写个Windows的脚本,以前一直使用cmd.exe来写批处理脚本,这次接触到了PowerShell,准备把学习过程中学到的知识点整理在这里: 相关文章: 1.https://www.cnbl ...

  10. 朋友封装的一个ASP.NET上传文件的方法

    朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...