前言

理解选择器的作用，能够使用基础选择器在HTML中选择元素
标签选择器；类选择器；id选择器；通配符选择器

一、标签选择器

选择器的作用：选择页面中对应的标签，方便后续设置样式（也就是找到标签，并且改标签）
结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类的标签，设置样式
注意点：标签选择器选择的是一类标签，而不是单独某一个；标签选择器无论嵌套关系有多深，都能找到对应的标签
实践：

会发现所有的p标签都变成了红色，这是缺点也是优点
但是如果同种标签中有些字需要换成别的颜色怎么办呢，那么就不能使用标签选择器了

二、类选择器

结构：.类名{css属性名：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
注意点：
1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.类名不能以数字或者中划线开头
3.一个标签可以有很多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
实践：先定义，再用

并且可以使用在不同标签

一个标签也可以有多个类名

标签选择器和类选择器的区别：
标签选择器是把所有该标签的内容都变成某种样式，所有无需定义，直接使用
类选择器是把需要的标签变成想要的样式，所以需要先定义，再使用

三、id选择器

结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
实践：

规定他只能使用一次，因为他的作用不是在css中修饰的，而是为了配合js产生动画效果的，所有最好用类选择器，那么如果用了两次会怎样嘛？

也会变蓝，但是规定上不可使用

类选择器和id选择器的区别：
类选择器可以在多个标签中使用
id选择器只可在一个标签中使用

四、通配符选择器

结构：*{css属性名：属性值；}
作用：找到页面中所有的标签，设置样式
注意点：开发中使用极少，只会在极特殊情况下才会用到；在小页面中可能会用于去除标签默认的margin和padding
实践：

会把所有的文字都变成通配器里的
常用的情况：

用来去除文字中默认的空白区域

总结

最重要的是类选择器，其他都用于特殊场景。

CSS基础-02-基础选择器相关推荐

再读《精通css》02：选择器
2019独角兽企业重金招聘Python工程师标准>>> 1.2 为样式找到目标 1.类型选择器用来选择特定类型的原素.比如p,a,h1等等.也叫元素选择器或简单选择器. 2.后代选择 ...
CSS基础（复合选择器-三大特性）
CSS基础(复合选择器-三大特性) Emmet语法快速生成HTML 如果想快速生成多个标签,直接*n. div*3
第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...
【CSS基础】基础选择器+字体文本相关样式
目录 1.CSS基础选择器 1.1 标签选择器 1.2 类选择器 1.3 id选择器 1.4 通配符选择器 1.5 基础选择器总结 2.CSS字体样式 2.1 字体大小 2.2 字体粗细 2.3 字体 ...
css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式一.CSS层叠样式表学习目标理解 css的目的作用 ...
前端基础02：CSS
学习路线什么是CSS CSS怎么用 (快速入门) CSS选择器 (重点 + 难点) 美化网页 (文字,阴影,超链接,列表,渐变-) 盒子模型浮动定位网页动画 (特效效果) 一.什么是CSS C ...
基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式能力目标 Ø 理解CSS的 ...
week3--CSS基础盒子模型选择器
CSS基础 && 盒子模型 && 选择器今天下午我是V神但是此时此刻 CSS 你是我的神 CSS基础 && 盒子模型 && 选择器 ...
Java/Android基础-02
Java基础-02 概念面向对象编程将某一类事物抽象化,确定如何操作数据然后再考虑如何操作数据.然后再考虑下如何组织数据特点属性: 用来描述对象的数据元素称为对象的属性. 方法: 对象的属性进 ...

CSS基础-02-基础选择器

文章目录

前言

一、标签选择器

二、类选择器

三、id选择器

四、通配符选择器

总结

CSS基础-02-基础选择器相关推荐

最新文章

热门文章