【网页制作】CSS基本选择器讲解（附讲解视频）
1.首先我们要知道什么是选择器？
选择器是通过一定的语法规则选取对应HTML标记，然后给对应的HTML标签设置样式。比如：长度，宽度，颜色等等。
2.选择器类别
选择器一共有四类：
1基本选择器，2复合选择器，3伪类选择器，4属性选择器
下面是我们本节的内容：
3.基本选择器（四种）
（1）通用选择器
格式：*{属性：值；}
注意：使用该选择器会匹配所有的标签，不常用，IE6不支持。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通用选择器</title>
<style type="text/css">
/* 使用嵌入式 */
/* *{属性：值；} */
*{
color:#f02; /* 设置文本为红色 */ /* CSS优先级要高于html的 */
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1>火影忍者</h1>
<ul>
<li>漩涡鸣人</li>
<li>佐助</li>
<li>小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
此处大家可以发现，即使用了html的font 标签设置了文本样式，又采用了CSS的通用选择器设置了样式，最终结果为CSS通用选择器设置的样式，表明通用选择器的优先级较高，优先级我会在后面的文章中介绍。
网页效果：
（2）标签选择器
格式：标签名{属性：值；}
注意：实用型，选择性的修改
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用标签选择器 */
/* 标签名{属性：值；} */h1{
color:#f00; /* 给指定的标签设置样式 */
}
h2{
color:#f00;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1>火影忍者</h1>
<h2>疾风传</h2>
<ul>
<li>漩涡鸣人</li>
<li>佐助</li>
<li>小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（3）类选择器
格式：.class属性值{属性：值；}
注意：class属性值设置可以相同，不同标签可以设置相同的属性值
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用类选择器 */
/* .class{属性：值；} */.h{
color:#f00;
}
/* 先找到h2标签，在找到h标签，进行操作 */
h2.h{
color:#00f;
}.li{
color:#f00;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1 class="h">火影忍者</h1>
<h2 class="h">疾风传</h2>
<ul>
<li class="li">漩涡鸣人</li>
<li>佐助</li>
<li class="h">小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（4）id选择器
格式：#id属性值{属性：值；}
注意：每个ID只能使用一次
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 使用id选择器 */
/* #id的属性值{属性：值；} */#h{
color:#00f;
}
#h1{
color:#20550e;
}
</style>
</head>
<body>
<!-- 通过html设定 -->
<!-- <font color="#00f"> --> <!-- 设置文本为蓝色 -->
<h1 id="h">火影忍者</h1>
<h2 id="h1">疾风传</h2>
<ul>
<li >漩涡鸣人</li>
<li>佐助</li>
<li >小樱</li>
</ul>
<p>电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。</p>
<!-- </font> -->
</body>
</html>
网页效果：
（5）强调
类选择器和id选择器设置的值：
（1）必须是字母或者字母和下划线开头
（2）最好不要用保留字
（3）不能出现除了下划线或连字符以为的符号
比如：id=“123”就是错误的。
本期讲解到此结束，大家如果有不懂的地方可以私信，只要有时间一定回复哦。
如果文字过于枯燥，不懂还可以观看的视频，进一步加深理解哦。
博主的哔哩哔哩账号：一枫阳光，感兴趣的可以关注一下哦。定期更新CSS代码学习。萌新UP主大家一起进步呀。讲解若有不对，一定第一时间修改，谢谢大家啦。
网页制作—CSS选择器讲解_哔哩哔哩_bilibili今天给大家讲解一下CSS的选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1eL4y1M7Qk?spm_id_from=333.999.0.0网页制作—CSS选择器2（标签选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1U34y1t7UV?spm_id_from=333.999.0.0
【网页制作】—CSS选择器3（类选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的类选择器，通过选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1DY4y1i7EB?spm_id_from=333.999.0.0【网页制作】—CSS选择器4（id选择器）_哔哩哔哩_bilibili今天给大家讲解一下CSS的id选择器，通过id选择器大家可以很方便的给HTML的内容进行修饰和排版等操作。视频中如有不对的地方，大家可以私信告诉我。一起学习进步。
https://www.bilibili.com/video/BV1zu411q7Yr?spm_id_from=333.999.0.0
【网页制作】CSS基本选择器讲解（附讲解视频）相关推荐
- cursor css(鼠标悬浮禁用) 网页制作CSS中的光标类型
Cursor是网页制作CSS中的光标类型,与图标文件Icon一样,是特殊类型的小位图. 语法: cursor :auto|all-scroll|col-resize|crosshair|default ...
- 网页制作 css样式,网页设计与制作-CSS样式.ppt
网页设计与制作-CSS样式 第四章CSS样式 4．1 CSS样式的定义和使用 4.1.1什么是CSS CSS(Cascading Style Sheet,层叠样式表)是一种格式化网页的标准方式,它扩展 ...
- 【Web网页制作】影视主题网页制作web页面开发（附源码）
[写在前面] 其实之前我就写过一篇关于我的家乡的页面,也有不少网友和我私下反馈,让我多出一些关于页面制作的,于是乎我就今天晚上抽出点时间来整理一篇关于影视内容的web页面制作,希望能够得到大家的喜欢. ...
- 查询表格html页面模板,网页制作css中表格模板
请大哥大姐帮我做个150×150的htlm表格代码 每行做4个做4行 跪谢哥哥姐姐html做个表格的步骤如下: 首先新建一个html,点击中间,先填入表格内容: 内容根据需CSS布局HTML小编今天和 ...
- HTML网页制作css美化
1.css概述(美化网页) CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. 定义:选择器名{ 属性名:属性值: 属性名:属性值: ,,, } 注:1.声明需 ...
- html网页制作.css属性,网页设计中的CSS样式
一.CSS能做什么 CSS用于增强或控制网页样式,并允许将样式信息与网页内容分离.引用样式表的目的是将"网页结构代码"和"网页样式风格代码"分离开,从而使网页设 ...
- web课程设计，网页制作，守望先锋主题
期末作业要求制作八个页面,初学只会做些垃圾,只能去模仿一下网上的,这次就照着守望先锋的官网进行制作,如图, 导航页面 首页 内容不多,还有一些内容没截图进来.内容上就html,css,js,js只涉及 ...
- HTML文件均以()标记符开始,助理电子商务师教程网页制作
助理电子商务师教程网页制作 助理电子商务师教程,国家职业资格三级,第一章网页制作,第一节 HTML语言 一.页面布局 二.文字与表格 第二节 动态网页制作 一.编辑图像 二.视频与音频,第一节 HTM ...
- 【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
最新文章
- python怎么判断一个文件是否存在-python判断文件是否存在
- Ardino基础教程 8_模拟值
- 数据库：数据库水平切分？垂直切分？整合方案？可能存在的问题？
- kibana操作elasticsearch：查看映射关系
- boost::mpl模块实现pair_view相关的测试程序
- BZOJ 1047: [HAOI2007]理想的正方形 单调队列瞎搞
- OpenCV rectangle
- Android获取所有应用的资源id和对应的uri
- 12-sed命令详解
- oracle c6,redhat6.8系统下安装oracle数据库
- Mocha BSM产品亮点——如何去干扰事件
- 缓存-问题：缓存穿透 缓存雪崩 缓存击穿
- 2018 CCPC 桂林站（upc复现赛）总结
- 【小项目】STM32环境监测 | MQ2可燃气体传感器+雨滴传感器+DHT11温湿度传感器+OLED屏幕
- 番茄时间管理法(Pomodoro Technique)
- 史上最全的画册制作流程—设计前的策划
- 鼠标右键菜单没有 新建 - 解决办法
- Windows本地域名转接
- 简单三招，教你做个app
- 用C语言给自己的奖状