web css
css: 1.id选择器(常用)
2. class选择器(常用)
3.标签选择器(常用)
4.属性选择器
5.后代选择器
6. 子级选择器
介绍:ui自动化是中级测试工程的必备技能 如果要实现自动化 必须学会找元素 找元素使用的是css样式中的选择器
css第一个案例:
步骤:1.在head标签中编写<style></style>
2.在style标签中编写css语法:选择器{属性:值;}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
P{color: yellow;}
</style>
</head>
<body>
<p>我是p标签 今天开始学习css</p>
</body>
</html>
注意:选择器中的属性 不是标签自身的属性 而是指选择器内置的一些属性
1.id选择器:
重点: 元素必须有id属性
语法:#id值
注意:1.id变量命令不能使用中文 纯数字 特殊字符
2.推荐:字母加数字+下划线
2.class选择器:
重点:元素必须有class属性
语法:.class
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.divvv{color:red;}
</style>
</head>
<body>
<div class="divvv">
我是div1
</div>
</body>
</html>
3.标签选择器(元素选择器)
说明:根据标签名来找元素
语法:标签名{css属性名:属性值}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
P{color: yellow;}
</style>
</head>
<body>
<p>我是p标签 今天开始学习css</p>
</body>
</html>
扩展:标签选择器适合所有的标签来查找
4.属性选择器
说明:根据标签任何存在的属性来找元素
注意:中括号必须是英文[]
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
属性选择器:根据元素的任何属性来找元素
语法(中括号必须为英文)
/* :1.[属性名="属性值"] */
/* 2.[属性名] */
[id="id1"]{color:red;}
</style>
</head>
<body>
<p name="p1"id="id1"class="cls1">ppp</p>
</body>
</html>
5及6.后代及子级选择器:
说明:后代选择器包括子级(儿子)
后代选择器:理解为模糊定位 查找指定标签下所有符合条件的元素(模糊点位)
语法:元素 元素:元素可以是id选择器 类选择器 属性选择器.....
子级选择器:只能查找直属子级符合条件的元素(隔级不行)(精准定位)
语法:元素>元素
扩展:
css常用的内置属性:
color:改变颜色
font-size:改变字体大小
提示:以上两个属性可以通过浏览器的样式模块(style)进行调试
css书写位置及方式:
1.内嵌
<sstyle>
</style>
注意:首页的样式推荐使用内嵌和外链
除了首页以外都推荐使用外链
2.行内
<p style="">
3.外链(推荐)
<link href="..css文件">
选择器优先级
一级:improtant;(强制语法)
二级:id选择器
三级:类选择器
四级:标签选择器
继承性
修改父类容器的一些属性 子类会继承相应的特性