HTML第二课——css【2】
请关注公众号：自动化测试实战
现在继续上一节课的内容，看下面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<!--
<style type="text/css">
/*
css的注释写法
*/
div{
border: 1px solid red;
display: inline;
}
</style>
-->
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div>这是一个div标签</div>
<div>这是第二个div标签</div>
</body>
</html>index.css
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}上面代码中有两个div标签，而在css样式表中只有一个样式文件，那么此时是不是两个div标签都使用同一个样式呢？大家看了以后就知道，答案是肯定的。那么我们现在想让两个div样式不一样，该怎么写呢？此时我们就需要对两个div有所区分，上面css文件中选择器叫做标签选择器，所以只要是div标签都会适用于对应的样式。现在要区别设置，就涉及到标签选择器了：
id选择器
所有的可视化基本都有id属性，id英文全名为identity意为唯一标识，所以id值必须是唯一的。而且id命名规范为由数字、字母、下划线组成，且不能用数字开头。起名字要用驼峰命名法，比如：myDiv，myDivSpan。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<!--
<style type="text/css">
/*
css的注释写法
*/
div{
border: 1px solid red;
display: inline;
}
</style>
-->
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div id="myDiv1">这是一个div标签</div>
<div id="myDiv2">这是第二个div标签</div>
</body>
</html>上面id已经写好，我们现在来css文件中修改代码，如果你看过之前的xpath写法，那你就一定记得xpath中id用#来表示，css文件中也一样——.代表class，#代表id：
/*
这是css注释
*/
#myDiv1{
background-color: #000000;
color:#ffffff;
display: block;
border: solid purple;
}
#myDiv2{
background-color: #ff0000;
color:#fff;
border: solid green;
}页面显示：
class选择器
class就不是唯一的了，这就是为什么在selenium中有find_elements_by_class_name()的原因了。如上所说，用.表示class：
/*
这是css注释
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}
*/
#myDiv1{
background-color: #000000;
color:#ffffff;
display: block;
border: solid purple;
}
#myDiv2{
background-color: #ff0000;
color:#fff;
border: solid green;
}
.myClass{
background-color: pink;
}页面显示：
背景色有长有短的问题先不用管，下一篇会讲。
你也可以在div标签下增加class属性，然后设置它的背景色，但如果div的id标签设置了背景色，那么会优先选择你在id下设置的背景色：
<div id="myDiv1" class="myClass">这是一个div标签</div>显示和上图一样。所以id选择器优先级要高于class选择器。
混合选择器
先说明一下，以后我们要用混合选择器，用混合选择器，用混合选择器。
混合选择器就是标签选择器+类选择器
下面代码中的div.myClass意为class是myClass的div标签
/*
这是css注释
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}
*/
#myDiv1{
background-color: #000000;
color:#ffffff;
display: block;
border: solid purple;
}
#myDiv2{
background-color: #ff0000;
color:#fff;
border: solid green;
}
div.myClass{
background-color: pink;
}这样，css就只会修改class是myClass的div标签了。
如果想把class是myClass的其他标签也用相同的样式，只需要用逗号隔开：
div.myClass, p.myClass, span.myClass{
background-color: pink;
}用选择器的原则就是描述的越详细越好。
选择器的优先级：
id ->混合选择器->class选择器->标签选择器
现在我们修改html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css</title>
<meta name="keywords" content="key1, key2">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/index.css"></head><body>
<!-- 这是注释 -->
<!--通过css改变文字颜色：color属性 -->
<div id="myDiv1" class="myClass">这是一个div标签</div>
<div id="myDiv2">这是第二个div标签</div>
<div class="myClass">这是第三个div标签</div>
<p class="myClass">这是p标签</p>
<span class="myClass">这是一个span标签</span>
<div id="div">
<span class="span">
<p>这是一个p标签</p>
</span>
</div>
</body>
</html>现在我们要修改p标签的文字颜色为红色：
/*
这是css注释
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}
*/
#myDiv1{
background-color: #000000;
color:#ffffff;
display: block;
border: solid purple;
}
#myDiv2{
background-color: #ff0000;
color:#fff;
border: solid green;
}
div.myClass, p.myClass, span.myClass{
background-color: pink;
}
#div span.span p{
color:red;
}之前我们说过，标签是分层的，这里的空格即表示分层，所以上面代码中最后面的样式意为id是div的标签下一层class为span的span标签下一层的p标签。
我们再做一个练习：
.module-body .brand-mask .enter span大家看一下上面css是什么意思？
答案：id是module-body的下一层id是brand-mask的下一层id是enter的span标签。
HTML第二课——css【2】的更多相关文章
- 萌新接触前端的第二课——CSS
前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
- Html标签第二课css
css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div style=& ...
- HTML第二课——css
请关注公众号:自动化测试实战 先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...
- CI(CodeIgniter)框架入门教程——第二课 初始MVC
本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...
- 【Web探索之旅】第二部分第二课：服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- 如何用webgl(three.js)搭建一个3D库房-第二课
闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...
- js项目练习第二课
百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...
随机推荐
- C#快速生成数据数组
需求:生成一个数组,数组里面的值为1-100实现方式:拿到这个需求很多朋友可能会想到一个快速实现的方式如下: ]; ;i<=;i++){ arr[i]=i; } 但是C#提供了一个快速生成的方式 ...
- ehcache入门基础示例
一:目录 EhCache 简介 Hello World 示例 Spring 整合 二: 简介 1. 基本介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernat ...
- spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获
spring boot: GlobalDefaultExceptionHandler方法内的友好错误提示,全局异常捕获 当你的某个控制器内的某个方法报错,基本上回显示出java错误代码,非常不友好,这 ...
- android--------ListView和ExpandableListView的侧滑删除操作
本案例主要实现了ListView和ExpandableListView的侧滑删除操作功能 效果图: ListView的Adapter类 private class SlideAdapter exten ...
- luogu P2408 不同子串个数
考虑反向操作,去计算有多少组相同的子串,对于一组大小为k的极大相同子串的集合,ans-=k-1. 为了避免重复计算,需要一种有效的,有顺序的记录方案. 比如说,对于每一个相同组,按其起始点所在的位置排 ...
- Working routine CodeForces - 706E (链表)
大意: 给定矩阵, q个操作, 每次选两个子矩阵交换, 最后输出交换后的矩阵 双向十字链表模拟就行了 const int N = 1500; int n, m, q; struct _ { int v ...
- HDU-5050 Divided Land （二进制求GCD）
题目大意:将两个二进制数的GCD用二进制数表示出来. 题目分析:这道题可以用java中的大数类AC. 代码如下: import java.io*; import java.math.BigIntege ...
- 牛客网——B-栈和排序
链接:https://www.nowcoder.com/acm/contest/58/B来源:牛客网 题目描述 给你一个1->n的排列和一个栈,入栈顺序给定 你要在不打乱入栈顺序的情况下,对数组 ...
- BZOJ 1601 [Usaco2008 Oct]灌水 (最小生成树)
题意 Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水库. 建造一个水库需要 ...
- learning docker steps(7) ----- docker registry 搭建
参考: https://docs.docker.com/engine/reference/builder/ https://hub.docker.com/_/registry/ https://www ...