二、基础选择器的综合使用

　　优先级顺序：id选择器>class选择器>元素选择器。也就是说，如果这三种选择器同时为某一个元素设定样式，那么冲突的部分按优先级的顺序依次决定。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css基础选择器</title>

        <style>

            #header{

                font: "微软雅黑";

                font-size: 16px;

                width: 600px;

            }

            .one{

                background-color: plum;

                height: 400px;

            }

            .two{

                background-color: bisque;

                height: 200px;

            }

            p strong{font-style: italic;}

        </style>

    </head>

    <body>

        <div id="header" class="one">

            <p>div1里的文字</p>

        </div>

        <div id="header" class="two">

            <p>div2里的<strong>文字</strong></p>

        </div>

    </body>

</html>

结果：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css的权重</title>

        <style>

            p strong{color: black;}

            strong.blue{color: green;}

            .father{color: yellow;}

            p.father strong{color: orange;}

            #header strong{color: pink;}

            #header strong.blue{color: red;}

        </style>

    </head>

    <body>

        <p  class="father" id="header">

            <strong class="blue"> guess my color</strong>

        </p>

    </body>

</html>

结果：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css权重的继承</title>

        <style>

            strong{color: blue;}

            #header{color: red;}

        </style>

    </head>

    <body>

        <p id="header">

            <strong>guess my color</strong>

        </p>

    </body>

</html>

结果：

Html学习之七（CSS选择器的使用--基础选择器优先级问题）的更多相关文章

  1. Html学习之六（CSS选择器的使用--基础选择器的使用）

    一.基础选择器 1.id选择器 2.class选择器 3.元素选择器 <!DOCTYPE html> <html> <head> <meta charset= ...

  2. css的导入与基础选择器

    css是什么 css也是一门标记语言,主要用作修改控制html的样式 css书写的位置(导入) css是用来控制页面标签的样式,但是可以根据实际情况书写在不同的位置, 放在不同位置有不同的专业叫法,可 ...

  3. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  4. CSS简介，基础选择器，字体属性，文本属性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  5. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  6. 学习总结：CSS(一)定义方式、选择器、选择器权重

    一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;&q ...

  7. html 选择器之基础选择器

    我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...

  8. WEB学习-CSS基础选择器

    基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...

  9. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

随机推荐

  1. [apue] syslog 导致 accept 出错?

    前几天在看apue第16章关于socket的例子,就是一个非常典型的socket服务器,关键代码如下: void serve (int sockfd) { int ret; int clfd; int ...

  2. div里面的元素在【垂直 方向】上水平分布 使用calc()函数动态计算

    1==>如何让div里面的元素在[垂直 方向]上水平分布.important-dec{ height: 121px; //必须固定高度 flex-direction: column; //垂直排 ...

  3. Feign、httpclient、OkHttp3 结合使用

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 疯狂创客圈 正在进行分布式和高并发基础原理 的研习,比如下面的一些基础性的内容: 一.Netty Redis 亿级流量 ...

  4. pyqt添加启动等待界面

    一.实验环境 1.Windows7x64_SP1 2.anaconda3.7 + python3.7(anaconda集成,不需单独安装) 3.pyinstaller3.5 #使用pyinstalle ...

  5. IT兄弟连 Java语法教程 综合案例

    1．案例需求 编写程序,模拟斗地主游戏洗牌和发牌的流程. 2．应用知识 ●  数组的声明 ●  数组的遍历 ●  for循环 ●  if-else分支结构 3．需求解析 模拟斗地主游戏洗牌和发牌,需要 ...

  6. app自动化测试环境搭建之node+appium+ADT+MUMU模拟器

    一.安装Microsoft .NET Framework 4.5 检测本机已安装的程序中,是否已经安装Microsoft .NET Framework 4.5及以上的版本 如果没有安装,则获取安装文件 ...

  7. rpmbuild打包

    安装: yum  install -y rpm-build 目录介绍: 默认目录在  /root/rpmbuild BUILD :你要打包的文件将会在这里编译(编译rpm包的临时目录) BUILDRO ...

  8. php使用inotify扩展监控文件或目录，如果发生改变，就执行指定命令

    通过inotify扩展监控文件或目录的变化,如果发生变化,就执行命令. 可以应用于 swoole 中,如果文件发生变化,就执行 kill -USR1 进程PID 来实现热更新. <?php cl ...

  9. MongoDB for OPS 04：备份恢复

    写在前面的话 和 MySQL 一样,mongodb 也是需要将数据进行备份的,毕竟天有不测风云,谁也不知道哪天机器就炸了. 备份恢复 mongodb 提供了两种备份恢复手段:mongoexport / ...

  10. java基础(15):常用API(Object、String、StringBuffer)

    1. Java的API及Object类 在以前的学习过程中,我们都在学习对象基本特征.对象的使用以及对象的关系.接下来我们开始使用对象做事情,那么在使用对象做事情之前,我们要学习一些API中提供的常用 ...