精华内容
下载资源
问答
  • 子代选择器 “>” 只选择某个元素的子元素, div>p{ color:red; } div 标签的儿子 p 标签。和 div 标签的后代 p 标签的截然不同。 能够选择: <div> <p>我是div的儿子</p> </div> ...

    子代选择器

    子代选择器用 > 表示,只选择指定元素的子元素(儿子标签);IE7开始兼容,IE6不兼容

    div>p{
        color:red;
    }
    

    div 标签的儿子(一级子标签) p 标签;和 div 标签的后代(当前元素下的所有子标签) p 标签截然不同

    能够选择:

    <div>
    	<p>我是div的儿子</p>
    </div>
    

    不能选择:

    <div>
        <ul>
            <li>
                <p>我是div的重孙子</p>
            </li>
        </ul>
    </div>
    
    顺序选择器
    • :first-child 选择指定父元素中第一个子元素;first(第一个),child(孩子)
    • :last-child 选择指定父元素中最后个子元素;last (末尾、最后)
    • IE8开始兼容,IE6、7都不兼容

    示例:

    选择父级元素为 div 中的第一个后代元素 p:

    div p:first-child{
        color: red;
        background: yellow;
    }
    
    <div class="box">
      <a href="#"><p>p 标签</p></a>
      
      <p>p 标签1</p>
      <p>p 标签2</p>
      <p>p 标签3</p>
      <p>p 标签4</p>
    
      <div>
        <p>p 标签11</p>
        <p>p 标签22</p>
      </div>
    </div>
    

    在这里插入图片描述
    选择父级元素为 div 中的最后一个后代元素 p:

    div p:last-child{
        color:blue;
    }
    

    在这里插入图片描述
    由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:

    <ul>
        <li class="first">项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li>项目</li>
        <li class="last">项目</li>
    </ul>
    

    用类选择器来选择第一个或者最后一个:

    ul li.first{
        color:red;
    }
    
    ul li.last{
    	color:blue;
    }
    
    下一个兄弟选择器

    + 表示选择下一个兄弟元素;选择指定的第一个元素之后紧跟的元素(兄弟元素)

    IE7开始兼容,IE6不兼容

    h3+p{
    	color:red;
    }
    

    选择上的是h3元素后面紧挨着的第一个兄弟。

    <h3>我是一个标题</h3>
    <p>我是一个段落</p><!--就是我-->
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我是一个段落</p><!--还有我-->
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <p>我是一个段落</p><!--可别落下了我-->
    <p>我是一个段落</p>
    <h3>我是一个标题</h3>
    <span>我是一个sapn标签</span><!--别看我,我不是-->
    

    在这里插入图片描述

    后面所有的兄弟选择器

    ~ 表示后面所有兄弟元素

    选择 h1 标签后面所有兄弟元素 p 标签

    h1~p {
        background: yellow;
    }
    
    <div>
      <h1>h1 标签</h1>
      <p>p 标签</p>
    
      <span>span 标签</span>
      <ul>
        <li>
          <p>p 标签</p>
        </li>
      </ul>
      
      <p>p 标签</p>
    </div>
    

    在这里插入图片描述

    展开全文
  • 先来段HTML代码 <div class="box"> <div>1</div> <div>2</div> <div>...选择box里面第一个div添加样式: .box > div:first-child { color: #7F7F7F;

    先来段HTML代码

    	<div class="box">
    	  <div>1</div>
    	  <div>2</div>
    	  <div>3</div>
    	  <div>4</div>
    	  <div>5</div>
    	</div>
    

    选择box里面第一个div添加样式:

    .box > div:first-child {
        color: #7F7F7F;
      }
    

    选择box里面最后一个div添加样式:

    .box > div:last-child {
        color: #7F7F7F;
      }
    

    选择box里面第2一个div添加样式:

    .box > div:nth-child(2) {  // 这里的2需要选中第几个就填第几个即可
        color: #7F7F7F;
      }
    

    这里需要注意的是,nth-child(N),这里需要加括号,N代表你要选择的元素的顺序,first-child和last-child是不需要加小括号的。

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

    点评:css后代选择器和子选择器的区别:用法不同,兼容性,所达到的效果不同等等,需要了解的朋友可以参考下1.用法不同:比如要找div的class名为con中p标签,子代选择器用法:div.con>p{color:red;}
    后代选择器:.con p{color:red;}
    2.兼容性:ie6不支持子代选择器
    3.所达到的效果不同
    看下图用子代选择器效果:

    复制代码代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'/>
    <title>CSS的子选择器</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    div.con>div>p{color:red;}
    </style>
    </head>
    <body>
    <div class='con'>
    <div>p
    <p>span1
    <div>
    <p>span2</p>
    </div>
    </p>
    </div>
    </div>
    </body>
    </html>


    看后代选择器效果:

    复制代码代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset='utf-8'/>
    <title>CSS的子选择器</title>
    <style type="text/css">
    *{margin:0;padding:0;}
    .con div p{color:red;}
    </style>
    </head>
    <body>
    <div class='con'>
    <div>
    <p>span1
    <div>
    <p>span2</p>
    </div>
    </p>
    </div>
    </div>
    </body>
    </html>

     

     

    详细出处参考:http://www.jb51.net/css/69915.html
    详细出处参考:http://www.jb51.net/css/69915.html

    展开全文
  • 派生选择器用的很多,派生选择器具体包括为后代选择器元素选择器、相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别。 1、css后代选择器 语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的...

    派生选择器用的很多,派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别。

    1、css后代选择器
    语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。
    例如:

    <html>
    <head>
        <style type="text/css">
            ul em {
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    
    <body>
    <ul>
        <li>List item 1
            <ol>
                <li>List item 1-1</li>
                <li>List item 1-2</li>
                <li>List item 1-3
                    <ol>
                        <li>List item 1-3-1</li>
                        <li>List item <em>1-3-2</em></li>
                        <li>List item 1-3-3</li>
                    </ol>
                </li>
                <li>List item 1-4</li>
            </ol>
        </li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    </body>
    </html>
    

    运行结果:

    即,无论你在哪里,我都要选中你,因为你是我的后代。

    2、css直接子元素选择器
    语法:h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色,h1为祖先,em为儿子,就像世袭制一样,只能传给儿子,孙子和其他堂亲都不行
    例如:

    <style type="text/css">
    h1 > strong {color:red;}
    </style>
    
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
    

    运行结果:

    只有第一个h1会变色。

    3、相邻兄弟选择器
    语法:h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”这是官方的说法,理解的误区在于这个加号,h1和p并不是同时被选中的,而是选择的是h1紧跟着后面的p元素,是递进的关系.
    例如:

    <!DOCTYPE HTML>
    <html>
    <head>
        <style type="text/css">
            li + li {
                color: red;
            }
        </style>
    </head>
    
    <body>
    <div>
        <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ul>
        <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3</li>
        </ol>
    </div>
    </body>
    </html>
    

    运行的结果是这样的:


    li+li选择的是第二个li,同理也可以理解成紧跟着第二个li的兄弟,即是第三个li,当然是在同一个级别下。所以出现第二、三li被选中。

    展开全文
  • 前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器(>...
  • 例如: .important.warning{ } 这个指包含important和warning关键词的会起到作用。...如果是 .important .warning{ }类型的类选择器则是指后代选择器,important类选择器中的子代warning类才会匹配到该样式。
  • css选择器

    2017-07-24 10:59:21
    css选择器用法简介:标签选择器,id选择器,类选择器,后代选择器,子代选择器,相邻选择器,伪类选择器,通配符选择器
  • p)用法基本没什么区别,唯一的区别是,后代选择器像下面例子这样作用于div是可以的: &lt;h1&gt; &lt;div&gt;后代选择器 &lt;/div&gt; &lt;/h1&gt; 而子选择器像下面例子,通过...
  • CSS选择器

    2018-05-17 10:32:28
    回顾CSS选择器CSS选择器回顾符号说明用法#idId选择器#id{ color:red; }.class类选择器.class{ //}Element标签选择器P { //}*通配符选择...子代选择器div &gt; span{}+紧邻选择器div+p选择div紧挨着的下一个p元...
  • 子代选择器 $(“ul>li”) 使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 后代选择器 $(“ul li”) 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 跟CSS的选择器一模一样。...
  • 通过css选择器可以为符合条件的html标签附上样式。... 子代选择 (div > p) 相邻选择 (div + p) 后续兄弟选择器(div~p) 通配符选择 (*) 否定选择器 :not(.link){} 属性选择器 伪类选择器 ...
  • CSS:复合选择器总结

    2020-08-11 11:26:55
    子代选择器 选择最近一级元素 只选亲儿子 较少 符号是> .nav>a 交集选择器 选择两个标签交集的部分 既是又是 较少 没有符号 p.red 并集选择器 选择某些相同样式的选择器 ...

空空如也

空空如也

1 2 3
收藏数 58
精华内容 23
关键字:

css子代选择器用法