认识7种CSS选择器

396 阅读1分钟

标签选择器

比如要选中网页中所有的 p 标签

图片5.png

图片4.png

图片6.png

id选择器

id 是身份、名字的意思,给一个HTML标签添加一个 id 属性,这个HTML标签就有了唯一的名字,所以同一个网页中不能出现重复的 id

CSS选择器使用 # 来匹配元素的 id

图片7.png

图片8.png

图片9.png

类选择器 class

给HTML标签添加一个 class 属性,让这个HTML标签属于某一个类别

图片10.png

图片11.png

图片12.png

和 id 不同的是 class 是可以重名的,多个HTML标签可以属于同一个类 ↓

图片13.png

图片14.png

一个HTML标签也可以属于多个类,不过要注意书写格式 ↓

图片15.png

后代选择器

现在网页上有两个 div ,里面各有4个 p 标签 ↓

图片15.png

我们想让第二个 div 里面的4个 p 标签文字颜色为红色 ↓

图片16.png

CSS选择器中的 空格 表示 内部的,所以上面的选择器意思就是 .box2 内部的 p 标签

交集选择器

这里有一些标签 ↓

图片17.png

现在想要让所有 class 属性为 text 的 p 标签中的文字颜色为红色 ↓

图片18.png

并集选择器

CSS选择器中的 逗号 表示 和 的意思,所以并集选择器写法如下 ↓

图片19.png

通配符选择器

通配符选择器 * ,表示选择网页上所有的元素

图片20.png