CSS选择器,看这一篇就够了!

    科技2023-10-02  98

    CSS入门

    CSS样式规则

    在使用HTML时,需要遵从一定的规范,CSS亦是如此。要想熟练地使用CSS对网页进行"打扮",首先需要了解CSS的样式规则,也就是最基础的语法格式。

    基本格式如下:

    选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ······ }

    在基本格式中,选择器用于指定CSS样式作用的HTML对象,大括号内是对该对象设置的具体样式。属性和属性值以"键值对"的形式出现,属性是对指定的对象设置的样式属性,如字体大小、文本颜色等等。键值对之间用英文:连接,多个键值对之间用英文;进行区分。

    引入CSS样式表

    如果想用CSS来打扮我们的网页,就需要在HTML文档中引入CSS样式表。引入样式表的常用方法有三种:

    行内式内嵌式链入式
    行内式

    行内式也成为内联样式,是通过标记的style属性来设置元素的样式,其基本语法格式如下:

    <标记名 style="属性1:属性值1; 属性2:属性值2;·······">内容</标记名>

    其中style是标记的属性,在HTML中任何标记都拥有style属性,它被用来设置行内式,其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标记及嵌套在其中的子标记起作用。

    如下简单实例所示:

    ··· <h2 style="font-size:20px;color:green;"> 这个二级标题的字体大小为20像素,颜色为绿色。 </h2> ···
    内嵌式

    内嵌式是将CSS代码集中写在HTML文档的头部标记中,并且用<style>标记定义,其基本语法格式如下:

    <head> <style type="text/css"> 选择器{ 属性1:属性值1; 属性2:属性值2; ······ } </style> </head>

    该语法中,<style>标记一般位于<head>标记中的<title>标记之后,其实也可以把它放在HTML文档的任何地方,但是由于浏览器是从上到下解析代码的,把CSS代码放在头部便于提前被下载和解析,以避免网页内容下载后没有样式修饰带来的尴尬。同时必须设置type的属性值为"text/css",这样浏览器才知道<style>标记包含的是CSS代码,因为<style>标记还可以包含其他代码,如JavaScript代码。

    链入式

    链入式是将所有的样式放在一个或者多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中,链接基本语法格式如下:

    <head> <link href="文件路径" type="text/css" rel="stylesheet" /> </head>

    该语法中,<link />标记需要放在<head>头部标记中,并且必须指定<link />标记的三个属性,具体如下:

    href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。type:定义所链接文档的类型,在这里需要指定为"text/css",表示链接的外部文件为CSS样式表。ref:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。

    一个简单的CSS外部样式表文件如下:

    h2{ text-align:center; } p{ font-size:16px; color:green; text-decoration:underline; }

    CSS基础选择器

    要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。在CSS中的基础选择器有标记选择器、类选择器、id选择器、通配符选择器、标签指定式选择器、后代选择器和并集选择器,对它们具体的解释如下:

    标记选择器

    标记选择器是直接使用HTML标记名称作为选择器,它按照标记名称进行分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式为:

    标记名{ 属性1:属性值1; 属性2:属性值2; ······ }

    该语法中,所有的HTML标记名都可以作为标记选择器,如body、p、strong等等。用标记选择器指定的CSS样式对该页面中所有该类型的标记都生效。

    例如:

    p{ font-size:12px; color:#FFF; }

    上述代码使得页面中的所有p标记段落字体大小为12像素,颜色为白色。

    类选择器

    类选择器使用"."(英文点号)进行标识,后面紧跟类名,其基本语法格式为:

    .类名{ 属性1:属性值1; 属性2:属性值2; ······ }

    该语法中,类名即为HTML元素的class属性的值,大多数HTML元素都可以定义class属性。类选择器的优势是可以为元素对象定义单独或相同的样式。

    例如:

    .red{ color:red; } .green{ color:green; } .font20{ font-size:20px; }

    上述代码可以使得页面中所有class属性为red的标记设置其文本颜色为红色,class属性为green的标记设置其文本颜色为绿色,class属性为font22的标记设置其字体大小为20个像素。

    id选择器

    id选择器和类选择器相似,只不过是用#进行标识,其后紧跟id名,其基本语法格式如下:

    #id名{ 属性1:属性值1; 属性2:属性值2; ······ }

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

    通配符选择器

    通配符选择器用*号表示,它是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式为:

    *{ 属性1:属性值1; 属性2:属性值2; ······ }

    例如下面的代码,使用通配符选择定义CSS样式,清除所有的HTML标记的默认边距:

    *{ margin:0; /*定义外边距*/ padding:0; /*定义内边距*/ }

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

    标签指定式选择器

    标签指定式选择器又称为交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如h3.special或p#one。

    例如:

    p.special{ color:red; }

    上述代码对标签为<p>并且class属性为special的文本生效。

    后代选择器

    后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。

    例如:

    p strong{ color:red; } strong{ color:green; }

    对应的HTML文档如下:

    ······ <p> goldsunC <strong> 嵌套的内容 </strong> </p> <strong> 单独的内容 </strong> ······

    如上代码,goldsunC的颜色为默认颜色,嵌套的内容颜色为红色,单独的内容颜色为绿色。

    并集选择器

    并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(如标记选择器、类选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器进行整合。

    例如在页面中如果有一个h2标题、一个h3标题和一个段落,他们的字号和颜色相同。而段落的文本具有下划线效果,实现如下:

    h2,h3,p{ color:red; font-size:15px; } p{ text-decoration:underline; }

    使用并集选择器可以使得CSS代码更加简洁、直观。

    Processed: 0.010, SQL: 8