CSS学习二之CSS基本选择器

           博主也是边学习边记录学习过程,怀着一颗前端大牛的心学习,上一篇说的是css的引入方式,这一篇来说css的选择器,css选择器比较多,所以博主也不是全部都学,主要说其中几个常用的,这里博主把在网上总结到的选择器画成一张图表,简单明了。

         

 这篇文章主要就说基本选择器

一、基本选择器的语法

1,基本选择器语法


选择器 类型 功能描述
*  通配选择器  选择文档中所以HTML元素
E  元素选择器 选择指定类型的HTML元素
#id  ID选择器 选择指定ID属性值为“id”的任意类型元素
.class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素
selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并
写法主要如下 

通配选择器顾明思义就是通用的,通用选择器用*来表示。例如:,如下这样就是引用这个css的html文件所有标签背景色为蓝色,宽30个元素,高20个元素         

*{
    background: blue;
    width: 30px;
    height: 20px;
}

表示所有div标签后代的所有元素都应用这个样式:

div *{
    background: blue;
    width: 30px;
    height: 20px;
}

        标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能处于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,这在后期维护中,如果想改变整个网站中p标签背景的颜色,只需要修改某个属性就可以了,就这么容易!

div{
    background: blue;
    width: 30px;
    height: 20px;
}
         ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”demo”,那么在同一页面你就不能再将其他元素id取名为”demo”了。尽管你会发现即便你把几个元素都命名成相同的id名字,css选择器还是会把这些元素都选中应用样式(如class选择器那样),对于css选择器,id属性的唯一性似乎不存在。然而,对于js而言,它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯,同一个id不要在页面中出现第二次。前面以”#”号来标志,在样式里面可以这样定义:

<div  id="demo"></div>
#demo{
    background: blue;
    width: 30px;
    height: 20px;
}

类选择器根据类名来选择,前面以”.”来标志,

.demo1{
    background: blue;
    width: 30px;
    height: 20px;
}

 在HTML中,元素可以定义一个class的属性。div标签使用名为demo1的css属性

<div class="demo1"></div>

        群组选择器当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。如:

div,p,ul,a{
    background: blue;
    width: 30px;
    height: 20px;
}

上面这些是使用比较多的基本选择器使用方法。

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值