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选择器
三级：类选择器
四级：标签选择器
继承性
修改父类容器的一些属性 子类会继承相应的特性
浙公网安备 33010602011771号