CSS选择器的相关介绍

最新推荐文章于 2024-07-12 20:49:16 发布

Fancy_夏沫

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量145

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Fancy_vae/article/details/107145113

版权

CSS的选择器

css中有一套用于描述其语言的术语。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1200px;
            height: 160px;
            border: 1px solid #f40;
        }
    </style>

上述代码中的style里面的这段代码，在css的术语中被称为规则（rule）。这条规则从div开始选择要在DOM中的哪些元素上使用这条规则。
注意
花括号中的部分称为声明（declaration）
关键字color是一个属性, red 是其对应的值.
同一个声明中的属性和值组成一个名值对（property-value pairs），名值对用分号分隔.
这个教程中将类似strong的选择器称为标签选择器（tag selector）.CSS规范中称之为类型选择器（type selector）.

下面介绍几种常见的选择器

标签选择器

css:div{
}

ID选择器

css:#elem{}
html:id=“_id”
【注】
1.在一个页面中，ID值是唯一的
2.命名规范，字母 _ - 数字 （命名的第一位不能是数字）
3.命名方式：驼峰式（小驼峰、大驼峰）、下划线式、短线式

class选择器

通过设置元素的 class 属性，可以为元素指定类名。类名由坐着自己指定。 
文档中的多个元素可以拥有同一个类名。
在写样式表时，类选择器是以英文句号（.）开头的

伪类选择器

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式

伪类列表

:link
:visited
:active
:hover
:focus
:first-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
群组选择器

css:div,p,span{
}

通配选择器

*{}
尽量避免使用通配选择器，因为会给所有的标签添加样式

层次选择器

Fancy_夏沫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的相关介绍

我
复制链接

扫一扫

CSS选择器的相关介绍

CSS的选择器

“相关推荐”对你有帮助么？