端午小长假--前端基础学起来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 ...
随机推荐
- MyBatis——实现关联表查询
原文:http://www.cnblogs.com/xdp-gacl/p/4264440.html 一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创 ...
- hdu 5713(状态压缩DP)
要进行两次dp, 第一个,dp[i],1<=i<=(1<<n) 其中用i的二进制形式表示已选择的点. dp[i] 用来保存i中的点构成一个连通块,边集多少种可能. 转移方程: ...
- 转：如何学习SQL（第二部分：从关系角度理解SQL）
转自:http://blog.163.com/mig3719@126/blog/static/285720652010950825538/ 6. 从关系角度理解SQL 6.1. 关系和表 众所周知,我 ...
- hiho_1290_demo_day
题目大意 一个MxN的矩阵,矩阵中的有些方格中有障碍物,有些没有,有一个机器人从左上角出发,它只能有两种移动方式:一直向右移动,直到遇到障碍物:一直向下移动,直到遇到障碍物. 现在可以将矩阵中 ...
- python操作mongodb之二聚合查询
#聚合查询 from pymongo import MongoClient db = MongoClient('mongodb://10.0.0.9:27017/').aggregation_exam ...
- VC++源文件编码
目录 第1章源代码文件 1 1.1 研究思路 1 1.2 实验结果 3 1.3 #pragma setlocale 4 1.4 /source-charset 5 1.5 ...
- 【OpenCV入门指南】第一篇 安装OpenCV
http://blog.csdn.net/morewindows/article/details/8225783/ win10下vs2015配置Opencv3.1.0过程详解(转) http://ww ...
- robotframework笔记4
机器人框架概述 机器人框架是一个通用的开源的自动化测试框架 验收测试和验收测试驱动开发(ATDD).它具有易于使用的表格的测试数据 语法采用关键字驱动 测试方法.其检测能力可以通过测试库 用Pyt ...
- spring来了-01-概述
思考 对象创建能否写死? 对象创建细节 对象数量 action 多个 [需要维护成员变量] service 一个 [不需要维护成员变量] dao ...
- sublime text修改TAB缩进为2个空格
打开sublime后在倒数第二项 preference---->Settings-user: 然后输入 "tab_size": 2, "translate_tabs ...