CSS选择器

晴空的code

于 2023-03-27 17:54:25 发布

阅读量130

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_60856466/article/details/129800378

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里写目录标题

#子代选择器

个人博客——css选择器

使用CSS选择器可以指定将CSS样式应用到哪一个HTML元素，利用CSS中不同的选择器可以准确的选择需要的元素。

#标签选择器

标签选择器通常是HTML标签。

<style>
    div {
        color: #bcb441;
    }
</style>
 
<body>
     <div>Hello World</div>
</body>

#ID选择器

ID选择器像是给元素起了一个唯一的“名字”， ``#id名` 来获取对应的元素，并为其设置CSS样式。

<style>
    #demo {
           color: #bcb441;
    }
</style>
 
<body>
     <div id="demo">Hello World</div>
</body>

#类选择器

类选择器和ID选择器的唯一区别是:一个元素可以使用多个类选择器，但是只能使用一个ID选择器我们可以通过.类名来使用类选择器。

<style>
    .demo1 {
            color: #000000;
            backround-color: #99CC66;
    }
 
    .demo2 {
          background-color: #FFCC99;
    }
</style>
 
<body>
     <div class="demo1 demo2">Hello World</div>
</body>

一个元素可以同时使用多个类选择器，每个类选择器之间使用空格隔开，在demo1和demo2中都设置了背景颜色，但是background-color: #99CC66;会被background-color: #FFCC99;所覆盖，background-color: #99CC66;不会被应用在元素上。

在同一元素上使用多个类选择器，如果一个属性被声明多次，最终会生效的是距离被作用元素最近的那一个。

#通配符选择器*

<style>
    * {
        color: #CC3333;
    }
</style>
 
<body>
     <h1>Hello World</h1>
     <h2>Hi World</h2>
</body>

使用通配符选择器*选择了所有的元素(h1、h2)并设置元素内文本颜色为#CC3333。

#群组选择器

连接符: ,

CSS群组选择器，也称为多元素选择器，是用于同时选取多个元素的CSS选择器，它可以让你在一个CSS规则中一次选择多个元素，而不需要为每个元素编写单独的CSS规则。

下面先演示一个不使用群组选择器的示例:

<style>
    h1 {
       color: #CC3333;
    }
 
    .demo {
       color: #CC3333;
    }
 
    h3 {
      color: #CC3333;
    }
 
     div {
         background-color: #CCCC99;
     }
</style>
 
<body>
     <h1>Hello World</h1>
     <h2 class="demo">Hi World</h2>
     <h3>我在CODE学CSS</h3>
     <div>我在CODE学JavaScript</div>
</body>

需要给h1、h2、h3中的文本设置#CC3333颜色，给div设置背景颜色#CCCC99 在不使用群组选择器的情况下，代码出现了冗余，当需要设置CSS样式的元素多了之后就会变层一场灾难。

下面是使用群组选择器的示例:

<style>
    h1,.demo,h3 {
        color: #CC3333;
    }
 
    div {
       background-color: #CCCC99;
    }
</style>
 
<body>
     <h1>Hello World</h1>
     <h2 class="demo">Hi World</h2>
     <h3>我在CODE学CSS</h3>
     <div>我在CODE学JavaScript</div>
</body>

可以很明显的看出，不使用群组选择器和使用群组选择器时两者之间代码量的差距。

#子代选择器

连接符: >

<style>
     div > h1 {
         color: blue;
     }
</style>

<body>
    <div>
        <h1>Hello</h1>

        <section>
            <h1>World</h1>
        </section>
    </div>
</body>

示例中使用子代选择器选择了div下的所有子代h1并设置字体颜色，可以在浏览器中的效果可以看到，Hello的颜色变为了blue而World的颜色并没有发生改变，这是因为子代选择器只能选择到直接子元素，World并不是div的直接子元素，World是section元素的直接子元素是div的间接子元素。

#后代选择器

连接符: 空格

继续拿子代选择器中的例子来说，后代选择器是把子代选择器中的 > 换成了空格，就变成了div h1{}这时Hello 和World的颜色都会变成 blue，因为不论是直接子代还是间接子代都算是后代。

<style>
     div  h1 {
         color: blue;
     }
</style>

<body>
    <div>
        <h1>Hello</h1>

        <section>
            <h1>World</h1>
        </section>
    </div>
</body>

#通用兄弟选择器

连接符: ~

通用兄弟选择器是 CSS 选择器中用于选择与某个元素有相同父元素，并在该元素后面的所有兄弟元素。

比如说我们想要选择ul中某个li后面的所有li可以像下面这样使用通用兄弟选择器来实现。

<style>
     .demo ~ li {
         color: blue;
     }
</style>

<body>
    <ul>
        <li>通用兄弟选择器</li>
        <li class="demo">欢迎</li>
        <li>来到</li>
        <li>晴空的code</li>
    </ul>
</body>

我们使用通用兄弟选择器选中了.demo后面的所有li并未其字体设置了颜色，所以在浏览器中可以看到“来到”和“晴空的code”的颜色发生了变化而“通用兄弟选择器”和“欢迎”`的颜色并没有改变，因为并没有选中它们。

#相邻兄弟选择器

连接符： +

刚才介绍了通用兄弟选择器，现在让我们来学习相邻兄弟选择器。

相邻兄弟选择器只会选择紧接在该元素后面的元素，而通用兄弟选择器会选择所有在该元素后面的兄弟元素，继续用通用兄弟选择器的示例。

<style>
     .demo + li {
         color: blue;
     }
</style>

<body>
    <ul>
        <li>通用兄弟选择器</li>
        <li class="demo">欢迎</li>
        <li>来到</li>
        <li>晴空的code</li>
    </ul>
</body>

和通用兄弟选择器的效果对比一下可以发现只有“来到”的颜色发生了改变，这正好是应证了了相邻兄弟选择器和通用兄弟选择器的不同之处:相邻兄弟选择器只会选择紧接在该元素后面的元素，而通用兄弟选择器会选择所有在该元素后面的兄弟元素。

#伪类选择器

伪类可以分为两种:结构化伪类、UI伪类。

UI伪类

应用UI伪类最常见的地方非超链接(a)莫属，我们可以为超链接添加伪类，当用户鼠标悬停，或点击等情况时表现出一定的状态。

针对超链接的伪类有四种:link、visited、hover、active

link:未访问的超链接，可以设置颜色、字体。
visited:已访问的超链接，可以设置颜色。
hover:鼠标移入时的状态。
active：鼠标点击(点击没有释放)时的状态。

可以通过a:伪类的方式对a标签使用伪类。

<style>
    a:link { color: black; } /*为访问的链接*/

    a:visited { color: ; } /*已经访问过的链接*/

    a:hover { color: red; } /*鼠标悬停在链接上*/

    a:active { color: bule; } /*鼠标点击链接，且点没有释放*/

</style>

<body>
    <a href="https://www.baidu.com/" target="_blank">这是一个超链接</a>
</body>

在使用超链接伪类时，四者的顺序一定是:link、visited、hover、active 如果顺序错误，就会造成想要使用的伪类不起作用。

:focus伪类

当表单聚焦时添加状态。

<style>
    input:focus {
        border: solid 1px blue; /*光标在输入框中聚焦时，为输入框添加边框*/
    }

</style>

<body>
    <input type="text">
</body>

#结构化伪类选择器

:first-child：选择元素第一个子元素;
last-child：选择元素的最后一个子元素;
:nth-child(n)：选择元素的第n个子元素;
:nth-last-child(n)：选择元素的倒数第n个子元素;
:only-child：选择只有一个子元素的元素;
:not(): 选择不匹配指定选择器的元素;

<style>
  li {
      margin: 10px;
      border: solid 1px black; /*为了演示更加明显*/
  }
  
  ul:first-child {
      background-color: bisque;
  }
</style>

<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
    </ul>
</body>

如果要求将ul的第一个li加一个背景色很多人会写下与上面相似的代码(我第一次就用错了)，上面的代码理解起来好像是对的，但实际上这个会选择所有的li元素，正确的代码应该是下方这样的。

<style>
  li {
      margin: 10px;
      border: solid 1px black; /*为了演示更加明显*/
  }
  
  ul li:first-child {
      background-color: bisque;
  }
</style>

<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
    </ul>
</body>

我们需要选择的是ul下的li，而ul li:first-child就像是先把ul下的li全部选择出来，然后再对选择出来的li使用:first-chil进行筛选——选出第一个li。

下面将继续演示其余伪类选择器的使用：

<style>
  li {
      margin: 10px;
      border: solid 1px black; /*为了演示更加明显*/
  }
  
  ul li:last-child {
      background-color: bisque; /*最后一个li*/
  }
  
  ul li:nth-child(3) {
      background-color: black; /*第三个li*/
  }
  
  ul li:nth-last-child(2) {
      background-color: yellow; /*倒数第二个 li*/
  }
</style>

<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
    </ul>
</body>

下面单独演示:only-child和:not()伪类选择器:

<style>
  li {
      margin: 10px;
      border: solid 1px black; /*为了演示更加明显*/
  }
  
  ul li span:only-child {
      background-color: yellow;
  }
  
</style>

<body>
    <ul>
        <li>
          <span>一</span>
        </li>
          <span>二</span>
          <span>二</span>
        <li>
        </li>
    </ul>
</body>

尽管我们知道了:only-child的作用，但是刚开始使用还是容易犯下一些错误，上述代码的作用就是选择ul中的li，但是还有一个限制:ul li span:only-child中的span:only-child的意思是li元素中只有一个span元素，所以有背景颜色的会是一，而不是二。

:not()伪类选择器:

<style>
  li {
      margin: 10px;
      border: solid 1px black; /*为了演示更加明显*/
  }
  
  /*:not()*/
  ul li:not(:first-child) {
      background-color: yellow;
  }
  
</style>

<body>
    <ul>
        <li>一</li>
        <li>二</li>
        <li>三</li>
    </ul>
</body>