1、元素选择器
别名:标签选择器、标记选择器
特点:通过元素名称作为选择器名称
作用:修改某一元素的默认样式
举例:
body{}
h1{}
h2{}
2、类选择器(类样式)
特点:通过元素的 class 属性来进行引用
作用:可以很方便的修改多个标签的样式
语法:.类名{color:red;bakcground:yellow;}
注意:类名不能以数字开头
举例:
<div class="className"></div>
.className{
color:red;
bakcground:yellow;
}
*注意*:在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开
3、分类选择器
特点:由类选择器衍生出来的新选择器,将类选择器 与 元素选择器 结合使 用
目的:为了更精准的定位的页面的元素
语法:元素选择器.类选择器{}
p.narbar{}
解释:选择了p标签并且类名为narbar的标签。
4、通用选择器
作用 :适配页面上所用的元素,改变他们的样式
语法:*{}
特点:可以选择当前页面的标签。
5、id选择器(id样式)
作用:通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
语法:#id{}
举例:
#top{background-color:red;}
<div id="top"></div>
id的作用:
1、定义元素在页面中的唯一标识
2、引用样式表中的id样式
3、可以存在多个id,但是大家约定俗成。
id就像我们的身份证,是唯一的,这样方便。
4、同时约定俗成的:控制css样式用class(类名),控制js用id
6、群组选择器
特点:选择器声明是以 , 隔开的 选择器列表
作用:定义一组元素的样式
h3,p,.new,#test,div.asd,p.test{}
注意:满足上述的条件的标签,都可以被选中
css选择器,还有很多。但是不怎么经常用。这里只总结了常用的。
点击查看更多内容
12人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦