1. CSS选择器类型

css选择器可分为标签选择器、类别选择器、ID选择器，这里的三种类型主要针对内嵌样式和单独文件样式而言

1.1 标签选择器

1.1.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">body{background-color: #ccc;text-align:center;font-size: 12px;}h1{font-style: italic;font-size:20px;}p{color:red;font-size: 16px;}hr{width:200px;}</style>
</head>
<body><h1>标题</h1><hr /><p>正文段落</p>版权所有
</body>
</html>

1.1.2 效果图

标签选择器会作用用该文件的所有同种标签，同种标签需要定义不通过的样式时可通过下列的类型来定义

1.2 类别选择器

1.2.1 定义——点开头

类别类型的选择器在定义的时候，它的名字点开头，后面带有的样式名称，如测试代码中head标签内的“.one”，样式名称可以自行根据含义来进行定义，比如下列代码中把类别1定义成one，类别2定义成two

1.2.2 引用

样式的引用，我们是在对应的要作用的标签之内，采用它的class属性来进行类别样式的引用，给它设置的属性的取值，就是类别样式的名称，而且要注意这个时候要把点去掉，如body标签内p标签class属性的值为”one“

1.2.3 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">p{font-size: 12px;}.one{font-size: 18px}.two{font-size: 24px;}</style>
</head>
<body><p class="one">类别1</p><p class="one">类别1</p><p class="two">类别2</p><p class="two">类别2</p><p>段落中的普通文字</p>
</body>
</html>

1.2.4 效果图

可以看到：

body内引用了类别选择器的的p标签显示出了对应类别的像素大小（图中的类别1和类别2）,

没有引用类别选择器的p标签显示出了标签选择器的像素大小（图中”段落中的普通文字“)

1.3 ID选择器

1.3.1 定义——#开头

ID类型的选择器在定义的时候，除了它的名字以#开头外，其余同类别选择器

1.3.2 引用

ID选择器样式的引用唯一与类别选择器不同是的将类别选择器的class改为id，且每个标签的id属性值唯一

1.3.3 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">#one{font-size: 12px;}#two{font-size: 24px;}</style>
</head>
<body><p id="one">文字1</p><p id="two">文字2</p>
</body>
</html>

1.3.4 效果图

可以看到：文字1引用了名为one的id样式，文字2引用了名为two的id样式

1.3.5 类别选择器和id选择器的区别

ID选择器具有唯一性，它样式被定义出来，它在当前页面的HTML代码里面，要被唯一的引用一次；

而类别类型的祥式，它可以多次被引用，作用于多个网页元素上面。

2. 选择器声明方法

选择器声明方法有嵌套声明、集体声明、全局声明、混合声明

2.1 嵌套声明

比如说当前我们想将段落文字当中的某一部分文字让它采取单独的样式时，可以考虑用嵌套声明的方法

2.1.2 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">p span{color: red;}</style>
</head>
<body><p><span>天使投资</span>是投资方式的一种</p>
</body>
</html>

2.1.3 效果图

p标签空格隔开span标签，它就表示个嵌套的关系，p标签内部的span标签会出现定义的样式

2.2 集体声明集体

集体声明是指多个样式统一声明成一种样式，当然也可以引用类型选择器达到同样效果

2.2.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">h1,p{text-align: center;}</style>
</head>
<body><h1>欢迎访问论坛</h1><p>欢迎访问论坛</p>
</body>
</html>

2.2.2 效果图

p标签空格隔开span标签，它就表示个嵌套的关系，p标签内部的span标签会出现定义的样式

2.3 全局声明

全局声明是指无论是什么样的标签或者什么样的元素，都具有相同的样式

2.3.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style type="text/css">*{text-align: center;}</style>
</head>
<body><h1>欢迎访问论坛</h1><p>欢迎访问论坛</p><h2>欢迎访问论坛</h2>
</body>
</html>

2.3.2 效果图

用一个星号作为样式的名字

2.4 混合声明

无论是类别类型的样式,还是ID类型的样式等等,这些样式我们可以混合的叠加在一起，作用在某个元素上

2.4.1 测试代码


<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css"> .one{font-size:18px;}.two{font-size:24px;}.red{color: red;}.yellow{color: yellow;}.left{text-align: left;}.right{text-align: right;}#my{background-color: #ccc;}</style>
</head>
<body><!-- 多个class选择器混用，用空格分开 --><p class="one red right">这里的文字，18px红色，右对齐</p><div class="one yellow left">这里的文字，18px黄色，左对齐</div><!-- id和class混用 --><div id="my" class="one yellow left" >这里的文字，18px黄色，左对齐，有背景色</div>
</body>
</html>

2.4.2 效果图

Web前端开发——CSS样式之CSS选择器相关推荐

web前端开发工程师之HTML+CSS初级到精通系列课程-陈璇-专题视频课程
web前端开发工程师之HTML+CSS初级到精通系列课程-438人已学习课程介绍本系列课程为HTML5+CSS3基础课程,从HTML结构标签.常用标签及属性.CSS语法.CSS常用 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
web前端开发主要课程，CSS字体样式值，赶紧收藏！
前言基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架再好,无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司. (本篇文章可能只是适用于刚毕业的同学或者 ...
css就近原则_「Web前端开发进阶篇」CSS优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个"规则"就是重点. [引言] 讲解完这篇CSS优先级的文章 ...
【web前端开发】介绍div+css的6个优点
2019独角兽企业重金招聘Python工程师标准>>> 关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来 ...
web前端开发自学课程，CSS标准文档流，超详细
前言又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
Web前端开发：HTML、CSS
一. 前端开发介绍在介绍Web网站工作流程的时候提到,前端开发,主要的职责就是将数据以好看的样式呈现出来,说白了,就是开发网页程序,如下图所示: 1. 网页有哪些部分组成 ? 文字.图片.音频.视 ...
Web前端开发笔记——HTML和CSS
文章目录一.HTML基础笔记 1.基础概念:标签.元素.属性.文件结构 1.1标签 1.2元素 1.3属性 1.4文件结构 2.标签 2.1标题:h1~h6 2.2段落:p 2.3段内换行:br 2 ...
html div套div,Web前端开发技术之Div+Css基础
今天我们的课程内容有: CSS在页面风格设计中的作用多个HTML页面调用一个CSS文件 DIV的创建与应用用DIV+CSS的方式来写HTML页面传统HTML的缺点和现在Css的优势Html的不足 ...
个人主页设计-web前端开发技术（html+css）
基本知识 https://www.w3cschool.cn/ https://www.w3school.com.cn/cssref/css_colors.asp 插入背景图片转自于:https:// ...

Web前端开发——CSS样式之CSS选择器

1. CSS选择器类型

1.1 标签选择器

1.1.1 测试代码

1.1.2 效果图

1.2 类别选择器

1.2.1 定义——点开头

1.2.2 引用

1.2.3 测试代码

1.2.4 效果图

1.3 ID选择器

1.3.1 定义——#开头

1.3.2 引用

1.3.3 测试代码

1.3.4 效果图

1.3.5 类别选择器和id选择器的区别

2. 选择器声明方法

2.1 嵌套声明

2.1.2 测试代码

2.1.3 效果图

2.2 集体声明集体

2.2.1 测试代码

2.2.2 效果图

2.3 全局声明

2.3.1 测试代码

2.3.2 效果图

2.4 混合声明

2.4.1 测试代码

2.4.2 效果图

Web前端开发——CSS样式之CSS选择器相关推荐

最新文章

热门文章