Web前端新人之CSS样式选择器
最近在学习css样式。那么我就想先整理一下css样式的选择器
规则结构:
每个规则都有两个基本部分:选择器和声明块。声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-value)
1、元素选择器
* 通用元素选择器,匹配任何元素 *{margin:0;padding:0};
x 标签选择器 h1{color:#000},p{color:#000};
.info class选择器 .info{background-color:red};
#target ID选择器 #target{font-size:15px};
2、选择器分组
x,y 多元素选择器 x,y{font-weight:bold};
x y 后代选择器 x y{display:inline};
x>y 子元素选择器 x>y{color:#333};
x+y 相邻元素选择器 x+y{color:#ddd};
说明:
还有个更为高级的CSS选择器模块,早在CSS2完成之后就发布了。其中包含更多的部分值属性选择器又称之为“子串匹配属性选择器”。
3、子串匹配属性选择器
[x^=“y”] 选择属性以x开头的y的所有元素;
[x$=“y”] 选择属性以x结尾的y的所有元素;
[x*=“y”] 选择属性以x包含子串的y的所有元素;
4、伪类选择器
:link 指示为超链接(有一个href属性)并指向一个未访问地址的所有锚链接。
:visited 指示为已访问的地址超链接所有的锚链接
5、动态伪类
:focus 指示为当前拥有输入焦点的元素。也就是可以接受键盘输入或者可以以某种方式激活的元素;
:hover 指示为鼠标指针停留在某个元素上。例如鼠标停留在超链接上。字体会由黑色变为红色;
:active 指示为被用户输入激活的元素。例如鼠标指针在超链接上后。当用鼠标点击这个链接后。就会激活这个:active
最新文章
- Matlab中^2和.^2的区别
- 使用C#在CEF中拦截并响应请求
- Android浮动小球与开机自启动
- 如何恢复低版本的FlashPlayer
- Nginx的启动脚本
- 重写equal要重写 hashCode的原因
- windows container (docker) 容器资料笔记
- ubuntu14.04下安装有道词典
- webstorm 2018.2.3 cmd+w无法关闭文件
- 引:Jmeter添加变量的四种方法
- 10 enumerate()在字典,列表中的用法详解
- 用FireBreath来编写跨浏览器插件
- C++类默认函数
- ios的两种界面跳转方式
- UVa 11212 编辑书稿(dfs+IDA*)
- Error Code: 1175. You are using safe update mode and you tried to ......
- Kubelet资源预留
- cocos2d-x游戏引擎核心之十——网络通信
- svn文件管理
- tf.session.run()单函数运行和多函数运行区别