CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器属性选择器

最新推荐文章于 2024-05-12 21:28:34 发布

踏雪寻鹭

最新推荐文章于 2024-05-12 21:28:34 发布

阅读量2k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_73143398/article/details/126592211

版权

CSS常用选择器
CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！

一、通配符选择器

通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

例子
使用该选择器定义样式，清除所有HTML标记的默认边距。

*{
margin：0；       /*定义外边距*/
padding：0；     /*定义内边距*/
}

但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。

二、标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子
使用p选择器定义HTML页面中所有段落的样式。

p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

三、类选择器

类选择器使用**‘.’**(英文点号)进行标识，后面紧跟类名。

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

该语法中，类名即为HTML元素的class属性值，大多数HTML元素都可以定义class属性。

例子

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>类选择器</title>
 <style type="text/css">
  .red{color: red;}
  .green{color:green;}
  .font22{font-size:22px;}
 p{ text-decoration:underline; font- family:"微软雅黑"; }
 </style>
 </head>
 <body>
<h2 class="red">二级标题文本</h2>
 <p class-"green font22">段落文本内容</p>
<p class="red font22">段落二文本内容</p>
 <p>段落三文本内容</p>
 </body>
 </html>

类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。同时，一个HTML元素也可以应用多个class类，设置多个样式，此时多个类名之间需要用空格隔开，如上述代码中的前两个<p>标记。

注意：类名的第一个字符不能使用数字，并且严格区分大小写。一般采用小写的英文字符。

四、id选择器

id选择器使用**‘#’**进行标识，后面紧跟id名。

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

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

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>

注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

五、属性选择器

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

语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}

注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

CSS 选择器参考手册：
选择器   描述
[attribute]   用于选取带有指定属性的元素
[attribute=value]   用于选取带有指定属性和值的元素
[attribute~=value]   用于选取属性值中包含指定词汇的元素
[attributeI=value]   用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]   匹配属性值以指定值开头的每个元素
[attribute$=value]   匹配属性值以指定值结尾的每个元素
[attribute*=value]   匹配属性值中包含指定值的每个元素
1、为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

2、为 title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

3、为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

4、为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

今天分享就到这里谢谢

踏雪寻鹭

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器属性选择器

类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。但实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。......
复制链接

扫一扫