CSS选择器 视频24-27
来源:互联网 发布:药物实验志愿者知乎 编辑:程序博客网 时间:2024/06/15 01:22
一、常用的选择器
元素选择器
作用:通过元素选择器可以选择页面中所有指定元素
语法:P{}
1、 练习:为页面中的所有的p元素,设置一个字体颜色为红色
Id
作用:通过元素属性值Id选择是唯一的
语法:#id属性值{}
2、练习:为指定的P元素设置指定的大小
#p1{
Font-size:20px;
}
<p id=”p1”></p>
Class
作用:设置class属性,id不可重复,class可以重复。类选择器
语法:.class属性值
3、练习:同时选中三个元素,设置这三个元素为一组
.hello{
}
.p2{
Color:red;
}
注意:可以为一个class设置多个属性值,多个属性值之间通过空格隔开
<p class=”p2” hello></p>
选择器分组(并集选择器)
4、练习:为id为p1的元素,class为p2的元素,h1同时设置一个背景颜色为黄色
通过选择器分组可以同时选择多个选择对应的元素
语法:选择器1,选择器2,选择器N{}
通配选择器
5、练习:
可以用来选中页面中所有的元素
语法:*{}
*表示选中所有元素
交集选择器(复合选择器)
6、练习:为拥有class p3 span的元素设置一个背景颜色为黄
作用:可以选中同时满足多个条件的元素
语法:选择器1选择器2选择器N
Span,p3
二、元素之间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代的元素
后代元素:直接或间接被祖先元素包含的元素
兄弟元素:拥有相同父元素的元素
习题:<div id=”d1”>
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
后代元素选择器:选中指定元素的指定后代元素
语法:祖先元素后代元素{}
1、 练习:为div中的span设置一个颜色为绿色
2、 练习:选中id为d1的div中的p元素中的span元素
答案:#di p span{}
子元素选择器:选中指定父元素的的指定子元素
语法:父元素>子元素
3、 为div的子元素span设置一个背景颜色为黄色
- CSS选择器 视频24-27
- CSS视频 选择器 27-32
- CSS选择器,jQuery选择器
- jQuery选择器 CSS选择器
- css选择器-基本选择器
- css选择器-属性选择器
- CSS选择器选择器
- CSS选择器-属性选择器
- css选择器
- css选择器
- css选择器
- Css选择器!
- CSS选择器
- css选择器
- CSS选择器
- CSS选择器
- CSS选择器
- CSS选择器
- 智能家居来了,未来的你需要一个会思考的房子
- 图像与机器学习-3-特征
- 报表FBL3N中需要增加BKPF或者BSEG表的字段,不要慌,轻松一步。 方法一: 方法二:
- Mysql数据库几种搜索引擎
- python_慕课\Python开发简单爬虫\5-3 Python爬虫urlib2实例代码.py
- CSS选择器 视频24-27
- 电容触控学习----CDC与BG-CDC的含义
- 库存扣多了,到底怎么整
- Java并发编程之三:volatile关键字解析
- Leetcode:169. Majority Element(找到数组中出现次数最多的元素)
- python_慕课\Python开发简单爬虫\7-7 开始运行爬虫和爬取结果展.py
- Jmter学习心得
- 【资源共享】《Rockchip IO-Domain 开发指南 V1.0》
- linux 的set,env和export的区别