css 四大选择器

首先,创建一个页面,输入如下内容:

暂时没有写任何的样式,所以打开后,只是普通的文字

现在开始讲解选择器,选择器一般分为,元素选择器、类选择器、id 选择器、内联选择器,先开始理解前三种;在 head 中创建一个 style 并在之中写元素选择器的表达方式,例如咱要操作 div 的元素,那么元素选择器就是 div ,写法则是 div {样式内容}如图:

此时会发现所有的div元素都出现了一个间距,
在浏览器中按 F12（谷歌浏览器 chrome）,会弹出如下窗口

鼠标分别点击箭头所标示的内容,会发现 div 元素的高度都发生了改变,并且是 100 个像素的单位

下面给类选择器赋值,给一个背景颜色为黄色,那么会发现 2 个带有class这个标识的div的背景都变成了黄色.其中类选择器的名称可以自定义的,命名规则为(.类选择器名称),注意要加这个点号例如. div,.div2 , d1 等(注意不能用特殊字符开头)

之后分别给id选择器赋值,一个红色的外边框和一个黑色的外边框,id选择器在 style 样式中的命名规则为(#ID选择器名称,id选择器的命名是唯一的,不能有 2 个元素有相同的id,虽然可以看出样式效果,但是不符合 ECMA 命名规范,而且不利于未来的操作与学习),如图:

会发现2个带有id的选择器分别有了红色和黑色的实心外边框 1px表示一个像素, solid 表示实心边框 red 和 black 表示颜色.
接下来解析内联样式选择器,直接在元素里命名(直接在 div 中进行命名)
命名规则如图:

按照权重(优先级)来说,内联样式选择器 > id选择器 > 类选择器 > 元素选择器,