(5)CSS选择器详解
来源:互联网 发布:淘宝是如何开直通车 编辑:程序博客网 时间:2024/05/16 00:43
1.元素选择器
最常见的选择器,文档的元素就是最基本的选择器,例如:div{}
2.选择器分组
分组就是对个元素在一起用逗号隔开
h1,h2{color:red;}
还有一个就是通配符,用*表示如果没有元素没有自定义相关属性,就执行通配中的属性
*{ color: red; margin: 0px; padding: 0px;}
3.类选择器
类选择器允许以一种独立于文档元素的方式来指定样式,例如:.class{}
可以结合元素选择器使用:例如:div.class{}
多类选择器,在HTML中不同的类之间用空格隔开,例如:.class .class .class{}
4.ID选择器
类似于类选择器,使用方式是:#id{}
id选择器和类选择器的区别:id只能在HTML文档中使用一次,而 类可以使用多次,当使用js时,需要用到id。
数据加载时,id是先找到结构再找到内容然后再去渲染,而类是先渲染再找到结构再找到具体内容。
5.属性选择器
简单的属性选择器:例如:[title]{}
根据具体的属性值选择:除了选择拥有某些元素,还可以进一步缩小选择范围,只选择有特定属性值的元素
属性和属性值完全匹配才可以选择
可根据部分属性值进行选择:[title ~=“title”]{},只要title属性值中包含title就可以选择上
6.后代选择器
可以选择某元素的所有后代元素的选择器
<p>this is my <strong>web</strong> page</p>
p strong{ color:red;}
7.子元素选择器
只能选择作为某元素子元素的元素,例如:h1 > strong{},只选择h1元素的子元素,但是strong中的strong是选不了的
8.相邻兄弟选择器
两者有相同的父元素,可选择紧接在另一个元素后的元素,用于列表中居多,例如:li+li{}
<ul> <li>11111</li> <li>11111</li> <li>11111</li></ul>
li+li{ color: blue;}
第二个和第三个会变成红色
0 0
- (5)CSS选择器详解
- CSS选择器详解(总结)
- Css详解之(选择器)
- CSS选择器详解(伪类)
- Css详解之(伪类选择器)
- css选择器详解(css1/2/3)
- CSS选择器详解(前端系列1)
- CSS属性选择器详解
- CSS选择器详解
- css选择器详解
- Css样式详解--选择器
- CSS选择器详解
- CSS选择器详解
- css笔记-选择器详解
- css选择器详解
- css选择器详解
- CSS选择器详解
- CSS选择器详解
- ural 1009. K-based Numbers - dp
- :: selection
- UVa 793 输入处理+并查集
- (一)Android socket+多线程 实现聊天功能
- 欢迎使用CSDN-markdown编辑器
- (5)CSS选择器详解
- HttpServlet的response和request对象
- Java常见的几种排序算法-插入、选择、冒泡、快排、堆排等
- 基2与基4时间抽取fft算法
- 小议LWIP——内存管理
- sublime text3左侧栏颜色与背景色同步
- mke2fs 命令
- Android图形动画
- QT项目之键盘控制光标移动