CSS选择器

本文记录WEB前端学习过程中遇到的CSS选择器~

要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器,常见的选择器有3种,还有另外2种作为扩展,共5种:

1.元素选择器

元素选择器是指用HTML格式名称作为选择器,按标记名称分类,为页面中某一类标记指定统一的CSS样式。其基本语法格式如下:

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

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

示例代码:

h1{
    color: #F00;
    font-size: 50px;
}

<h1>Oliver's Blog</h1>

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

2.ID选择器

ID选择器使用“#”进行标识,后面紧跟ID名,其基本语法格式为:

#ID名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

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

示例代码:

#code{
    color: #0F0;
}
<h1 id="code">Oliver's Blog</h1>

3.类选择器

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

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

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

示例代码:

.codeClass{
    font-size: 25px;
}
<h1 class="codeClass">Oliver's Blog</h1>

类选择器的高级用法:给指定的标签设置class样式,语法为:

标签.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

4.属性选择器

属性选择器,在标签后面使用中括号标记,其基本语法格式如下:

标签名[标签属性=‘标签属性值’]{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器,是对“元素选择器”的扩展,对一组标签进一步过滤。

示例代码:

<style>
    input[type="text"]{
        background-color: yellow;
    }

    input[type="password"]{
        background-color: green;
    }
</style>

5.包含选择器

包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式,使用格式为:

父标签 后代标签{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

该选择器,是对“元素选择器”的扩展,对一个标签内部所有后代标签进行过滤。

示例代码:

<style>
    #mark01 submark01{
        color: red;
    }
</style>

标签: none