CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器.....),你知道多少?

您所在的位置:网站首页 标签分类有哪些类别 CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器.....),你知道多少?

CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器.....),你知道多少?

2024-07-10 04:23| 来源: 网络整理| 查看: 265

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属性。

例子

1 2 3 4 5 类选择器 6 7 .red{color: red;} 8 .green{color:green;} 9 .font22{font-size:22px;} 10 p{ text-decoration:underline; font- family:"微软雅黑"; } 11 12 13 14 二级标题文本 15

段落文本内容

16

段落二文本内容

17

段落三文本内容

18 19

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

标记。

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

四、id选择器

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

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

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

例子

1 2 3 4


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3