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

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会有优先权。

转载于:https://www.cnblogs.com/arraystart/p/6003888.html

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

HTML/CSS: 浅谈a标签及伪类选择器
1.基础知识 "超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分." -HTML链接而对于超文本,简单的说便是 ...
常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
css 伪类选择器(链接伪类选择器.结构伪类选择器.目标伪类选择器) 链接伪类选择器:顾名思义就是用于链接的伪类选择器.a的伪类标签有:a:link.a:visited.a:hover.a:activ ...
【a】标签的伪类选择器
今天我们来学习一下a标签的4个伪类选择器: ①a:link选择器:修改从未被访问过的a标签样式. ②a:visited选择器:修改已经被访问过的a标签样式. ③a:active选择器:修改链接被长按时 ...
超链接a标签的伪类选择器问题，Link标签与visited标签的失效问题(问题介绍与解决方法)。以下全部内容跟可通过鼠标左键选取后，复制到编辑器中直接运行。
超链接a标签的伪类选择器问题,Link标签与visited标签的失效问题(问题介绍与解决方法).以下全部内容跟可通过鼠标左键选取后,复制到编辑器中直接运行. 参考文章: (1)超链接a标签的伪类选择器 ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...

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

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

最新文章

热门文章