HTML/CSS选择器（学习整理）

最新推荐文章于 2022-08-12 00:11:04 发布

一只顾小白

最新推荐文章于 2022-08-12 00:11:04 发布

阅读量144

点赞数

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_46673313/article/details/108245872

版权

HTML/CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS样式写的位置

行内样式例如

<div style="color: red;">aaa</div>
直接写在标签内的样式为行内样式

内部样式

<style>
        @import url('CSS文件所在位置');
    </style>

外部样式

<link rel="stylesheet" href="css文件所在位置">
常用外部样式引入

引入方式优先级（就近原则）：行内>内部>外部

选择器

3种基本的选择器

class选择器

   <style>
        .menu {
            color: red;
        }
    </style>
    
<body>
    <div class="menu">我是div标签</div>
</body>
class对应的是“.”

id选择器

   <style>
        #menu {
            color: red;
        }
    </style>
<body>
    <div id="menu"></div>
</body>
注意：一个id名只能对应一个标签

标签选择器

    <style>
        div {
            color: red;
        }
    </style>
 <body>
    <div id="menu"></div>
 </body>

3种基本选择器的优先级：id>class>标签选择器（重点）

子代选择器
父元素>子元素（中间用“>”连接）

后代选择器
祖先元素后代元素（中间用“空格”连接）

并集选择器
选择器1，选择器2，选择器3{ }（并集选择器中间用“,”隔开）

交集选择器
选择器1选择器2选择器3{ }（交集选择器，选择器与选择器中间不写任何东西）

其他伪类选择器

<style>
        p::before{
            content: "我是添加的内容";
        }
    </style>

<style>
        p::after{
            content: "我是添加的内容";
        }
    </style>

before和after伪类选择器一般结合content来使用

高级选择器

 <style>
      div p:first-of-type{
           color: red;
       }
    </style>
   选择div下面的第一个p 并设置字体颜色为红色

<style>
      div p:last-of-type{
           color: red;
       }
    </style>
   选择div下面的最后一个p 并设置字体颜色为红色

<style>
      div p:nth-of-type(括号里写第几个，第三个就写3){
           color: red;
       }
    </style>
   选择div下面的第n个p 并设置字体颜色为红色

通用选择器
*{ }用于修改很多个相同设置的标签（通常用于全局修改）

否定选择器

<style>
      div p:not(括号里写不需要的标签){
          color: red;
      }
    </style>

否定选择器还可以配合伪类选择器来使用

 <style>
      div p:not(:first-of-type):after{
          content: "|";
      }
    </style>
    意为：在div下面的p标签中，除了第一个p标签，其他p标签后面都加上|

a标签的伪类

     a:link{} 未访问样式                     L
                                            O
     a:visited{} 访问后的样式(只生效颜色)     V
                                            E
                                             
    a:hover{} 鼠标悬浮时的样式            h 
    
     a:active{} 鼠标点击未松开的样式      a
     
                                        t
  方便记忆的方法：记住love 和 hat 两个单词 a标签的伪类顺序就能记住