定义：

选择器{

　　样式；

}

选择器指明{}中的样式的作用对象，即作用于网页中的哪些元素

<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选择器的更多相关文章

  1. 端午小长假--前端基础学起来03CSS为网页添加样式

    定义:用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体 设置样式:将要设置样式的内容用<span></span>样式括起来,然后再head中设置span < ...

  2. 小甲鱼零基础学python第25讲课后习题动手练习--通讯录

    小甲鱼零基础学python第25讲课后习题动手练习---通讯录 **************************通讯录要求******************************* 输入指令: ...

  3. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  4. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  5. 前端基础--css基本语法,选择器

    一.css概述 CSS(Cascading Style Sheet)层叠样式表,定义如何显示HTML元素,给HTML设置样式,让它更加美观.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式 ...

  6. 零基础学到什么程度可以找一份web前端工作？

    能找到一份前端开发工作,首先你起码得是一个合格的初级前端工程师.那么,什么是初级前端工程师?初级前端工程师都会做些什么?这个问题需要分为以下几个方面来说: 一.对应岗位的工作职责初级前端,主要负责产品 ...

  7. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  8. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  9. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

随机推荐

  1. Android 热补丁动态修复框架小结

    一.概述 最新github上开源了很多热补丁动态修复框架,大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa ...

  2. SonarLint插件的安装与使用

    注意:版本要求Eclipse(4.2,3.8)以上,Java3.1.2,JavaScript 2. 一．SonarLint插件的安装方式 1.安装方式一:在线安装 1)Eclipse工具栏选择Help ...

  3. Bootstrap的标题

    一.定义标题 Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样 ...

  4. hiho1093_spfa

    题目 SPFA模板题,题目中数据可能有两个点之间有多条边直接相连,使用 unordered_map< int, unordered_map< int, int>>, 来存储图的 ...

  5. python语法笔记（七）

    python标准库 Python有一套很有用的标准库(standard library).标准库会随着Python解释器,一起安装在你的电脑中的.它是Python的一个组成部分.这些标准库是Pytho ...

  6. phalcon: 表单

    以实例为说明: controller <?php use \Phalcon\Forms\Form; use \Phalcon\Forms\Element\Text; use \Phalcon\F ...

  7. 按键精灵 句柄 获得句柄 控制windows窗口 后台

    新建一个文本文档,打开,Windows就会给这个文本文档的窗口临时分配唯一的一串数字来标识这个窗体,以区别于其他窗口,这串数字就叫句柄.   因为句柄是临时随机分配的,所以每次虽然是打开同一个文件,但 ...

  8. C++从键盘输入文件结束符

            当我们使用一个istream对象作为条件时,其效果是检测流的状态.如果流是有效的,即流未遇到错误,那么检测成功.当遇到文件结束符,或遇到一个无效输入时(例如需要将输入读到一个int变量 ...

  9. 【bzoj1018】堵塞的交通

    [bzoj1018]堵塞的交通 题意 一个\(2*n\)的格子,相邻格子之间有一条道路.初始时道路是不通的. \(C\)个操作,每个操作为三种中的一种:(1)某条道路连起来:(2)某条道路断开:(3) ...

  10. robotframework笔记13

    变量 介绍 变量是不可或缺的功能机器人框架,他们可以 在大多数地方用于测试数据. 通常,他们使用 参数测试用例表中的关键字和关键字表,但是 也都设置允许变量的值. 一个正常的字 的名字 不能 指定一个 ...