精华内容
下载资源
问答
  • 属于子代选择器
    万次阅读
    2018-08-02 09:12:48

    在CSS3中,我们会遇到这个一个问题,当层级过多的时候,我们想对其中的某些标签进行操作,有时候我们又想只对某一层级的标签进行操作,这个时候就涉及到字标签和后代标签的问题


    子标签:必须是当前的标签的下一级 必须事儿子。

    <ul>
        <li>
            <a href="#">一级菜单</a>
            <div>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
                <a href="#">二级菜单</a>
            </div>
        </li>
    
    </ul>

    例如上面的 li这个标签的字标签就是 a标签和div标签,那有人就有疑问了,那 li的字标签 div设置样式的时候里面的a标签会不会变化呢,答案是 a 标签是不会变化的。
    在样式里面可以这样写

            ul li > a {  /*子代选择器 子 指的是 亲儿子  大于号分割   此时的a 一定是 li 的亲 儿子  */
                color: red;
            }

    后代标签

            ul a  {   /*后代选择器 所有的后代的意思 最多*/
                color: red;
            }

    后代标签只要是当前标签里面的任意一个标签都行不一定非要亲儿子

    更多相关内容
  • 1.用法不同:比如要找div的class名为con中p标签,子代选择器用法:div.con>p{color:red;} 后代选择器:.con p{color:red;} 2.兼容性:ie6不支持子代选择器 3.所达到的效果不同 看下图用子代选择器效果: 复制代码...
  • css后代子代选择器

    2022-05-20 21:23:46
    css后代子代选择器

    1.后代选择器:空格

    作用:根据HTML标签的嵌套关系,选择父元素后代中满足条件的元素

    选择器语法:选择器1 选择器2

      <style>
        div p{
          color:red;
        }
      </style>
    </head>
    <body>
      <p>这是一个标签</p>
      <div>
        <p>这是div的儿子</p>
      </div>
    </body>

     

    2.子代选择器

    选择器语法:选择器1>选择器2

    错误效果:我只想要”这是div里面的a“变红

      <style>
        div a{
          color:red;
        }
      </style>
    </head>
    <body>
      <div>
        father
        <a href="#">这是div里面的a</a>
        <p>
          <a href="#">这是div里面的p里面的a</a>
        </p>
      </div>
    </body>

    正确效果:

        div>a{
          color:red;
        }

     

     

    展开全文
  • CSS之子代选择器

    千次阅读 2021-04-24 09:30:56
    子选择器

    子代选择器

    子代选择器只选中父级元素的亲一代,父子级之间用大于号“>”连接
    示例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>子选择器</title>
    		<style type="text/css">
    			#div_11{
    				background-color: #3A98FD;
    				width: 300px;
    				height: 300px
    			}
    			#div_12{
    				background-color: #90EE90;
    				width: 200px;
    				height: 200px
    			}
    			#div_21{
    				background-color: blueviolet;
    				width: 300px;
    				height: 300px;
    			}
    			/* 父子级之间用大于号“>”连接,将子代的文本颜色设置为红色 */
    			#div_11>#div_12{
    				color: #FF0000;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="div_11">
    			这是第一个div
    			<div id="div_12">
    				这是第一个div的子代div
    			</div>
    		</div>
    		<br>
    		<div id="div_21">
    			这是第二个div 
    		</div>
    	</body>
    </html>
    

    页面效果
    在这里插入图片描述
    这是小白白的笔记,如果这个笔记适合大家学习,大家也可以拿去滴哟!欢迎大家积极指正哦!

    展开全文
  • 1.后代选择器: 写法:$(“ancestor descendant” ,标签之间用空格隔开 例在的代码中写: &lt;div&gt; &lt;p&gt; &lt;span&gt;s1&lt;/span&gt; &lt;/p&gt; &lt;span...

    1.后代选择器:

    写法:$(“ancestor descendant” ,标签之间用空格隔开

    例在的代码中写:

    <div>
    <p>
    	<span>s1</span>
    </p>	
    <span>s2</span>
    <div>
    	<span>s3</span>
    	<span>s4</span>
     </div>
     <span>s5</span>
    </div>
    

    而在头标签中的写上:
    div div span{ color:red; }指的是div标签下的div标签下的所有span标签都变红,不管是什么层级即s3、s4变红;

    2.子代选择器:

    写法:$(“parent > child”),标签之间用大于号隔开,指的父标签下的下一个层级的子标签,并不是所有标签

    例:div>span{ color:blue; }指的是div标签下的下一个层级的span即s2、s5变成蓝色而不是div里div里的s3、s4;

    在这里插入图片描述

    展开全文
  • 子代选择器与后代选择器的区别

    千次阅读 2021-05-03 12:18:56
    使用后代选择器 <!... <... <head>...后代与子代选择器的区别</title> <!--<link rel="stylesheet" type="text/css" href="*.css"/>--> <script language="javascript
  • 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。...
  • 一:什么是 CSS 中的子代选择器 ? 二:后代选择器与子代选择器的区别。
  • 后代选择器与子代选择器的区别

    千次阅读 2020-04-26 17:09:52
    后代,顾名思义,子孙后代,不仅包括子还包括孙,曾孙,曾曾孙,只在在父里面的,都能管到。 子代,就只是儿子辈了,再往下的就管不了了。...子代选择只能一层一层的往下,孙1的子代选择:.the-demo>l...
  • 子代选择器和后代选择器的区别

    千次阅读 2019-07-08 18:43:47
    很多人容易把两者的混在一起,子代选择器只能选择元素的子代,而他的孙代、曾孙不能被选上,后代选择器可以选子代、孙代、曾孙的元素。下面看个例子 <!DOCTYPE html> <html> <head> <title>...
  • 本次总结的四种基础选择器,是使用之前的标签选择器,id选择器,类选择器所组合出来的。选择器介绍(一)标签选择器、id选择器、类选择器https://www.jianshu.com/p/d2f54bc64302一、后代选择器 (element1 element2)...
  • css子代选择器

    千次阅读 2019-12-07 21:17:39
    子代选择器 当前端展示的内容包含 标签,即内容是由富文本编辑的,这个时候如果内容中 含有图片,字体等,怎么去调整图片及文字的样式呢 1.这里推荐一个实用的方法,css子代选择器 举例: .food li{ border:1px ...
  • CSS后代选择器和子代选择器

    千次阅读 2019-05-16 23:52:36
    CSS后代选择器和子代选择器 1.后代选择器 祖先元素和后代元素(相对的概念) 后代元素:被包含在祖先元素中的元素。 祖先元素:包含后代元素的元素。 后代选择器语法 选择器1 选择器2 选择器3{}选择器之间用...
  • HTML中的 后代选择器 和 子代选择器

    千次阅读 2020-02-14 22:26:00
    1.后代选择器。...2.子代选择器。 格式: E>F {css样式 } (E和F都是选择器) 作用:访问到E下的所有的F元素(只访问下一级,只有一层)。 符号: >。 举个栗子: <!DOCTYPE html> <ht...
  • css3后代选择器和子代选择器的区别及优先级 子代选择器:>号 .father>div{ border: 2px solid blue; }` 后代选择器:空格 .father div{ border: 2px solid pink; ...
  • 后代选择器和子代选择器的区别

    万次阅读 2017-09-05 13:57:31
    1.后代选择器: 写法:$("ancestor descendant") 例:$("div span") 指的是div标签下的所有...2.子代选择器: 写法:$("parent > child") 例:$("div > span") 指的是div标签下的下一个层级的span,并不是所有;
  • 子代选择器和类选择器的优先级

    千次阅读 2018-11-22 15:40:17
    原因是:作用在一个选择器的两个class,一个是子代选择器,一个是类选择器,很显然,子代选择器的权值为两个值相加,所以更大,所以最后显示的是子代选择器的,而不是类选择器,第二个是根据浏览器的阅读习惯来,很...
  • 相邻兄弟选择器相邻兄弟选择器困扰我很久了,从字面上理解感觉还是很好理解,但是就是不会使用,也是查了很多资料,最后才真正的解决了,也能够比较正常的使用。下面是我整理的一些相关笔记。选择相邻兄弟 如果需要...
  • jquery后代选择器子选择器区别

    千次阅读 2022-02-25 20:59:52
    jquery后代选择器子选择器有什么区别吗?
  • HTML的子代选择器

    千次阅读 2017-10-27 19:46:55
    Document /*子代选择器:先选择父亲,然后通过 > 选儿子*/ div>p{ color:red; font-size:30px; text-align:center; } p是div1的儿子 p是div的兄弟
  • CSS后代选择器子选择器的区别

    千次阅读 2021-01-23 19:29:11
    首先来明确一下概念: 什么是后代选择器?...什么是子选择器? 语法:选择器1>选择器2{} 例子:.xixi > i{ color: red; } 解释:简单来说呢,就是选择类xixi的元素的儿子中的i标签,注意这里说的儿子,
  • HTML+CSS设置子代选择器>,后代所有元素颜色样式都改变了 文字颜色子代会继承父代,但边框不会
  • 后代选择器 子代选择器 样式属性的继承性
  • 子代选择器 “>” 只选择某个元素的子元素, div>p{ color:red; } div 标签的儿子 p 标签。和 div 标签的后代 p 标签的截然不同。 能够选择: <div> <p>我是div的儿子</p> </div> ...
  • CSS选择器的优先级(从上至下,依次递减): !important ...子选择器(ul>li) 后代选择器(lia) 通配符选择器(*) 属性选择器(a[rel="external"]) 伪类选择器(a:hover,li:nth-child) ......
  • CSS的子选择器与后代选择的区别

    千次阅读 2018-04-12 17:01:01
    一、子选择器还有一个比较有用的选择器子选择器,即大于符号(&gt;),用于选择指定标签元素的第一代子元素。这行代码会使class名为food下的元素li(水果、蔬菜)加入红色实线边框。.food&gt;li{border:1px ...
  • 1.4 “选择器 交集选择器 比如: <p class="c">交集</p> 即是p标签,class="c"也满足 效果:交集这个文字变红 样式:p.c{ color:red; } 并集选择器(中间用逗号隔开) 效果:大哥和...
  • 后代选择器元素选择器的区别

    千次阅读 2018-08-27 15:25:24
    2.元素选择器用&gt;作为连接符号 2.选中标签范围 1.后代选择器会选中指定标签中,所有的特定后代标签,也就是会选中儿子,孙子,只有放到标签中的特定标签都能选中 2.元素选择器只会选中指定标签中,所有...
  • 在前面的文章中多次提到了元素和直接元素,本篇文章来说明这两者的区别。 <div id="list"> <div name="a"> <div name="c">web前端</div> <div name="d">梦之蓝</div> ...
  • 前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 198,228
精华内容 79,291
关键字:

属于子代选择器

友情链接: xiangkongzhen.rar