精华内容
下载资源
问答
  • 后代选择器 子代选择器 样式属性的继承性
    属性的继承性:例如属性color具有继承性
    当样式中的上一次有color属性时,次样式内包裹的样式都具有color的属性值
    后代选择器用空格隔开;
    子代选择器用">"箭头隔开
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            /*后代选择器(空格):container下的所有的div都是红色*/
         #container div{
                color: red;
            }
    
            /*子代选择器(箭头):*/
            #container > div{
                color: red;
            }
            #container > .china{
                color: red;
            }
    
            .china1{
                color: green;
            }
        </style>
        <title>后代选择器</title>
    </head>
    <body>
    
        <div id="container">
            <div>div1</div>
            <div class="china">div2</div>
            <div>div3</div>
            <div>div4</div>
            <div class="china">div5
                <div class="china1">孙子元素div6</div>
            </div>
        </div>
    
    </body>
    </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元素不会被选渲染

    展开全文
  • HTML的子代选择器

    千次阅读 2017-10-27 19:46:55
    Document /*子代选择器:先选择父亲,然后通过 > 选儿子*/ div>p{ color:red; font-size:30px; text-align:center; } p是div1的儿子 p是div的兄弟
    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	    /*子代选择器:先选择父亲,然后通过 > 选儿子*/
    	    div>p{
    	    	color:red;
    	    	font-size:30px;
    	    	text-align:center;
    	    }
    	</style>
    </head>
    <body>
    	<div>
    		<p>p是div1的儿子</p>
    	</div>
    	<p>p是div的兄弟</p>
    </body>
    </html>

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

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

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

    1.后代选择器

    祖先元素和后代元素(相对的概念)

    后代元素:被包含在祖先元素中的元素。
    祖先元素:包含后代元素的元素。

    后代选择器语法

    选择器1 选择器2 选择器3{}
    选择器之间用空格隔开

    举个例子:选中c元素的后代元素span

    ...
            .c span{
                color: skyblue;
            }
    ...
    <body>
        <div class="c">
            <span>c的子代</span>
            <div>
                <span>c的后代</span>
            </div>
        </div>
        <span>c的兄弟</span>
    </body>
    

    2.子代选择器

    父元素和子元素(相对的概念)

    父元素:直接包含子元素的元素。
    子元素:被父元素直接包含的元素。

    子代选择器语法

    选择器1 > 选择器2{}

    举个例子:选中c元素的子代元素span

    ...
            .c > span{
                color: skyblue;
            }
    ...
    <body>
        <div class="c">
            <span>c的子代</span>
            <div>
                <span>c的后代</span>
            </div>
        </div>
        <span>c的兄弟</span>
    </body>
    

    展开全文
  • 子代选择器和类选择器的优先级

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

    万次阅读 2018-08-02 09:12:48
    在CSS3中,我们会遇到这个一...标签:必须是当前的标签的下一级 必须事儿子。 &lt;ul&gt; &lt;li&gt; &lt;a href="#"&gt;一级菜单&lt;/a&gt; &lt;div&gt...
  • 1.后代选择器: 写法:$(“ancestor descendant” ,标签之间用空格隔开 例在的代码中写: &lt;div&gt; &lt;p&gt; &lt;span&gt;s1&lt;/span&gt; &lt;/p&gt; &lt;span...
  • css3后代选择器和子代选择器的区别及优先级 子代选择器:>号 .father>div{ border: 2px solid blue; }` 后代选择器:空格 .father div{ border: 2px solid pink; ...
  • HTML中的 后代选择器 和 子代选择器

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

    万次阅读 2017-09-05 13:57:31
    1.后代选择器: 写法:$("ancestor descendant") 例:$("div span") 指的是div标签下的所有...2.子代选择器: 写法:$("parent > child") 例:$("div > span") 指的是div标签下的下一个层级的span,并不是所有;
  • 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。...
  • 一:什么是 CSS 中的子代选择器 ? 二:后代选择器与子代选择器的区别。
  • 包含选择器 ...子选择器 大于符号(&gt;),用于选择指定标签元素的第一代子元素 .food&gt;li{border:1px solid red;} 总结:&gt;作用于元素的第一后代,空格作用于元素的所有后代 ...
  • 子代选择器 “>” 只选择某个元素的子元素, div>p{ color:red; } div 标签的儿子 p 标签。和 div 标签的后代 p 标签的截然不同。 能够选择: <div> <p>我是div的儿子</p> </div> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 177,239
精华内容 70,895
关键字:

属于子代选择器