2017年5月17号课堂笔记

最新推荐文章于 2024-02-23 03:15:31 发布
最新推荐文章于 2024-02-23 03:15:31 发布
阅读量140 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wsnedved2017/p/6867760.html
本文详细介绍了CSS中的各种选择器，包括标签、ID、类选择器等的基本用法及优先级，探讨了元素样式的继承性，并对并集、交集、后代等高级选择器进行了深入解析。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2017年5月17号 星期三 空气质量：中度污染 温度：19~34℃

内容：

CSS：标签选择器，id选择器，类选择器，基本选择器的优先级，元素样式的继承性，并集选择器，交集选择器；

后代选择器，子选择器，相邻兄弟选择器，通用兄弟选择器，结构伪类选择器，属性选择器；

 

一、标签选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <!-- 需求 ：  将页面中所有的p 元素中的内容
    字体大小变成25px   颜色是红色-->
  <style type="text/css">
       p{
           font-size: 25px;
           color: red;
       }
  </style>

</head>
<body>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>

  <div>div1</div>
  <div>div2</div>
  <div>div3</div>

</body>
</html>

二、id选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>id选择器</title>
    <!-- 需求 ：  将页面中id属性值是 name的元素
    字体大小变成25px   颜色是红色-->
  <style type="text/css">
       #name{  /*  id的属性值 必须是页面中唯一的！*/
           font-size: 25px; /* 字体大小*/
           color: red;/* 字体颜色*/
       }
  </style>

</head>
<body>

  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>

  <div  id="name">div1</div>
  <div  id="name1">div2</div>
  <div  id="name2">div3</div>
</body>
</html>

三、类选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!-- 需求 ：  将页面中class属性值是 name的元素
    字体大小变成25px   颜色是红色-->
  <style type="text/css">
       .name{  /*  class的属性值 页面中可以有多个！*/
           font-size: 25px; /* 字体大小*/
           color: red;/* 字体颜色*/
       }
  </style>

</head>
<body>

  <p>段落1</p>
  <p  class="name">段落2</p>
  <p>段落3</p>

  <div  class="name">div1</div>
  <div  class="name">div2</div>
  <div  >div3</div>
</body>
</html>

四、基本选择器的优先级

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>基本选择器的优先级</title>
    <!-- 需求 ：
      01.给p元素  增加id 属性值是 name
      02.给p元素  增加class   属性值是 d
      03.分别使用
       标签选择器    字体大小变成25px  颜色是红色
       类选择器      字体大小变成25px   颜色是绿色
       id选择器      字体大小变成25px   颜色是粉色

       优先级
       id选择器 > 类选择器 > 标签选择器
      -->
  <style type="text/css">
      p{/*标签选择器*/
         font-size: 25px;
          color: red;
      }
      .d{/*类选择器 */
         font-size: 25px;
          color: green;
      }
      #name{/*id选择器 */
         font-size: 25px;
          color: pink;
      }
  </style>
</head>
<body>
  <p id="name" class="d">段落</p>

</body>
</html>

五、元素样式的继承性

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>元素样式的继承性</title>
  <style type="text/css">
     div{  /* 01.只给div 设置样式  默认p 也会有div样式*/
         font-size: 25px;
          color: red;
      }

      p{ /*02.给p元素也设置了样式，p就使用自己的样式*/
          font-size: 50px;
          color: pink;
      }
  </style>
</head>
<body>

<div>
      div1
    <p>
        段落1
    </p>
</div>

</body>
</html>

六、并集选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <!--  需求：
      给 01.id属性值是s的元素
         02.class属性值是pan的元素
         03.标签是div的元素
         设置相同样式
    -->
    <style type="text/css">
        /*并集选择器   多个选择器之前使用,隔开*/
        #s,.pan,div{
            color: red;
        }
    </style>

</head>
<body>
  <div>div1</div>
  <div>div2</div>

<span id="s">span1</span>
<span  class="pan">span2</span>

</body>
</html>

七、交集选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <!--  需求：
      给 01.class属性值是pan的元素
         02.并且是div标签的元素
    -->
    <style  type="text/css">
        /*交集选择器    连着写，没有分隔符   必须是标签选择器 在前
            格式：1.标签选择器+类选择器
                  2.标签选择器+id选择器*/
        div.pan{
            color: red;
        }
    </style>

</head>
<body>
  <div id="s">div1</div>
  <div  class="pan">div2</div>

<span>span1</span>
<span  class="pan">span2</span>

</body>
</html>

八、后代选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <!--
        需求：
          改变 body中所有的span元素的样式（后代！）
    -->
    <style  type="text/css">
        /* 后代选择器     父元素  空格  后代元素 */
        body span{
             color:red;
        }
    </style>

</head>
<body>

   <div>
       <span>孙子span1</span>
   </div>

   <div>
       <span>孙子span2</span>
   </div>

<span>子span1</span>
<span>子span2</span>

</body>
</html>

九、子选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子选择器</title>
    <!--
        需求：
          改变 body中所有的子元素span的样式
    -->
    <style  type="text/css">
        /* 子选择器     父元素>子元素 */
        body>span{
             color:red;
        }
    </style>

</head>
<body>

   <div>
       <span>孙子span1</span>
   </div>

   <div>
       <span>孙子span2</span>
   </div>

<span>子span1</span>
<span>子span2</span>

</body>
</html>

十、相邻兄弟选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <!--
        需求：
           改变id属性值是m 的 下一个span兄弟节点的样式
    -->
    <style  type="text/css">
        /* 相邻兄弟选择器     元素+相邻元素 */
        #m+span{
             color:red;
        }
    </style>

</head>
<body>

   <div>
       <span>孙子span1</span>
   </div>
   <div id="m">
       <span>孙子span2</span>
   </div>

<span>子span1</span>
<span>子span2</span>
<span>子span3</span>
<span>子span4</span>

</body>
</html>

十一、通用兄弟选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <!--
        需求：
           改变id属性值是m 的 后面所有span兄弟节点的样式
    -->
    <style  type="text/css">
        /* 通用兄弟选择器     元素~相邻元素 */
        #m~span{
             color:red;
        }
    </style>

</head>
<body>

   <div>
       <span>孙子span1</span>
   </div>
   <div id="m">
       <span>孙子span2</span>
   </div>

<span>子span1</span>
<span>子span2</span>
<span>子span3</span>
<span>子span4</span>

</body>
</html>

十二、结构伪类选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <!-- 不需要在节点上 增加  额外的属性！ 结构伪类选择器-->
    <style  type="text/css">
      /*01.改变ul中第一个li元素的样式  颜色是红色
       ul li:first-child{
           color: red;
       }
       */
      /*02.改变ul中最后一个li元素的样式  颜色是红色
       ul li:last-child{
            color: red;
        }
       */

      /*03.改变页面中第3个p标签 颜色是红色  !  只看顺序  不看类型！
           001.无论p标签隐藏的多深！ 始终是自上而下的第三个p标签
           002.body节点下面第3个元素 如果是p 就显示样式

       body  p:nth-child(3){
            color: red;
        }
       */

      /*04.改变页面中第2个p标签  颜色是红色
          先看类型  再看顺序
     body  p:nth-of-type(2){
         color: red;
     }
     */
     /* 05.改变第一个ul中的第一个li 的样式 颜色是红色 */
      ul:nth-of-type(1) li:nth-of-type(1){
          color: red;
      }
    </style>

</head>
<body>
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
<ul>
    <li>u1li1</li>
    <li>u1li2</li>
    <li>u1li3</li>
    <li>u1li4</li>
</ul>
<ul>
    <li>u2li1</li>
    <li>u2li2</li>
    <li>u2li3</li>
    <li>u2li4</li>
</ul>

</body>
</html>

十三、属性选择器

老师代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>属性选择器 </title>

    <style  type="text/css">
        /* 01.选取带有id属性的p元素
        p[id]{
            color: red;
        }
       */
        /*02.选取id属性值是a的p元素
        p[id="a"]{
            color: red;
        }
        */

        /*03.选取id属性值是a开头的p元素
        p[id^="a"]{
            color: red;
        }
       */

        /*04. 选取id属性值是c结尾的p元素
        p[id$="c"]{
            color: red;
        }
        */
        /*05.选取id属性值包含b的p元素*/
        p[id*="b"]{
            color: red;
        }
    </style>

</head>
<body>

<p id="a">第1个段落</p>
<p id="b">第2个段落</p>
<p id="abc">第3个段落</p>
<p id="bc">第4个段落</p>
<p >第5个段落</p>


</body>
</html>

十四、作业和考试

1、作业：预习CSS美化，写MindManager笔记，把CSS看完

2、考试：

2017.05.17
15:38 开始，16: 30 结束；答题时间： 50 分钟；检查时间:2 分钟；
成绩： 92 - 4 = 88分

听歌答题好像会降速，以后注意调节（除非答题环境太吵否则少听歌），
感觉今天的分数有运气成分，关于CSS书写规范有百度两道题（应扣除）

十五、老师辛苦了！

 

转载于:https://www.cnblogs.com/wsnedved2017/p/6867760.html

软考高级信息系统项目管理师笔记-第24章法律法规与标准规范
鹿鸣天涯
03-11 205
第十三条 两个或者两个以上的申请人，在同一种商品或者类似商品上，以相同或者近似的商 标在同一天申请注册的，各申请人应当按照商标局的通知，在 30 天内交送第一次使用该商标的日 期的证明。实用新型，是指对产品的形状、构造或者其结合所提出的适于实用的新的技术方案。第三十一条 国家对公共通信和信息服务、能源、交通、水利、金融、公共服务、电子政务等重要行业和领域，以及其他一旦遭到破坏、丧失功能或者数据泄露，可能严重危害国家安全、国计民生、公共利益的关键信息基础设施，在网络安全等级保护制度的基础上，实行重点保护。
2017年3月17号课堂笔记
weixin_30533797的博客
03-17 130
2017年3月17号 中度雾霾 主要内容： 类和对象第一节 一、老师总结讲课内容： 类和对象 类： 我们在生活中 对身边的事物，进行一个不自觉的分类！对事物的抽象！ 类 定义了对象将会拥有什么特性（属性）以及行为（方法）！对象：描述客观事物的一个实体！看得见摸得着！ 万物皆对象！ 类和对象的关系！ 类是对象的模版，对象是类的实例！ 使用类的步骤！ 01....
2017年5月5号课堂笔记
weixin_30832351的博客
05-05 284
2017年5月5号 星期五 沙尘暴转晴 内容：U2 HTML5第一节课 一、01第一个霸气的网页 1、老师代码： <!DOCTYPE html><html><head lang="en"> <!-- html注释 不安全 用户在网页中查看源代码可以看到 w3c : World wide Web Consortium ...
2017年5月8号课堂笔记
weixin_30328063的博客
05-08 152
2017年5月8号 星期一 多云 空气质量：中度污染 内容：html5---无序列表，有序列表，自定义列表，html5中的一些input属性， 表格的使用，表格的跨行跨列，iframe内联框架 备注：本次课堂笔记主要转载自：老师博客，博客地址:http://www.cnblogs.com/999-/category/919604.html 一、无序列表 老师代码： <!DO...
2017年5月15号课堂笔记
weixin_30436101的博客
05-15 139
2017年5月15号 周一 空气质量：良好 内容：html按钮，文本域，文件上传，邮箱，小练习，pattern，初识css 一、按钮 老师代码： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>按钮</title>&l...
2017年07月05号课堂笔记
weixin_30737363的博客
07-14 150
2017年07月05号 星期三 多云 空气质量：中度污染 内容：mysql第五节课+MySQL自测考试 表连接查询：内连接，左右外连接，自连接 事务：事务的特性 ACID，demo（模拟 银行转账）开启，回滚，提交，关闭/开启事务自动提交 一、表连接查询 1、概念： 1）内连接 ：　通过匹配两个表中公共列，找到 公共的行！ 2）左外连接： 以左表为准，右表中没有数据返回null 3...
2017年3月3号课堂笔记
weixin_30682415的博客
03-03 386
2017.03.03 中度霾 循环结构： 一、Demo01（循环输出10000次语句） 1、老师写的代码： public class While02 { public static void main(String[] args) { /** * while(循环条件){ * 循环体（循环操作） * } * 循环条件...
2017年总结：人生百味，有你真好
热门推荐
杨秀璋的专栏
01-17 2万+
这篇文章是写给自己的，写给2017年的，写给娜女神的，写给这一年秀璋所有的亲人、朋友、同事、战友、学生、网友，甚至陌生的你，希望你读完这篇文章之后，能闭上自己的双眼，回味下这一年你的人生，默默流泪也好、淡淡一笑也罢、心情飘荡亦可，这一年就这么走了，刹那芳华。作者采用散文随意的方式书写，文章比较杂长，就当看一篇故事吧。希望你喜欢，如果文中存在不足或不到之处，还请海涵。 2014年结束，我写下《一万年...
2017年7月ROS学习资料小结
zhangrelay的专栏
07-31 6033
《孙子兵法·谋攻篇》:“上兵伐谋，其次伐交，其次伐兵，其下攻城；攻城之法为不得已。”任何发生在自己国土上的战争，即便胜利，也饱含屈辱。----~~~~----Gazebo 8使用ROS / Gazebo版本的组合介绍本文档概述了使用不同版本的ROS与不同版本的Gazebo结合使用的选项。建议在安装Gazebo ROS包装机之前阅读它。重要！简单分析一个快速正确的决定如果您计划使用特定版本的ROS，
小学计算机教师业务笔记,2016-2017学年度小学教师业务学习笔记
weixin_39728909的博客
07-25 615
业务学习笔记；(2015-2016年第一学期)；学习时间：2016年9月3日；学习地点：教导处；参加人员：全体教师；学习内容：听课目的与听课类型；我们知道，听课是一种经常性活动，而每一次听课对授；听课的目的不同就决定了有不同的听课类型；一、了解检查型听课；这种听课的目的是为了了解学校教学情况；这种听课带有“突然性”；另外，为了更深入地了解和研究问题，这种类型(2015-2016年第一学期)学习时间...
Oracle数据库课堂笔记
qq_45571971的博客
12-27 601
Oracle数据库课堂笔记 （一）数据库基础 用户创建语句： 格式：create user username identified by password; 例：create user hejing identified by 123456; 用户修改语句： 格式（改密码）：alter user username identified by password; 例：alter user hejin...
118云原生编程语言Golang学习笔记
tangguanlin2008的博客
12-11 3076
Golang学习笔记 文章目录1.Go简介1.1 简介1.2 设计初衷1.3 Golang vs Java1.4 应用领域1.5 用go语言的公司2.Go下载和安装2.1 开发工具2.2 Go下载2.3 Go安装2.4 Idea安装go插件2.5 DOS命令3.基础语法3.1 Go执行流程3.1.1 Go基本目录结构3.1.2 第一个HelloWord3.1.3 编译teset.go3.1.4 执行test.ext3.1.5 编译+执行3.1.6 Golang执行流程3.2...
Linux之进程控制与系统监视--课堂老师操作笔记
Unitue_逆流
03-22 2538
1、cat /etc/passwd 查看etc下的passwd文档，查找文件格式2、cat /etc/group 查看etc下的分组3、建立一用户登录，改变默认目录home，登录目录为/xcu/computer下，字符界面显示用户名信息。 useradd hello 新建用户hello useradd -g xcu world 新建用户world在xcu下查看用户名和密码 cat /etc
大模型学习笔记四：LangChain开发框架解析
谢白羽
02-23 3775
1、模型I/O封装LLMs：大语言模型Chat Models：一般基于LLMs，但按对话结构重新封装PromptTemple：提示词模板OutputParser：解析输出2、数据连接封装Document Loaders：各种格式文件的加载器Document transformers：对文档的常用操作，如：split，filter，translate，extract metadata，etcTextr Embedding Models：文本向量化表示，用于检索等操作。
运用各类传统计算机视觉算法探测不同种类乐高积木数量
08-20
资源下载链接为： https://pan.quark.cn/s/5a876511eb16 运用各类传统计算机视觉算法探测不同种类乐高积木数量（最新、最全版本！打开链接下载即可用！）
【无线通信技术】基于MATLAB/SIMULINK的多载波无线通信系统仿真及性能分析：OFDM系统关键技术研究与实现（论文复现含详细代码及解释）
08-20
内容概要：本文详细探讨了基于MATLAB/SIMULINK的多载波无线通信系统仿真及性能分析，重点研究了以OFDM为代表的多载波技术。文章首先介绍了OFDM的基本原理和系统组成，随后通过仿真平台分析了不同调制方式的抗干扰性能、信道估计算法对系统性能的影响以及同步技术的实现与分析。文中提供了详细的MATLAB代码实现，涵盖OFDM系统的基本仿真、信道估计算法比较、同步算法实现和不同调制方式的性能比较。此外，还讨论了信道特征、OFDM关键技术、信道估计、同步技术和系统级仿真架构，并提出了未来的改进方向，如深度学习增强、混合波形设计和硬件加速方案。; 适合人群：具备无线通信基础知识，尤其是对OFDM技术有一定了解的研究人员和技术人员；从事无线通信系统设计与开发的工程师；高校通信工程专业的高年级本科生和研究生。; 使用场景及目标：①理解OFDM系统的工作原理及其在多径信道环境下的性能表现；②掌握MATLAB/SIMULINK在无线通信系统仿真中的应用；③评估不同调制方式、信道估计算法和同步算法的优劣；④为实际OFDM系统的设计和优化提供理论依据和技术支持。; 其他说明：本文不仅提供了详细的理论分析，还附带了大量的MATLAB代码示例，便于读者动手实践。建议读者在学习过程中结合代码进行调试和实验，以加深对OFDM技术的理解。此外，文中还涉及了一些最新的研究方向和技术趋势，如AI增强和毫米波通信，为读者提供了更广阔的视野。
SpringBoot低空空域飞行管控中心平台毕业论文.docx
08-20
SpringBoot低空空域飞行管控中心平台毕业论文.docx
基于命令行输入的柱状图生成器-支持多组数据输入和自定义符号的ASCII艺术可视化工具-用于快速生成可自定义高度的文本柱状图以直观展示数值数据-使用Python处理命令行参数和条件判.zip
08-20
python基于命令行输入的柱状图生成器_支持多组数据输入和自定义符号的ASCII艺术可视化工具_用于快速生成可自定义高度的文本柱状图以直观展示数值数据_使用Python处理命令行参数和条件判.zip基于命令行输入的柱状图生成器_支持多组数据输入和自定义符号的ASCII艺术可视化工具_用于快速生成可自定义高度的文本柱状图以直观展示数值数据_使用Python处理命令行参数和条件判.zip
单片机程序+安卓程序+2025
最新发布
08-20
单片机程序+安卓程序
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值