端午小长假--前端基础学起来04CSS选择器
定义：
选择器{
样式；
}
选择器指明{}中的样式的作用对象，即作用于网页中的哪些元素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>
</head>
<body>
<p>慕课网（IMOOC）是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性，并且你可以和朋友一起编程。</p>
</body>
- 标签选择器：<html><body><h1><p><img>
- 类选择器
语法：.类选择器名称{css样式代码}；
注：1、英文圆点开头2、起名随意，不可中文
使用：
1、先用标签把要修饰的内容标记起来 如<span>天气晴朗</span>
2、使用class=“类选择器名称”为标签设置一个类，如：<span class="weather">天气晴朗</span>
3、设置类选择器css样式，如下：.stress{color:red;}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.setGreen{
color:green;
}
</style>
</head>
<body>
<p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
- ID选择器
语法：与类选择器的区别有两点：（1）使用id=“ID名称”来设置类（2）前面是#号
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#stress{
color:red;
}
</style>
</head>
<body>
<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，
</body>
类选择器和ID选择器的区别：
（1）ID选择器在一个HTML文档中只能使用一次，而类可以使用多次
<p>今天<span class="stress">天气很好</span>，我们出去<span class="size">放风筝</span></p>
（2）可以使用类选择器为一个元素设置多个样式，ID选择器不可以，只能设置一个样式
.stress{
color:red;
}
.size{
font-size:25px;
}
<p>今天<span class="stress size">天气</span>特别好...</p>
- ♦♦♦子选择器
语法：即>，用于选择指定标签元素的第一代子元素，例子：将class名为first的下的子元素li加入红色实线边框
<head>
<style type="text/css">
.first>li{border:1px solid red;}
</head>
<body>
<ul class="first">我喜欢吃
<li>水果</li>
<li>梨</li>
</ul>
<p class
</body>
- 后代选择器
语法： 空格，用于选择指定标签元素下的后辈元素，没有搞懂和子选择器的区别（视频8-7）
- 通用选择器
语法：*，匹配html中所有标签元素，*{color:red;}，使用任意html标签的元素字体都将设置为红色
<head>
<style type="text/css">
*{color:red:}
</head>
伪类选择符
语法：允许给html中不存在的标签设置样式，比如给html中一个标签元素的鼠标滑过的状态来设置字体颜色 a:hover{color:red;}
<head>
<style type="text/css">
a:hover{
color:red;
font-size:20px;
}
</head>
<body>
今天天气很好，在阳台上晒<a>太阳</a>
</body>
分组选择符
语法：为多个标签设置同一个样式，分组选择符是逗号，
这节的视频再看看，有点不懂，后几段
端午小长假--前端基础学起来04CSS选择器的更多相关文章
- 端午小长假--前端基础学起来03CSS为网页添加样式
定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体 设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span < ...
- 小甲鱼零基础学python第25讲课后习题动手练习--通讯录
小甲鱼零基础学python第25讲课后习题动手练习---通讯录 **************************通讯录要求******************************* 输入指令: ...
- 前端基础：CSS样式选择器
前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
- 前端基础--css基本语法,选择器
一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...
- 零基础学到什么程度可以找一份web前端工作？
能找到一份前端开发工作,首先你起码得是一个合格的初级前端工程师.那么,什么是初级前端工程师?初级前端工程师都会做些什么?这个问题需要分为以下几个方面来说: 一.对应岗位的工作职责初级前端,主要负责产品 ...
- 好程序员web前端分享想要学习前端需要学那些课程
好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 《零基础学JavaScript(全彩版)》学习笔记
<零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...
随机推荐
- spring+redis实现缓存
spring + redis 实现数据的缓存 1.实现目标 通过redis缓存数据.(目的不是加快查询的速度,而是减少数据库的负担) 2.所需jar包 注意:jdies和commons-pool两个j ...
- Python 调用自定义包
创建包 # mkdir -p /python/utils # touch /python/utils/__init__.py # vi /python/utils/Log.pyimport timed ...
- python操作mongodb之二聚合查询
#聚合查询 from pymongo import MongoClient db = MongoClient('mongodb://10.0.0.9:27017/').aggregation_exam ...
- 在centos6.5中安装reids
一.简介 Redis是一个key-value存储系统,是一个内存数据库,Redis的出现,很大程度补偿了memcached这类key/value存储的不足,在部 分场合可以对关系数据库起到很好的补充作 ...
- JQUERY学习（壹）
一.jQuery的引言 1.jQuery框架:对JavaScript的封装,简化js开发 2.jQuery框架的好处: 1)语法简单 js中:document.getElementById(" ...
- DispatcherServlet中使用的特殊的Bean
DispatcherServlet默认使用WebApplicationContext作为上下文,因此我们来看一下该上下文中有哪些特殊的Bean: 1.Controller:处理器/页面控制器,做的是M ...
- JS控制css float属性的用法经验总结
JavaScript与CSS属性的控制网上很常见,因此来说用js操作css属性是有一定规律的. 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin ...
- 谈谈JPA-04-JPA的常用API
JPA相关接口/类: Persistence Persistence 类是用于获取 EntityManagerFactory 实例.该类包含一个名为 createEntityManagerFacto ...
- 《javascript高级程序设计》 第24章 最佳实践 Best Practices
24.1 可维护性 Maintainability24.1.1 什么是可维护的代码 What Is Maintainable Code?24.1.2 代码约定 Code Conventions 24. ...
- SqlServer关闭与启用标识(自增长)列
1 --添加新列 2 ALTER TABLE TABLENAME ADD ID int 3 --赋值 4 UPDATE TABLENAME SET ID = IDENTITY_ID 5 --删除标识列 ...