精华内容
下载资源
问答
  • 子代选择器

    2018-05-19 09:06:00
    子代选择器写法:选择器>选择器{属性:值}特点:选择的时直接下一代元素 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>...

    子代选择器
    写法:选择器>选择器{属性:值}
    特点:选择的时直接下一代元素

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <style type="text/css">
     7         div>span{
     8             font-size: 40px;
     9             color: pink;
    10         }
    11         p>span{
    12             color: #388881;
    13             font-size: 70px;
    14         }
    15         
    16     </style>
    17 </head>
    18 <body>
    19     <div>
    20         <p><span>项目</span></p>
    21         <span>选择</span>
    22 
    23     </div>
    24 </body>
    25 </html>

     

    1 div>span{
    2             font-size: 40px;
    3             color: pink;
    4         }
    5<div>
    6         <span>选择</span>对应
    1 p>span{
    2             color: #388881;
    3             font-size: 70px;
    4         }
    5<div>
    6     <p><span>项目</span></p>对应

     

    转载于:https://www.cnblogs.com/twinkle-/p/9059234.html

    展开全文
  • CSS后代选择器和子代选择器 后代选择器(A B{……}) CSS的后代选择器根据A的所有后代B(包括直接子元素和间接子元素B)来选择。无论B是否被其他所包含,只要B被A包含即被选择。 HTML代码和效果: 子代选择器(A>...

    CSS后代选择器和子代选择器区别

    后代选择器(A B{……})

    CSS的后代选择器根据A的所有后代B(包括直接子元素和间接子元素B)来选择。无论B是否被其他所包含,只要B被A包含即被选择。

    HTML代码和效果:
    在这里插入图片描述

    子代选择器(A>B{……})

    CSS的子代选择器根据A的初代B(只包括直接子元素)来选择。B如果还被其他所包含则B不被选择。

    HTML代码和效果:
    在这里插入图片描述

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

    千次阅读 2019-07-08 18:43:47
    很多人容易把两者的混在一起,子代选择器只能选择元素的子代,而他的孙代、曾孙不能被选上,后代选择器可以选子代、孙代、曾孙的元素。下面看个例子 <!DOCTYPE html> <html> <head> <title>...

    关于选择器自己的领悟

    • 子代选择器和后代选择器

      很多人容易把两者的混在一起,子代选择器只能选择元素的子代,而他的孙代、曾孙不能被选上,后代选择器可以选子代、孙代、曾孙的元素。下面看个例子

       <!DOCTYPE html>
      <html>
      <head>
      <title>选择器</title>
      </head>
      <body>
      <div class="first">
      	<div class="second">
      		<p>子代</p>//first的子代
      		<div>
      			<p>孙代</p>//first的孙代
      			<div>
      				<p>曾孙</p>//firs的曾孙代
      			</div>
      		</div>
      	</div>
      	<div class="third">//first的第二个子代、second的兄弟
      		<P>兄弟</P>
      	</div>
      </div>
      </body>
      </html>
      

      上面用HTML元素展示了他们的关系,没有加上css的效果如下

      在这里插入图片描述
      下面加上后代选择器

      .first p{//注意有个空格
      		color: red;
      }
      

      效果如下
      在这里插入图片描述
      而如果使用的是子代选择器

      .second > p{
      		color: red;
      }
      

      注意的不是.first > p,因为first的子代只有div元素,没有p元素,而second的子代有p元素和div元素,second的孙代也有p元素,但没有渲染。效果如下
      在这里插入图片描述

    • 兄弟选择器

      兄弟选择器只能选择所选元素的后面兄弟元素,不能选择前面的兄弟元素

      .second + .third p{
        	color: red;
      }
      

      我们选了second类的一个兄弟下的p元素,效果如下
      在这里插入图片描述
      如果代码是

      .third + .second p{
        	color: red;
      }
      

      他们的兄弟元素下的second下的p元素不会被选渲染

    展开全文
  • 子代选择器: 子代是指儿子,用>连接,表示一个标签的下一级标签。 后代选择器: 后代是指儿子、孙子等所有的后代,表示一个标签之下的所有要找标签 两个标签也可以混合使用 例如: $(‘div > p’) ...

    子代选择器:

             子代是指儿子,用>连接,表示一个标签的下一级标签。

    后代选择器:

              后代是指儿子、孙子等所有的后代,表示一个标签之下的所有要找标签

    两个标签也可以混合使用

    例如:

             $(‘div > p’)   表示div标签的下一级p标签

             $(‘div  p’)   表示div标签之下的所有p标签

              $(‘div >p  a’)   表示div标签的下一级p标签下的所有a标签

     

     

     

     

     

     

     

     

     

    展开全文
  • CSS后代选择器和子代选择器

    千次阅读 2019-05-16 23:52:36
    CSS后代选择器和子代选择器 1.后代选择器 祖先元素和后代元素(相对的概念) 后代元素:被包含在祖先元素中的元素。 祖先元素:包含后代元素的元素。 后代选择器语法 选择器1 选择器2 选择器3{}选择器之间用...
  • 子代选择器后代选择器 一级菜单 二级菜单 二级菜单 二级菜单 <!-- 交集选择器和并集选择器 --> <div class="red">111</div> <div>1111</div>...
  • css的高级选择器,后代选择器,子代选择器,并集选择器,交集选择器 高级选择器: 后代选择器 子代选择器 并集选择器 交集选择器 一、后代选择器:  使用空格表示后代选择器,父元素的后代(包括...
  • 子代选择器和类选择器的优先级

    千次阅读 2018-11-22 15:40:17
    原因是:作用在一个选择器的两个class,一个是子代选择器,一个是类选择器,很显然,子代选择器的权值为两个值相加,所以更大,所以最后显示的是子代选择器的,而不是类选择器,第二个是根据浏览器的阅读习惯来,很...
  • 文章目录子代选择器:>号后代选择器:空格 文章目录子代选择器:>号后代选择器:空格 子代选择器:>号 .father>div{ border: 2px solid blue; }` 后代选择器:空格 .father div{ border: 2px ...
  • css子代选择器

    2019-12-07 21:17:39
    子代选择器 当前端展示的内容包含 标签,即内容是由富文本编辑的,这个时候如果内容中 含有图片,字体等,怎么去调整图片及文字的样式呢 1.这里推荐一个实用的方法,css子代选择器 举例: .food li{ border:1px ...
  • 后代选择器和子代选择器的区别 后代选择器:div p:匹配div中所有的p元素 子代选择器:div>p:匹配div子元素中的p元素 代码: CSS部分 <style> .wrap { width: 400px; height: 220px; padding...
  • 1.后代选择器: 写法:$("aaaa bbbbb") ...2.子代选择器: 写法:$("aaaa > bbbbb") 例:$("div > span") 指的是div标签下的下一个层级的span,并不是所有; 转载于:https://www.cnblogs.com/zhoujingg...
  • 群组选择器、后代选择器与子代选择器的优先级 群组选择器 要对不同的HTML对象定义相同样式时,可以采用群组选择器。例如: 要对p1,p2同时设置相同的颜色。 .p1,.p2{color:#aaa;} 上述规则在选择器中指定了多个对象...
  • 1,子代选择器:>号 .father>div{ border: 1px solid red; } 2,后代选择器:空格 .father div{ border: 1px solid pink; } 两者优先级比较: .father div{ border: 1px solid p...
  • css3后代选择器和子代选择器的区别及优先级 子代选择器:>号 .father>div{ border: 2px solid blue; }` 后代选择器:空格 .father div{ border: 2px solid pink; ...
  • Css 后代选择器与子代选择器的区别 后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px solid red;} 但是,如果你仔细想想,这俩个概念是不是有重复...
  • HTML中的 后代选择器 和 子代选择器

    千次阅读 2020-02-14 22:26:00
    1.后代选择器。...2.子代选择器。 格式: E>F {css样式 } (E和F都是选择器) 作用:访问到E下的所有的F元素(只访问下一级,只有一层)。 符号: >。 举个栗子: <!DOCTYPE html> <ht...
  • 后代选择器 子代选择器 样式属性的继承性
  • 后代和子代选择器   CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题。 1、后代选择器 比如下面的例子,我们需要将所有的“Hello”选择出来,当然我们可以使用类...
  • HTML的子代选择器

    千次阅读 2017-10-27 19:46:55
    Document /*子代选择器:先选择父亲,然后通过 > 选儿子*/ div>p{ color:red; font-size:30px; text-align:center; } p是div1的儿子 p是div的兄弟
  • 学习前端的朋友们,理解后代选择器和子代选择器有什么区别不?没搞明白的朋友,跟着小猿圈一起来学习一下吧。后代选择器用空格,比如A B{border:1px solid red;}子代选择器用>, 比如A>B{border:1px solid ...
  • 学习前端的朋友们,理解后代选择器和子代选择器有什么区别不?没搞明白的朋友,跟着小猿圈一起来学习一下吧。 后代选择器用空格,比如A B{border:1px solid red;} 子代选择器用>, 比如A>B{border:1px ...
  • 一:什么是 CSS 中的子代选择器 ? 二:后代选择器与子代选择器的区别。
  • CSS子代与子代选择器

    2020-07-20 12:10:00
    I am a bit confused between these 2 selectors. 我对这两个选择器有些困惑。 Does the descendent selector: 后代选择器
  • 后代、子代选择器 在HTML中普遍存在标签的嵌套,观察如下HTML5代码。 <div> <span>111</span> <ul> <li> <span>222</span> </li> <li> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,627
精华内容 650
关键字:

子代选择器