2022-8-23 第七小组学习日记 (day47)CSS选择器

面向没有对象的程序猿

已于 2022-10-22 13:11:51 修改

阅读量136

点赞数

分类专栏： Web前端文章标签： css 学习 html

于 2022-08-24 16:21:04 首次发布

本文链接：https://blog.csdn.net/weixin_56982770/article/details/126506902

版权

Web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS选择器：
一.标签选择器：

标签选择器也称为类型选择器，她直接使用元素的标签名当做选择器，将选择页面上所有该种标签。

语法：

标签名｛

属性：属性值；

.......

｝

作用：标签选择器可以吧某一种标签全部选择出来，比如所以的<div>标签和所有的<span>标签

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

二.通配符选择器：

在CSS中，通配符选择器使用“ * ”定义，它表示选取页面中所有元素

语法：

* ｛

属性：属性值

｝

三.类选择器

类名为HTML元素的class属性值，大多数HTML元素都可以定义class属性

语法：

. 类名｛

属性：属性值

｝

优点：可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，

可以实现为不同类型的标记指定相同的样式

四.id选择器

id选择器使用“ # ”进行标识，后面紧跟id名

语法：

# id名｛

属性：属性值

｝

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素

五.属性选择器

属性选择器可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性

语法：

[标签名称]｛

属性：属性值

｝

六.并集选择器

并集选择器是同时匹配多个选择器，取多个选择器的并集，选择器之间用逗号隔开

语法：

标签名称1，标签名称2 ｛

属性：属性值

｝

七.后代选择器

后代选择器也叫包含选择器，用来选择特定元素的后代

语法：

div p { color: red; }

八.子代选择器

子代选择器使用“ > ”表示，表示匹配第二个选择器，且为第一个选择器的元素的后代

语法：

标签名称1>标签名称2 ｛

属性：属性值

｝

注意：

1.只会查找子代

2.子元素选择器可以用其他的id和class选择器来进行查找

3.子元素选择器也可以通过“ > ”符号一直延续下去

九.伪类选择器

CSS提供了五种基本伪类选择器，分别对应HTML标记的五种状态。

伪类选择器	作用	应用对象
:hover	定义标记在鼠标悬停(划过)时的样式	所有显示标记
:link	定义标记在超链接状态下的样式	a标签
:focus	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
:visited	定义标记被访问过后的样式	a标签
:active	定义标记在选定时刻下的样式	a标签