css中的11种选择器

最新推荐文章于 2024-07-11 18:05:14 发布

小周程序媛

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量2.9k

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/peri_zxy/article/details/118583808

版权

说起css的选择器，我们最熟悉的应该就是class选择器和id选择器。但是css中的选择器却远远不止这几种。

我们在使用css的时候，虽然知道每次使用什么方法来对元素进行设置，但是却没有总结过css中选择器的种类，今天在查阅了官方文档之后，我对css的选择器做了一个总结，下面写出来，算是给自己做了一个梳理。

如下所示是css的MDN官方文档中所例出来的css选择器。

1、类型选择器（示例：h1{}）

代码实例：


<style>
  h1{
    color: lightpink;
  }
  p{
    color: cornflowerblue;
  }
</style>
<body>
<div>
  <h1>类型选择器</h1>
  <p>类型选择器</p>
</div>
</body>

运行结果如下：

2、通配选择器（示例：*{}）

代码实例：

<style>
  *{
    color: peachpuff;
  }
</style>
<body>
<div>
  <h1>类型选择器</h1>
  <p>类型选择器</p>
</div>
</body>

运行结果如下：

3、类选择器（示例：.box{}）

代码实例：

<style>
 .one{
   color: darkseagreen;
 }
  .two{
    color: lightpink;
  }
</style>
<body>
<div>
  <h1 class="one">类型选择器</h1>
  <p class="two">类型选择器</p>
</div>
</body>

运行结果如下：

4、ID选择器（示例：#unique{}）

代码实例：

<style>
 #one{
   color: black;
 }
  #two{
    color: goldenrod;
  }
</style>
<body>
<div>
  <h1 id="one">类型选择器</h1>
  <p id="two">类型选择器</p>
</div>
</body>

运行结果如下：

5、标签属性选择器（示例：a[title]{}）

代码实例：

<style>
 #one{
   color: black;
 }
  #two{
    color: goldenrod;
  }
  a[href]{
    color: darkseagreen;
  }
</style>
<body>
<div>
  <h1 id="one">类型选择器</h1>
  <p id="two">类型选择器</p>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

6、伪类选择器（示例：p1:first-child{}）

代码实例：

<style>
 /*选择属于其父元素的首个子元素的每个 <p> 元素*/
 p:first-child{
   color: gold;
 }
</style>
<body>
<div>
<!--  父元素div中第一个元素是p，因此样式会变化-->
  <p>第一个p段落</p>
  <p>第二个p段落</p>
  <h1 id="one">类型选择器</h1>
<div>
<!--  这里p不是div父元素的第一个元素，因此样式没有改变-->
  <h1>类型选择器</h1>
  <p>第一个p段落</p>
</div>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

7、伪元素选择器（示例：p::first-line{}）

代码实例：

<style>
<!-- 选择每个 p 元素的首行 -->
 p::first-line{
   color: gold;
 }
</style>
<body>
<div>
<!--  父元素div中第一个元素是p，因此样式会变化-->
  <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p>
  <h1 id="one">类型选择器</h1>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

8、后代选择器（示例：nav ul li{}）

代码实例：

<style>
  nav ul li{
    color: darkseagreen;
  }
</style>
<body>
<div>
<nav>
  <div>
  <ul>
   <div>
     <a href="">
       <li>
         <div>
           <ul>
             <li>后代选择器1</li>
             <li>后代选择器2</li>
           </ul>
         </div>
       </li>
     </a>
   </div>
  </ul>
  </div>
</nav>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

9、子代选择器（示例：nav>ul>li{}）

代码实例：

<style>
  nav>ul>li{
    color: darkseagreen;
  }
</style>
<body>
<div>
<nav>
  <ul>
    <li>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </li>
  </ul>
</nav>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

上面分别例举了后代选择器和子代选择器的代码举例，下面对两者的区别进行一个总结。

CSS中nav ul li ul 与 nav>ul>li 这两种写法的区别是什么，>的作用是什么？
　　　　1、nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。
　　　　2、nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。
　　　　3、nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。
<style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }nav ul li ul{
            display:none;
        }nav>ul>li{
            float:left;
            padding:10px;
            border:1px solid blue;
        }nav>ul>li>ul>li{
            padding:10px;
            border-bottom:1px solid #ccc;
        }
</style>

<nav>
    <ul>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>
</nav>

<nav>
     <div>
         <ul>
             <div>
                 <a>
                     <li>
                         <div>
                             <ul>
                                 <li></li>
                             </ul>
                         </div>
                     </li>
                 </a>
             </div>
         </ul>
     </div>
</nav>

10、相邻兄弟选择器（示例：h1+p{}）

代码实例：

<style>
  h1+p{
    color: gold;
  }
</style>
<body>
<div>
  <h1>相邻兄弟选择器</h1>
  <p>相邻兄弟选择器1</p>
  <p>相邻兄弟选择器2</p>
  <p>相邻兄弟选择器3</p>
  <p>相邻兄弟选择器4</p>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

11、通用兄弟选择器（示例：h1~p{}）

代码实例：

<style>
  h1~p{
    color: gold;
  }
</style>
<body>
<div>
  <h1>通用兄弟选择器</h1>
  <p>通用兄弟选择器1</p>
  <p>通用兄弟选择器2</p>
  <p>通用兄弟选择器3</p>
  <p>通用兄弟选择器4</p>
  <a href="http://www.baidu.com" title="t1">点我试试，我是a标签</a>
</div>
</body>

运行结果如下：

通过上面的代码可以看出，相邻兄弟选择器比通用兄弟选择器更严格一点。

相邻兄弟选择器的作用是：给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。（同级的标签，不能是包含关系，那样紧跟就成了父子）

通用兄弟选择器的作用是：给指定选择器后边的所有选择器选中的所有标签设置属性。

小周程序媛

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
css中的11种选择器

说起css的选择器，我们最熟悉的应该就是class选择器和id选择器。但是css中的选择器却远远不止这几种。我们在使用css的时候，虽然知道每次使用什么方法来对元素进行设置，但是却没有总结过css中选择器的种类，今天在查阅了官方文档之后，我对css的选择器做了一个总结，下面写出来，算是给自己做了一个梳理。如下所示是css的MDN官方文档中所例出来的css选择器。1、类型选择器（示例：h1{}）代码实例：<style> h1{ color: lightp..
复制链接

扫一扫