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 : 清除所有元素标签的内外边距)
大家午安~ 就以先前我们於 AWS 建置个人的 WordPress 网站举例(如下图所示),若要访问...
渐变transition 这边就像写css一样,只是要渐变的东西包在transition里面,并到c...
Hello 大家, 上周我回南部, 家里的人想说我难得回家就临时的规划了家族旅游, 一口气冲到东部,...
终於完赛了!最近跑去画画,附上一幅《小王子与小狐狸》,小王子里面,最喜欢的就是他们的故事,是说画画...
前言: 今天来看一下TensorFlow Lite 功能与特色 和开发流程 大纲 : TensorF...