css基础之各类选择器

153 阅读3分钟

1.通配符选择器

通配符选择器常用  ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 经常用来设置这个页面的上边距等等

*{
    //要修改的样式
}

2.标签选择器

标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。 顾名思义就是标签的选择器例如<a>标签和<p>标签<h>标签

a{
 //要修改的样式
}

p{
 //要修改的样式
}

h1{
 //要修改的样式
}

3.类选择器

在html中我们可以给各个元素起一个类名,而可以有多个元素是一个类。而类选择器就是为了使不同的元素同一类适应相应的样式。

<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
.box{
//要修改的样式 三个块一起修改
}

类选择器提高

一个元素可以有多个类 用空格隔开 相应的对应的样式代码也得到简洁

<p class="red big">red big</p>
<p class="red bold">red bold</p
<p class="big bold">big bold</p
.red{
    color:red;
}
.big{
    font-size:30px;
}
.bold{
    font-weight:bold;
}

4.id选择器

和类选择器差不多 但是id只能有一个

<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
.box1{
//要修改的样式 一个一个修改
}
.box2{
//要修改的样式 一个一个修改
}
.box3{
//要修改的样式 一个一个修改
}

5.后代选择器

在我们的html文档里可能会出现嵌套的情况 那么内部嵌套的就是外部的后代 那么这种情况下我们不可能把每个后代都去单独起名起类去设置相应的样式 这个时候就需要我们的后代选择器

定义后代选择器时,外层的元素写在前面,内层的元素写在后面,中间用空格分隔。后代选择器会影响到它的各级后代,没有层级限制。

<div>
<a></a>
<p>
    <a></a>
</p>
</div>
div a{
    //要修改的样式 两个不同层级的a标签都被修改
}

6.子代选择器

子代选择器顾名思义只对嵌套的子代生效而多重嵌套孙子代是不会生效的

<div id="ChooseSon">
<a class="son"></a>
<a class="son"></a>
<p>
    <a class="grand"></a>
</p>
</div>
#son>a{
    //要修改的样式 只修改son类的a标签而grand类的a标签 样式是不生效的
    
}

7.组合选择器

组合选择器就是在一条css语句中同时生效多个或多类对象 不同对象之间用 逗号, 隔开即可

<a>绿的</a>
<p>绿的</p>
p,a{
    color:green; //这样用一个语句就可以将<a><p>标签同时增加样式
}

8.伪类选择器

当一个<a>标签加上锚点的时候,他是一个正常的颜色,而当我们点击他之后,它变成了一种蓝紫色(被点击过的颜色),但是呢我们重新打开他还是这个颜色并没有变回去,这是因为他已经存储在浏览器里了,我们可以清楚浏览器缓存数据来使<a>标签变回原样,而这里我们同样也可以使用伪类选择器来改变他的效果。!!!

<a href="#">伪类选择器</a>

a{
    color:green; //其实这里隐藏了一个伪类 相当于  a:link  表示没有被访问的颜色
}
a:visited{
    color:red; // 表示被访问后的颜色 当我们点击<a>标签后就变成了红色
}

伪类选择器主要用于鼠标悬浮产生不同样式等。

a:hover{
    color:blue; //当我们鼠标悬浮到<a>标签的时候就变成了蓝色
}

还有鼠标按住不松开的情况下的样式

a:active{
    color:purple; //当我们鼠标按住<a>标签的时候就变成了紫色
}