HTML第二课——css【2】
请关注公众号：自动化测试实战css
如今继续上一节课的内容，看下面代码：html
<!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.cssjvm
div{
font-family: 'Microsoft Yahei';
font-size: 20px;
border: 1px solid red;
display: inline;
}
上面代码中有两个div标签，而在css样式表中只有一个样式文件，那么此时是否是两个div标签都使用同一个样式呢？你们看了之后就知道，答案是确定的。那么咱们如今想让两个div样式不同，该怎么写呢？此时咱们就须要对两个div有所区分，上面css文件中选择器叫作标签选择器，因此只要是div标签都会适用于对应的样式。如今要区别设置，就涉及到标签选择器了：ide
-
id选择器测试
全部的可视化基本都有id属性，id英文全名为identity意为惟一标识，因此id值必须是惟一的。并且id命名规范为由数字、字母、下划线组成，且不能用数字开头。起名字要用驼峰命名法，好比：myDiv，myDivSpan。spa
<!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：code
/* 这是css注释 */
#myDiv1{
background-color: #000000;
color:#ffffff;
display: block;
border: solid purple;
}
#myDiv2{
background-color: #ff0000;
color:#fff;
border: solid green;
}
页面显示：htm
-
class选择器blog
class就不是惟一的了，这就是为何在selenium中有find_elements_by_class_name()的缘由了。如上所说，用.表示class：ip
/* 这是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标签。
- 1. HTML第二课——css
- 2. HTML第二课
- 3. 第二天HTML&CSS
- 4. HTML第三课——css盒子
- 5. HTML+CSS第一课：初识HTML
- 6. html第二课html图像标记与css入门
- 7. Html+CSS 学习第二天
- 8. html第十二课input
- 9. Java--第2天--Html（二）
- 10. HTML+CSS第三课：表格与表单
- 更多相关文章...
- • jQuery Mobile CSS 类 - jQuery Mobile 教程
- • CSS 指南 - 网站建设指南
- • RxJava操作符（二）Transforming Observables
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. HTML第二课——css
- 2. HTML第二课
- 3. 第二天HTML&CSS
- 4. HTML第三课——css盒子
- 5. HTML+CSS第一课：初识HTML
- 6. html第二课html图像标记与css入门
- 7. Html+CSS 学习第二天
- 8. html第十二课input
- 9. Java--第2天--Html（二）
- 10. HTML+CSS第三课：表格与表单