前端一HTML:十六: 权重有关的练习

最新推荐文章于 2022-05-26 23:00:11 发布
最新推荐文章于 2022-05-26 23:00:11 发布
阅读量297 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37564426/article/details/89226084
版权

练习一: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="权重,练习">
    <meta name="description" content="对网站的描述">
    <title>第1题</title>
    <style type="text/css">
    #father #son{ 
        color:blue;  /* 权重: 2个id选择器  0个类选择器*/
    }

    #father p.c2{
        color:black; /* 权重: 1个id选择器  1个类选择器 1个标签选择器*/
    }

    div.c1 p.c2{  
        color:red; /* 权重: 0个id选择器  2个类选择器 2个标签选择器*/
    }
    
    #father{
        color:green !important; /* 没有命中到p标签 */
    }

    div#father.c1{
        color:yellow; /* 没有命中到p标签 */
    }

    </style>
</head>
<body>
    <div id="father" class="c1">
        div内容
        <p id="son" class="c2">
            p标签内容
        </p>
    </div>
</body>
</html>

练习2: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第2题</title>
    <style type="text/css">
        #father{
            color:red;
        }

        p{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>p标签文本</p>
    </div>
</body>
</html>

练习3: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第3题</title>
    <style type="text/css">
        div p{
            color:yellow;
        }

        #father{
            color:red;
        }

        p.c2{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="father" class="c1">
        <p class="c2">p标签文本</p>
    </div>
</body>
</html>

练习4:  

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第4题</title>
    <style type="text/css">
        div div{
            color:yellow;    /* 权重:  0个id选择器  0个类选择器  2个标签选择器*/
        }
        /* 标签是从右向左找  */
        div{
            color:red;   /* 权重:  0个id选择器  0个类选择器  1个标签选择器*/
        }

    </style>
</head>
<body>
    <div>
        <div>
            <div>
                多层div包含的文本...
            </div>
        </div>
    </div>
</body>
</html>

练习5:   

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第5题</title>
    <style type="text/css">
        div div div div div div div div div div div div {
            color:yellow;    /* 权重:  0个id选择器  0个类选择器  12个标签选择器*/
        }
        
       .haha{
        color:blue;  /* 权重:  0个id选择器  1个类选择器  12个标签选择器*/
       }

    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                 <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div class="haha">
                                                        很多层div包含的文本
                                                    
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                          </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

练习6:    

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第6题</title>
    <style type="text/css">
        .c1 .c2 div{
            color:blue ; /* 权重:  0个id选择器  2个类选择器  1个标签选择器*/
        }
        
        div #box3{
            color:green ; /* 权重:  1个id选择器  0个类选择器  1个标签选择器*/
        }

        #box1 div{
            color:yellow ; /* 权重:  1个id选择器  0个类选择器  1个标签选择器 */
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2"  class="c2">
            <div id="box3"  class="c3">
                哈哈哈  
            </div>
        </div>
    </div>
</body>
</html>

 

请叫我大虾
关注
专栏目录
从零开始学WEB前端——网页的骨架——HTML理论讲解
embelfe_segge的博客
03-02 784
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
前端面试笔试题目-HTML专项练习（基础）
weixin_45065754的博客
03-24 1024
题目来源：牛客网：https://www.nowcoder.com/ 1、表单输入框（input）类型 请依次写出以下类型的输入框。 1、类型为密码，默认值为"nowcoder" 2、类型为复选框，且状态为已勾选 <form> <!-- 补全代码 --> <input type="password" value="nowcoder"> <input type="checkbox" checked> </form> .
【前端】html 0基础练习题
weixin_52078305的博客
05-21 1528
1、问卷调查：下面是一个网页在浏览器上的效果，请制作一张一模一样的问卷调查网页。 要求： （1）大标题使用h3标签； （2）问卷调查题目使用h4标签 （3）前2个问题选项使用有序列表； （4）最后一个问题选项使用无序列表 添加链接描述 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习题</title> </head> <bod.
温故知新----标签的语义化
smile吖
08-01 451
本项目主要练习标签的语义化，项目参考于：MDN Web Docs 已上传至gitHub 结构语义化：demo 任务介绍 - 块/结构语义： - 你应该使用适当的结构来构造整体文档，包括doctype、<html> 、 <head>和<body>元素。 - 除下面提到的几点之外，这封信应该被标记成有着段落和标题的结构。 这封信有 1 个顶级标题（“回复...
【牛客】前端工程师-HTML专项练习知识点整理（一）
weixin_43414901的博客
03-13 1729
在 HTML 页面上，当按下键盘上的任意一个键时都会触发 javascript 的（）事件。 解析： onfocus 获取焦点时，一般在<input>、<select>、<a>标签中使用 onBlur 元素失去焦点时，一般用于表单输入框 onSubmit 在提交时，一般用于<form>标签 onKeyDown 键盘按键时触发 大前端方向包括了web前端，App页面，小程序页面等。html5平常方面都可以应用，但是大量应用于移动应用程序和游戏，因为用H..
CSS权重练习
WangZhang_521的博客
12-28 193
CSS权重练习一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
练习前端-CSS权重计算、复杂选择器、基础属性-day05
最新发布
08-31
本练习主要关注CSS的权重计算、复杂选择器以及基础属性，这些都是构建高效且可维护的CSS代码的关键要素。 首先，我们要了解CSS权重计算。权重决定了哪些样式会应用到元素上，当多个选择器对同一个元素定义了样式时...
web前端篇:css练习题
ITmiaomiao666的博客
06-12 4190
1.div和span标签在网页中的作用？ div将网站分割成独立的逻辑区域division分割 span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。 <style> span.active{ font-weight:bold; } </style> <p> <span>内容</span>...
练习前端-CSS引入、基础选择器-day04
08-31
本练习主要关注如何引入CSS以及基础选择器的使用，这些都是构建动态、美观网站的基础。我们将会探讨以下知识点： 1. **CSS引入方式**： - **内联样式**：通过在HTML元素的`style`属性中直接编写CSS代码，如`...
前端css选择器练习diner.zip
04-22
"前端css选择器练习diner.zip" 是一个针对CSS选择器学习和实践的资源包，名为"css-diner"。 在"css-diner"这个练习中，你可以深入理解并掌握各种CSS选择器的用法，从而提升你的前端开发技能。以下是一些关于CSS选择...
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
某培训微专业WEB前端开发作业 html,css,js作业适合练手的项目
07-14
前端开发，js,css, html ,H5课程作业，练习题
每日一点前端-4-html5小练习
张中华的博客
02-22 161
前言：这是我之前在看后盾网html5视频时做的一些小样例，现在我把我认为一些有意思的东西拿出来跟大家分享一下，还望多多指教。 1.datalist标签，这个标签制作的下拉可省了不少事呢……此处注意input里的list=“li”与datalist里的id=“li”。 datalist使用展示.gif 贴上一段简短的代码： <!DOCTY...
CSS基础(一)--选择器与权重计算练习
乐观 自信 爱
09-05 581
一<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> /*1.选中了标签 * 2.权重是 1 1 1 */ #box1 .hezi2 p {
2020-10-16 css08 css三大特性
weixin_46200509的博客
10-16 109
css三大特性 一.层叠性 二.继承性 css代码 div{ color:red; } html代码 <div> <p>继承</p> </div> 三.优先级 1.权重计算公式（不是十进制） 不是10个标签选择器就等于1个类选择器 ！important 无穷大 行内样式style="" 1000 id 100 类，伪类 10 标签 1 继承或者* 0 四.题目 1. css: #father{ color:red; } p{
40个适合前端初学者练手的基础案例（HTML&CSS）
m0_67846661的博客
05-26 4242
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361 翻译| 杨小爱 使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。 所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。 现在让我们一起去看看吧。 01、CSS 单选按钮.
从零开始学WEB前端——JavaScript基础介绍
su_zui的博客
02-24 1246
JavaScript（简称“JS”） 是一种具有**函数优先**的轻量级，**解释型**或即时编译型的**编程语言**。虽然它是作为开发Web页面的**脚本语言**而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于**原型编程**、多范式的动态脚本语言，并且支持**面向对象**、命令式、声明式、函数式编程范式。
前端工程师-HTML专项练习
weixin_45065754的博客
03-05 1488
A、min-width: 76px; text-align: left; margin:1em; B、min-width: 76dp; text-align: left; margin:1em; C、min-width: 76px; align: left; margin:1em; D、min-width: 76dp; align: l.
sublime text使用小技巧
m0_37564426的博客
10-31 2561
  一. 每次打开Sublime Text ,如果弹A new version of Sublime Text 2 is available, download now？的对话框?    通过如下设置,即可取消弹框.     设置办法：Preferences -&gt; Settings-User and add there: "update_check": false     翻译过来就是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值