CSS选择器详解-优快云博客

本文深入讲解CSS中的各类选择器，包括标签、类、ID、属性和伪类选择器的使用方法及特性，辅以实例说明如何精准定位和样式化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器

基本写法

选择器：{

        属性：值；

        属性：值

}

标签选择器

写法：标签{属性：值；}

div{
       width: 100px;
       height: 300px;
       border: 1px solid black;
   }

特点：标签选择器定义以后，会将页面所有的元素都执行这个标签样式。

class选择器

写法：自定义类名{属性：值；}

 .block {
            width: 500px;
            height: 500px;
            background: deeppink;
        }

特点：

谁调用，谁生效
一个标签可以有多个类选择器
多个标签可以调用同一个类选择器

类选择器命名规则：

不能用纯数字或者数字开头来定义命名
不能使用特殊符号（_除外）来定义命名
不推荐使用汉字来命名
不推荐使用标签名，属性，属性值来定义类名

id选择器

写法：#自定义名{属性：值；}

#di {
         width: 100px;
         height: 100px;
         background: orange;
        }

特点：

谁调用，谁生效
一个标签只能调用一个id选择器
一个id选择器在一个页面智能调用一次

属性选择器

 div[class="b"][id="bb"]{
            width: 300px;
            height: 500px;
            background: black;
}

字父元素选择器

 #ulmenu{
            border: 1px solid silver;
            list-style: none;
          
        }
 #ulmenu li{
            
            color: red;
        }

伪类选择器

伪类选择器不像id选择器、class选择器会立即生效，它是根据一些事件触发才会生效控制

常用伪类的状态有：

:link        选择未访问的链接
：visited    选择已访问的链接
：hover      选择鼠标指针浮动在其上的元素
：active     选择活动的链接
：focus      选择获取焦点的输入字段

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*未访问时是黑色*/
            color: black
        }
        a:visited{
            /*浏览过后是红色*/
            color: red;
        }
        a:hover{
            /*鼠标移入是绿色*/
            color: green;
        }
    </style>

</head>
<body>
        <a href="#">超链接1</a>
        <a href="#">超链接2</a>

</body>
</html>

权重和优先级

优先级：! important>行间样式>id>class>标签选择器>通配符

优先级一样，后面覆盖前面 class和属性一级

css权重（可叠加，256进制，不是十进制）

！important           infinity       正无穷

行间样式               1000

Id                     100

Class|属性|伪类          10

标签选择器|伪元素         1

通配符                   0