css系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏)
一个demo学会css
css系列教程1—选择器全解
css系列教程2—样式操作全解
css选择器全解:
css选择器包括:基本选择器、属性选择器、伪类选择器、伪元素选择器
选择器总是从左至右解析,不要私自添加()优先运算
基本选择器
h2{ /* 标签选择 */
}
p,h1{ /* 使用逗号实现元素合集 */
}
div h1,div h2{ /* 使用空格实现后代元素(子元素和子孙元素)查询,表示div的后代元素h1,h1和div的合集,在从合集中查找后代元素h2,最后查询到的为h2列表 */
background-color: #2b542c;
}
p>h1{ /* >表示直接子元素 */
}
p+h1{ /* +表示紧接在后面的同胞元素,选择h1元素 */
}
html>body table+ul{ /* 在html元素中查询直接子元素body,在body中查询后代元素table,在table元素后面查询同胞元素ul,即在最后选择的为ul列表 */
}
body *{ /* *通配符选择器,匹配所有元素,表示匹配body的所有后代元素 */
}
p.class1.class2{ /* .表示class类选择器,p为标签,连在一块写,表示多重筛选,一个元素可以有多个样式 */
}
#id1{ /* #id选择器,一个元素只能有一个id,所有元素的id不能相同 */
}
属性选择器
p[attribute1][attribute2]{ /* [] 属性选择器,表示具有某种属性的所有元素,多个参数表示同时具有多个属性,class也可以作为一个属性筛选 */
}
a[href="http://www.123.com"]{ /* =具有某个属性,且属性值等于指定值的所有元素 */
}
div[class~="class1"]{ /* ~=具有某个属性,且属性值包含指定值的所有元素 */
}
input[title^="title1"]{ /* ^=指定属性的值以指定字符串开头 */
}
input[title$="title1"]{ /* $=指定属性的值以指定字符串结尾 */
}
input[title*="title1"]{ /* *=指定属性的值包含指定字符串 */
}
input[title|="title1"]{ /* |=指定属性的值等于title1或者以title1-开头 */
}
伪类选择器
a:link{ /* link表示未访问过的超链接 */
}
a:visited{ /* visited表示已访问过的超链接 */
}
input:focus{ /* focus表示当前拥有焦点的元素 */
}
div:hover{ /* hover表示鼠标指针停留的元素 */
}
a:active{ /* active表示被用户输入激活的元素 */
}
div:first-child{ /* first-child表示第一个元素,此句表示第一个div元素 */
}
div :first-child{ /* 空格表示后代元素,此句表示div元素的第一个后代元素 */
}
伪元素选择器
p:first-letter{ /* first-letter行内元素首字母 */
}
p:first-line{ /* first-line行内元素首行 */
}
p:before{ /* before元素前插入内容 */
content:"AAAAAAAAAAA";
color: #2b542c;
}
p:after{ /* after在元素后插入内容 */
content: "AAAAAAAAAAAA";
color: #2b542c;
}
css系列教程1-选择器全解的更多相关文章
- jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
- css3笔记系列-3.css中的各种选择器详解,不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- Cobaltstrike系列教程(三)-beacon详解
0x000--前文 Cobaltstrike系列教程(一)-简介与安装 Cobaltstrike系列教程(二)-Listner与Payload生成 heatlevel 0x001-Beacon详解 1 ...
- CSS系列 (05):浮动详解
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...
- 一步一步使用ABP框架搭建正式项目系列教程之本地化详解
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...
- css系列教程--选择器
css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}&l ...
- HTML和CSS前端教程03-CSS选择器
目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...
- css3基础必回选择器全解
1. *:通用元素选择器 * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除 ...
- AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)
一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...
随机推荐
- 常用按钮css
#openwx_btn { border: 0px; background-color: rgb(145, ...
- 自制裸眼3D图【推荐】
Welcome to the World of Hidden 3D Stereograms.欢迎进入隐身3D图的世界! 网址:http://hidden-3d.com 裸眼立体图是什么? 立体图是立体 ...
- 关于selenium IDE找不到元素
selenium IDE ,明明存在元素,却找不到元素 ,报错Element not found 标签: seleniumselenium IDE自动化测试ide 2016-10-31 13:25 1 ...
- CentOS7 安装Nginx+MySQL
首先我们需要安装nginx的yum源 [root@AD ~]# rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-releas ...
- 201521123084 《Java程序设计》第14周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结数据库相关内容. answer: 2. 书面作业 1. MySQL数据库基本操作 1.1 建立数据库test.表studen ...
- SNS团队第一次站立会议(2017.04.22)
一.当天站立式会议照片 本次会议主要内容:进一步明确了团队中各个成员的定位,说明了下一步团队工作的方向 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 罗于婕 系统架构设计及项目数据库设 ...
- 201521123117 《Java程序设计》第4周学习总结
1. 本周学习总结 Q1.1 尝试使用思维导图总结有关继承的知识点. Q1.2 使用常规方法总结其他上课内容. 答:控制可见性的4个访问修饰符private -- 仅对本类可见public -- 对所 ...
- 银河麒麟操作系统打开VMware报vmmon无法编译
使用银河麒麟操作系统打开VMware可能会报vmmon无法编译 这个时候... 将/usr/src/linux-headers-xxx/include/miscdevice.h第71行void改为in ...
- mount挂载和交换分区swap
目录 mount挂载 挂载方法 选项 查看设备 卸载命令 文件挂载配置文件fstab 交换文件与分区 swap优先级 三个工具free,df,du 扩展 移动介质 使用光盘 挂载USB设备 mount ...
- 《MySQL必知必会》[01] 基本查询
<MySQL必知必会>(点击查看详情) 1.写在前面的话 这本书是一本MySQL的经典入门书籍,小小的一本,也受到众多网友推荐.之前自己学习的时候是啃的清华大学出版社的计算机系列教材< ...