CSS类,ID,标签和伪类详细说明

Myth丶恋晨 2022-08-06 02:24 249阅读 0赞

**CSS有4种定义方式：**

**1、类：**名称前面是一个点，需要注意的是类实际上是属性，点前面如果没有其它内容，则默认是全局的，有的话，是专门那个对象的

**2、ID：**名称前面是个"\#"，这种专门用于对象的id属性的，本质上作用就是当你使用id的时候如果又想设置样式, 那么就不必再写class属性了。

还能避免其它id使用此属性，因为id 必须唯一。当然，这种避免基本没用，因为你无需避免，不用就行了

**3、标签：**其实每个内置标签，比如p， a， img， 都有预置好了的样式，当然还有其它作用。但是这个本质上和自定义标签是一样的，只不过内部已经定义好了

**4、伪类：**

伪类只有4种: link，hover，active，visited

从名称来看，是专门针对超链接标签a的， 但是**后来扩展到其它任何标签**

伪类的本质是描述不同状态下的样式自动切换

如果不用伪类，你可以用JavaScript在相应的事件里自己处理。伪类提供了一个简单的方法

**5、CSS标签伪类的写法：**

**伪类冒号的两端不能有空格，** 这说明，冒号其实是一个连接符，和点号是属性的连接符一样，

因为**CSS的空格表示不同的对象，**也就是说，任何CSS样式名称如果之间有空格，那么就别认为是两个标签，而不是一个。

**(1)**如果没空格，就被认为是一个标签，例如**div:hover\{color:red\}**

这个CSS语句实际上只定义了一个CSS对象，就是div:hover，或者说给div添加了一个属性hover，

这个属性不同于一般的属性，它响应鼠标移动过来的消息，使用的时候不用写hover，所有div都自动会响应鼠标移过来， 颜色变成红色

**(2)**而**div.hover\{color:red\}**

这个CSS语句也只定义了一个CSS对象，就是div.hover，

这等于给div添加了一个普通属性hover， 这个属性怎么用呢？

需要你在div标签里写class="hover"， 必须这么用，否则不起作用

**(3)****div .hover\{color:red\}**又表示什么呢？

因为div和.hover之间有个空格，这实际上是两个标签，但是描述了一种继承关系，

我们定义的hover样式，必须在div的下一级标签里设置才起作用， div外边和div自身设置class="hover"都不起作用

更多的也是一样，**div .hover .abc**，

表示3重继承关系, 想要这个样式起作用，就需要div下面的一个标签设置class为hover，这个标签内部的子标签再设置class为abc， 这样才行

**(4)****div,.hover\{color:red\}**

在div和.hover之间有个逗号， 这其实是一种并列关系，是一种简写，等价于div\{color:red\} .hover\{color:red\}这样两个标签定义

CSS样式标签可以重复定义，后面定义的样式会添加或者覆盖

**(5)**还有更怪异的写法： **div.hover.abc\{color:red\}**，

之间没有空格， 此时实际上定义的是div属性hover的属性abc的样式， 怎么使用它呢？

因为这种基本没什么用，没有引入特殊的使用规则，就是<div class="hover abc">文本</div>这样

(奇怪的是"abc hover"这样反着写也行，实际上是并列关系)，这和使用两个样式的情况会冲突，单看这里你不知道hover和abc是不是两个类。

总之如果此时又有同名的全局，比如abc样式，hover样式，那么也会一股脑全用上， 当然, div.hover.abc会有优先权。

没搞明白也没关系，基本不要这么用就行了

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 伪类

伪类专门用来表示元素的一种特殊状态 :focus 出现光标的状态 :active 超链接点击的状态 :hover 移入的状态 :first-letter 修饰标

小咪咪/ 2023年06月06日 03:51/ 0 赞/ 34 阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 57 阅读

相关【CSS】CSS 伪类和伪元素

目录 1. 什么是伪类和伪元素？ 1.1 伪类 1.2 伪元素 2. 伪

红太狼/ 2023年02月15日 15:54/ 0 赞/ 89 阅读

相关 CSS的伪类和伪元素

定义伪类: CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

电玩女神/ 2023年01月08日 14:29/ 0 赞/ 190 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 213 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 274 阅读

相关 CSS类,ID,标签和伪类详细说明

CSS有4种定义方式： 1、类：名称前面是一个点，需要注意的是类实际上是属性，点前面如果没有其它内容，则默认是全局的，有的话，是专门那个对象的 2、I

Myth丶恋晨/ 2022年08月06日 02:24/ 0 赞/ 250 阅读

相关 css伪类和伪元素的区别

原文链接：[http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-el

女爷i/ 2022年07月30日 19:51/ 0 赞/ 305 阅读

相关 css伪类

CSS3新增伪类举例： p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 p:last-o

小灰灰/ 2022年07月15日 08:26/ 0 赞/ 272 阅读

相关 Css伪类

开发工具与关键技术：DW与css 作者：戴怡斌撰写时间：2019年2月17日下面我们来看一个css伪类的列子，图1是它的布局

比眉伴天荒/ 2022年03月17日 01:05/ 0 赞/ 351 阅读