选择器的结构关系「建议收藏」

选择器的结构关系「建议收藏」选择器的结构关系

大家好,又见面了,我是你们的朋友全栈君。

 1 <!doctype html>
 2 <html lang="en">
 3      <head>
 4          <meta charset="UTF-8">
 5          <meta name="Generator" content="EditPlus®">
 6          <meta name="Author" content="">
 7          <meta name="Keywords" content="">
 8          <meta name="Description" content="">
 9          <title>Document</title>
10          <style type="text/css">
11              /* .box1 .txt1 .tnt1{
12                 background:red;
13             } */
14             /* .box1 .tnt1{
15                 background:red;
16             } */
17             .box1 .tnt1{
    
    
18                 font-size:36px; 
19             }
20             .box1>span{
    
    
21                 background:red;
22             }
23             .box1,.txt1,.tnt1{
    
    
24                 border:1px solid red;
25             }
26             div.txt1{
    
    
27                 background:pink;
28             }
29             .box1 + span{
    
    
30                 font-size:30px;
31             }
32          </style>
33     </head>
34     <body>
35         <!--
36             标签有不同结构,所以选择器同理;
37             并列(兄弟)关系  嵌套(父子)关系;
38             1.包含选择器: 选中后代,可以跨越多级.{.box span(选中所有span标签)};
39             2.子集选择器: 选中儿子, 不能跨越多级; .box>span(选中佩奇爸爸);
40             3.群组选择器: 多个选择器选择到一组, 用逗号隔开; {(同时选择多个选择器名用逗号隔开)作用是同时对多个标签起作用};
41             4.复合选择器: 需要标签同时满足两个选择器的条件才能满足;{(div.txt1)选中我是佩奇妈妈};
42             5.毗邻选择器: 选择某个元素紧挨着的下一个兄弟元素; {(.box1+span)选中我是佩奇爷爷}; 
43         -->
44          <div class="box1">
45             <p class="txt1">
46                 我是佩奇妈妈;
47                 <span class="tnt1">小猪佩奇一号</span>
48                 <span>小猪佩奇二号</span>
49                 <span>小猪佩奇三号</span>
50                 <span>小猪佩奇四号</span>
51             </p>
52             <span>佩奇爸爸来了!</span>
53         </div>
54         <span>佩奇爷爷来了!</span> </br>
55         <div class="txt1">我是佩奇妈妈!</p>
56     </body>
57 </html>

 

转载于:https://www.cnblogs.com/soTired/p/10152917.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107131.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 学习笔记:01_Git应用开发详解学习目标

    学习笔记:01_Git应用开发详解学习目标

  • jquery面试题目_高并发面试题

    jquery面试题目_高并发面试题1.jQuery库中的$()是什么?(答案如下)$()函数是jQuery()函数的别称,乍一看这很怪异,还使jQuery代码晦涩难懂。一旦你适应了,你会爱上它的简洁。$()函数用于将任何对象包裹成jQuery对象,接着你就被允许调用定义在jQuery对象上的多个不同方法。你甚至可以将一个选择器字符串传入$()函数,它会返回一个包含所有匹配的DOM元素数组的jQ…

  • 计算机图形学中的空间坐标系

    计算机图形学中的空间坐标系

  • Android怎么查看手机中的本地数据库

    Android怎么查看手机中的本地数据库我前几天做的项目中有本地数据库,所以就用的SQLite,在调试数据库时,,很想看一下里面的表结构是否正确,这个时候就十分苦恼,因为这个db文件不能够直接拿出来,我们知道,在DDMS里面有一个FileExplorer,它里面保存着手机中的各个文件夹,但是尝试打开里面的文件夹的时候,却发现怎么点都没有东西,于是我就十分不解,明明我写了数据库,为什么没找到这个文件呢?后来发现其实是没有权限。下面需要注意…

  • Bean实例化报错org.springframework.beans.factory.BeanCreationException

    Bean实例化报错org.springframework.beans.factory.BeanCreationException

  • a星算法c++实现_递归算法理解

    a星算法c++实现_递归算法理解翻了翻别人写的博客,我看到一个A星算法,只怪自己见识太少,竟然没听过这个算法。网上查了好些资料,自己对这算法理解了些,并用C#实现出来。           A星算法,也叫A*算法。这是一种在图形平面上,有多个节点的路径,求出最低通过成本的算法。如在一张dota地图上,英雄从一个地方走动到地图上另一个点,它选择最优路线的算法。       如上图,绿点是

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号