回顾

有三种插入样式表的方法：

外部 CSS

<!--外部样式link,还有一种@import url=""-->
<link rel="stylesheet" href="css/style.css">

内部 CSS

<!--内部样式--><style>h2{color: green;}</style>

行内 CSS

<!--行内样式：在标签元素中，编写一个style属性，填写样式即可-->
<p style="text-align: center; color: red">xxxx</p>

基本选择器

什么是选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

作用

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

种类

我们将css选择器简单分为四类：

基本选择器
层次选择器
伪类选择器
属性选择器

而我们这一章就是来了解这第一种也是比较常见，重要的选择器：基本选择器！
基本选择器又分为三种方式：

标签选择器
id选择器
类选择器

示例

为了方便我直接使用了内部样式！
话不多说上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器</title><!--标签选择器,选择一类标签--><style>h1{color: red;background: green;border-radius: 5em;padding: 1em;}p{color: blue;background: red;border-radius: 50px;position: absolute;}</style><!--类选择器，选择所有class属性一致的标签，可以跨标签--><style>.zxs{color: red;}.zxs2{color: blue;}</style><!--id选择器id必须保证全局唯一,最好不要数字开头#id名称{}--><style>#zxs520{color: hotpink;}#zxs52{color: deeppink;}</style>
</head>
<body>
<h1>学习Java</h1>
<h2 class="zxs">学习Java</h2>
<h2 class="zxs2">学习Java</h2>
<h3 id="zxs520">标题3</h3>
<h4 id="zxs52">标题4</h4>
<p>听狂神讲解的</p>
</body>
</html>

测试效果

小结

优先级：不遵循就近原则，固定的
id选择器>class选择器>标签选择器
id必须保证全局唯一,最好不要数字开头

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

CSS学习03之基本选择器相关推荐

CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...
CSS学习04之层次选择器
回顾什么是选择器在 CSS 中,选择器是选取需设置样式的元素的模式. 选择器的作用 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 方便我们对元素添加样式. ...
CSS学习笔记3：选择器及优先级
CSS选择器的类型: 标签选择器类选择器 ID选择器全局选择器群组选择器后代选择器 1.标签选择器: 以HTML的标签作为选择器,凡是选择了一个标签,那么所有这个标签的内容都是用了css样式 ...
css学习06：id选择器
id选择器可以为标有特定id的HTML元素指定特有的样式 HTML元素以id属性来设置id选择器,css中id选择器以"#"来定义语法: #id名 { 属性1:属 ...
前端小白的css学习笔记——简介、选择器、字体属性和文本属性（最后有思维导图哦）
简介 css是层叠样式表的(Casading Style Sheets)的简称.有时会成为css样式表或级联样式表.用来美化HTML,让网页更漂亮,布局更简单.使结构(HTML)和样式(css)相 ...
CSS学习之多类别选择器
转载于:https://www.cnblogs.com/JAVA-STUDYER/p/8440617.html
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习小记1（Dreamweaver CC 创建选择器）
创建CSS 选择器第一种方式: 首先以"标准"窗口为准. 1.光标在HTML中选取需要定义的目标标签,该内容上方出现标签名称和+. 2.点击+,出现输入框,输入选择器名称,英文字 ...
前端学习笔记：CSS学习之选择器篇
一.初识选择器 1.语法: 选择器{/* 注意添加";" */样式; } exp: body {font-size: 12px;color: red;} 二.标签选择器标签选择器 ...

CSS学习03之基本选择器

回顾

基本选择器

示例

测试效果

小结

作者有话说

CSS学习03之基本选择器相关推荐

最新文章

热门文章