【温故知新】CSS学习笔记（选择器）

选择器（选择符）

目的是选择目标元素（选择标签用）。
这里我们介绍四种基础选择器。

1、标签选择器

之前的例子都属于标签选择器，可以把某一类的标签全部选择出来；

2、类选择器

上面点声明，下面class调用就可以了；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.red {color: red;}</style>
</head>
<body><div class="red">多类名</div><div>多类名</div><div>多类名</div><div>多类名</div> <p class="red">段落多类名</p><p>段落多类名</p><p>段落多类名</p><p class="red">段落多类名</p><div>多类名</div>
</body>
</html>

类选择器里面还有一种情况是多类名选择器。
一个标签里面只能有一个class属性，不可以插入多个class。
各个类名之间用空格来分隔。
类名顺序颠倒也没有影响。
样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序影响（若存在样式冲突）。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.red {color: red;}.font20 {font-size: 20px;color: blue;}</style>
</head>
<body><div class="red font20">多类名</div><div>多类名</div><div>多类名</div><div>多类名</div> <p class="red">段落多类名</p><p>段落多类名</p><p>段落多类名</p><p class="red">段落多类名</p><div>多类名</div>
</body>
</html>

3、ID选择器
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器好比人的名字，是可以多次重复使用的，但是id选择器好比人的身份证号码，是唯一的，不允许重复使用。
两者最大的区别在于使用的次数上面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#last {color: pink;}</style>
</head>
<body><div>id选择器</div><div>id选择器</div><div>id选择器</div><div id="last">id选择器</div>
</body>
</html>

4、通配符选择器
通配符选择器用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素。
在实际开发里面基本用不到该类选择器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {color: deeppink;}</style>
</head>
<body><div>通配符选择器</div><div>通配符选择器</div><p>通配符选择器</p><span>通配符选择器</span>
</body>
</html>

【温故知新】CSS学习笔记（选择器）相关推荐

CSS学习笔记----选择器与字体（字系）
部分来自456bereastreet an overview of the syntax for all CSS 2.1 selectors (based on the table in CSS 2. ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...

【温故知新】CSS学习笔记（选择器）

选择器（选择符）

【温故知新】CSS学习笔记（选择器）相关推荐

最新文章

热门文章