开心小窝

一个记录日常学习且神奇的地方

CSS选择器(一)

选择器

选择器顾名思义就是告诉浏览器被选中为应用规则中的CSS属性值的方式,选择器所选中的元素叫做 '选择器的对象'。

元素选择器

我们选中h1和p元素的字体颜色设置为红色

h1{
    color:red;
}
p{
    color:red;
}

这样写感觉有点多了那我们便可以用选择器列表

将多个含有共同属性的选择器对象用 ‘,’将他们分割变组成了选择器列表

h1, p{
    color:red;
}

当你使用选择器列表时,如果任何一个选择器无效 (存在语法错误),那么整条规则都会被忽略

下面是一个错误的示范

h1, ..p{
    color:red;
}

类选择器

如果需要选中特定的类(class)元素 开头用 '.'(英文的一个点) 然后加下类名

我们通过声明一个类(item) 那么“我是一个演示的类选择器”的字体颜色会变成红色

注意:类名不要以数字开头

.item{
    color:red;
}

我是一个演示的类选择器

html中可以引用多个类(类不是唯一的)

下面我们声明了两个类 red和fontSize 则div同时引用了这两个,那么“引用多个类的测试” 字体颜色变成红色,字体大小变成16px(像素)

.red{
    color:red;
}
.fontWeight{
    font-weight: bold;
}

引用多个类的测试

id选择器

id选择器是使用html元素中的id属性来选择元素的,id在页面中有且只有一个(唯一),如果选中一个特定的id元素 开头用 '#'(井号) 然后加上该id值

下面我们声明了一个100px*100px背景颜色为红色的矩形

#item{
    width:100px;
    height:100px;
    background-color:red;
}

标签属性选择器

这是根据一个元素上某个标签的属性值是否存在来选择的

下面我们只是选中了href="www.kaixin.red"这个元素并将它的字体颜色设置成红色

a[href="//www.kaixin.red"]{
    color:red;
}