CSS的选择器分为基础选择器以及复合选择器
本日将先说明基础选择器 DAY6将继续说明复合选择器
CSS中的基础选择器
单个选择器组成,包含标签选择器、类选择器、id选择器、通配符选择器
标签选择器
是指用HTML标签名称作为选择器
按照标签名称分类,为页面中某一类标签指定统一的CSS样式
标签名{
属性1 : 属性值1;
属性1 : 属性值1;
...
}
主要功用 : 把某一类标签全部选择出来,像是所有的<div>
标签和所有的<span>
标签
优点 : 能快速为页面中同类型的标签统一设置样式
缺点 : 不能设计差异化的样式,只能选择全部的同类标签
类选择器
若要单独选一个或某几个标签,可以使用类选择器
HTML元素以class属性来设置类选择器,CSS中类选择器以"."来定义
<style>
.example{ //套用HTML标签中的example类别
color : red; //把内容文字修改成颜色
}
</style>
<body>
<div class=example>
这是类选择器的范例
</div>
</body>
备注:
1.可以理解为给HTML内标签起了名子来表示 (class=想要添加的命名)
2.不可使用纯数字或中文命名,一般都使用英文字母做命名
3.命名尽量有意义,也方便操作使用
多类名
给一个标签指定多个类名来达到更多的操作目的
简单理解就是一个标签有多个名子
<div class=" red fong">多类名册是 此处的div有red跟fong两种类名</div>
备注:
多类名的使用场景:
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义
/*
ex:将id为nav元素中的内容设置为红色
*/
CSS语法:
#nav{
color: red;
}
HTML语法:
<div id=nav>
id选择器内容
</div>
id选择器和类选择器的区别
通配符选择器
通配符选择器使用"*"定义,表示选取页面中的所有元素(标签)
*{
margin: 0;
padding: 0;
}
备注 :
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,EX : 清除所有元素标签的内外边距)
今天要介绍的是grid()方法,这个方法就像表格式排版,控件是依据指定的索引位置, 放入表格中,很适...
今天终於可以开始来学习程序了,在这之前有一些程序语言的基本常识要知道: 基本观念 程序的执行: 程序...
undefined 与 not defined 虽然在字面上的意思,都是未定义、还未定义的意思,但两...
唯心又看了诗忆之前写的几个高阶函式练习。「嗯⋯⋯我觉得你与其说是对高阶函式不熟,不如说是对匿名函式不...
记得在KiKi吃到苍蝇头,让不爱吃韭菜的我也是搭着白饭一口接一口,而且苍蝇头做法简单材料单纯,只要韭...