【HTML03】css选择器

简单Janeee

已于 2022-06-30 20:17:50 修改

阅读量117

点赞数

分类专栏： html基础文章标签： html 前端 css3

于 2022-06-12 20:45:55 首次发布

本文链接：https://blog.csdn.net/liqiannan8023/article/details/125226891

版权

html基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

文章目录

1.标签选择器

所有符合条件的标签都会执行样式，无论其嵌套有多深，都会被选择上（缺点：太具体，不需要的也会被选上）

<style>
  p{

     color:#0099ff;
      font-size: 30px;
      text-indent: 50px;
      /*设置缩进段落*/
    }

   </style>

<body>
        <p>设置标签段落</p>

</body>

2.id选择器

一个页面只能有一个id名，每个标签只能有一个id，也只能设置一个id

id选择器使用#号来声明

<style>
   #one{
      color: pink;
     font-size:40px;
    }

</style>

可以多个div但是不常用，需要记住id名

<body>

    <div id="one">我是显示one的样式</div>

</body>
</style>

可以多个div但是不常用，需要记住id名

<body>

    <div id="one">我是显示one的样式</div>

</body>

3.class选择器

通过 . 来声明class来使用，一个标签，可以有多个名字，多个标签，可以有相同的名字


<style>


  /*.自己起的名字*/

    .title{

      color: green;

      font-size: 40px;

    }

</style>

<body>

   <div class="title bg">这是一个类选择器的格式</div>

</body>

4.子代后代选择器

后代选择器：

元素1空格元素2空格孙子{样式} //声明：元素12是基础选择器，且元素2，一定要是元素1的后代（ol ul dl等也可）

.类选择器后代{字体的颜色和内容}//不管多深都会改变

子代选择器:

.类选择器>子代 //只是亲儿子改变

5.交并集选择器

并集：两个集合所有元素组成的集合

交集：两个集合中公共元素组成的集合

交集选择器：中间没有空格有div标签选择器和类选择器header

div.header{}

并集选择器：中间使用，（逗号）没有空格

div,.header{}div标签和header标签共同的样式是

并集选择器需要竖着写，最后一个元素不需要逗号

6.序选择器


<style>


  li:nth-child(odd){

      /*odd为奇数*/

      color: green;

    }

    li:nth-child(even){

      /*even为偶数*/

      color:red;

    }

    li:first-child{

      color: red;

    }

    li:last-child{

      color: blue;

    }

  /*  li:nth-child(2){

      color: green;

    }*/

  /* 注意：使用相同的选择器，后面的会覆盖前面的*/

  </style>

7.下一个兄弟选择器

<style>


 h2+p{

  color: red;

   }

</style>

作用原理：找到h2标签对其后面的标签p进行更改，若没有找到标签p则此条代码无意义。

/相同权重情况下谁在后面听谁的/

/空格！空格important>行内样式>id选择器>类选择器>标签选择器>通配符选择器/

上一篇：02：css的认识
下一篇：04：盒子模型