请关注公众号：自动化测试实战

现在继续上一节课的内容，看下面代码：

<!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】的更多相关文章

  1. 萌新接触前端的第二课——CSS

    前端知识——CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...

  2. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  3. HTML第二课——css

    请关注公众号:自动化测试实战 先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...

  4. CI(CodeIgniter)框架入门教程——第二课 初始MVC

    本文转载自:http://www.softeng.cn/?p=53 今天的主要内容是,使用CodeIgniter框架完整的MVC内容来做一个简单的计算器,通过这个计算器,让大家能够体会到我在第一节课中 ...

  5. 【Web探索之旅】第二部分第二课：服务器语言

    内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...

  6. 如何用webgl(three.js)搭建一个3D库房-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

  7. js项目练习第二课

    百度输入法 <style> *{ list-style: none; text-decoration: none; padding: 0; margin: 0; } a:hover{ te ...

  8. 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02

    第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...

  9. 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

    闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...

随机推荐

  1. Redis之无序集合类型命令

    Redis 集合(Set) Redis 的 Set 是 String 类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis 中集合是通过哈希表实现的,所以添加,删除,查找 ...

  2. centos7: iptables保存（配置完nginx的web规则后）

    centos7: iptables保存(配置完nginx的web规则后) 以本地虚拟机为例: 添加规则:入站规则 iptables -I INPUT -p tcp --dport 80 -j ACCE ...

  3. [Java学习] Java继承的概念与实现

    继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法和属性的过程.如果类B继承于类A,那么B就拥有A的方法和属性. ...

  4. Python基础--数据类型

    一.数据类型是什么鬼? 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同 ...

  5. bzoj1834: [ZJOI2010]network 网络扩容 费用流

    bzoj1834 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用. 求: 1.在不扩容的情况下,1到N的最大流: 2.将1到N的最大流增加K所需的最小扩容 ...

  6. 10. Regular Expression Matching *HARD*

    Implement regular expression matching with support for '.' and '*'. '.' Matches any single character ...

  7. silent install oracle 11.2.0.1 x86_64 for linux

    su - root#groupadd oinstall#useradd -g oinstall oracle#passwd oracle#mkdir -p /u01/app/oracle#chown ...

  8. app.jsNodejs启动测试服务

    'use strict'; var express = require('express');var app = express('');var fs = require('fs'); app.get ...

  9. UAC 注册表 WIN64 OS 运行时主题

    首先EXE程序是32位,DelphiIDE对Project默认是启用主题的,默认情况在WIN64 OS下运行时,无管理员权限. WIN64 OS,默认情况下UAC是启用的. 上述默认情况下,EXE 是 ...

  10. HP-UNIX操作系统root账号被锁定的两种解决方法

    方法一:到单用户取消trusted system, 重新激活账户 a.重起机器,自检完成后,会出现这一行"To discontinue, press any key in 10 second ...