专栏首页自动化测试实战HTML第二课——css【2】

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命名规范为由数字、字母、下划线组成,且不能用数字开头。起名字要用驼峰命名法,比如:myDivmyDivSpan

<!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属性,然后设置它的背景色,但如果divid标签设置了背景色,那么会优先选择你在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标签了。

如果想把classmyClass的其他标签也用相同的样式,只需要用逗号隔开:

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标签。

本文分享自微信公众号 - 自动化测试实战(gh_839e78b6ba28),作者:孟船长

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • selenium 上传文件方法补充——SendKeys、win32gui

    用户2149234
  • HTML第二课——css

    用户2149234
  • HTML第一课——基础知识普及【1】

    用户2149234
  • Linux 内存使用过高排查

    Linux释放内存的命令: sync echo 1 > /proc/sys/vm/drop_caches

    用户5760343
  • 【RSA 2017】DAY 4 · 英国传奇女特工和天体物理学家悉数登场——今天的主题演讲很跨界

    DAY 4 跨界与融合 RSA大会第四天, 只安排了四场主题演讲, 但却吸引了足够的人气。 因为今天出场的四位演讲嘉宾, 至少有两位是“跨界”到安全圈的。 Da...

    安恒信息
  • 开发团队面临的三大安全挑战|洞见

    应用安全不能只依靠防火墙,必须要在应用开发阶段采取适当的安全控制措施,使得应用在发布上线前就具备较好的安全性,避免人为失误造成安全隐患。 ? 不少企业早就意识到...

    ThoughtWorks
  • “WannaCry”的警示:大安全时代需要主动安全防御

    集微网合肥报道 文/乐川 当前,全球越来越多的数字化转型企业及数字原生企业在借助以云计算、大数据、移动和社交为代表的第三平台技术来运营自身业务,数据成为其业务稳...

    企鹅号小编
  • TenSec 再掀 AI 热:腾讯云如何将 AI 应用于安全

    腾讯云安全
  • 【Spark篇】---Spark中内存管理和Shuffle参数调优

    Spark执行应用程序时,Spark集群会启动Driver和Executor两种JVM进程,Driver负责创建SparkContext上下文,提交任务,tas...

    LhWorld哥陪你聊算法
  • SAP最佳业务实践:ETO–项目装配(240)-13完成研发工作

    CJ20N完成研发工作 image.png 在确认研发工作后,确认 WBS 元素订单 下的第二个活动,这表示可以执行后续付款了。 该步骤很像必须执行的步骤汇...

    SAP最佳业务实践

扫码关注云+社区

领取腾讯云代金券