全栈工程师开发手册 (作者:栾鹏)

一个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-选择器全解的更多相关文章

  1. jquery系列教程3-DOM操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  2. css3笔记系列-3.css中的各种选择器详解,不看后悔系列

    点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...

  3. Cobaltstrike系列教程(三)-beacon详解

    0x000--前文 Cobaltstrike系列教程(一)-简介与安装 Cobaltstrike系列教程(二)-Listner与Payload生成 heatlevel 0x001-Beacon详解 1 ...

  4. CSS系列 (05):浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  5. 一步一步使用ABP框架搭建正式项目系列教程之本地化详解

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...

  6. css系列教程--选择器

    css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}&l ...

  7. HTML和CSS前端教程03-CSS选择器

    目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. ...

  8. css3基础必回选择器全解

    1.   *:通用元素选择器   * { margin: 0; padding: 0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除 ...

  9. AngularJS系列:表单全解(表单验证,radio必选,三级联动,check绑定,form提交验证)

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

随机推荐

  1. YYHS-挑战nbc

    题目描述 Abwad是一名有志向的优秀OI少年.遗憾的是,由于高能宇宙射线的影响,他不幸在NOI中滚粗.不过,Abwad才高一,还有许许多多的机会.在长时间的刻苦学习之后,他实力大增,并企图撼动OI界 ...

  2. CAS单点登陆 SSO

    什么是单点登陆 SO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制.它是目前比较流行的企业业务整合的解决方 ...

  3. 【集美大学1411_助教博客】团队作业9——测试与发布(Beta版本)

    写在前面的话 已经看到了大家的发布成果,很欣喜,虽然有的团队的产品还是有一点问题,但大家也都发布成功了,这就是软件的魅力.但还是要说一些问题,大家录的视频不是没人讲解就是讲得太快,在我看来这都没有在卖 ...

  4. 团队作业4——第一次项目冲刺(Alpha版本)4.22

    团队作业4--第一次项目冲刺(Alpha版本) Day one: 会议照片 由于团队中的组员今天不在学校,所以我们的站立会议提前一天展开. 项目进展 由于今天是Alpha版本项目冲刺的第一天,所以没有 ...

  5. 团队作业4——第一次项目冲刺(Alpha版本)7th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 在计时模式下能够记录用户的用户名和成绩,没有弄登录功能, 将程序定义为单机的 未完成的卡片为登录功能和使用QQ登录. 四.困难 ...

  6. 201521123103 《Java学习笔记》 第五次学习总结

    一.本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. (1).接口更灵活.更方便,可以方便的为现有的系统添加新的功能. (2).is-a ...

  7. 201521123077 《Java程序设计》第4周学习总结

    1. 本周学习总结 几种简单说明注释的使用 抽象类与抽象方法 super调用父类的方法 2. 书面作业 Q1.注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看. ...

  8. 201521123016 《Java程序设计》第2周学习总结

    1. 本周学习总结 JAVA中string对象创建后不可修改. 使用StringBuilder编写代码,减少内存空间的占用. 字符串使用"+"拼接,拼接后其他类型会被转化为字符串. ...

  9. 201521123037 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. java异常继承架构 2. 书面作业 本次PTA作业题集异常 1. 常用异常 题目5-1 1.1 截图你的提交结果( ...

  10. SQL Server安装【转载】

    http://blog.csdn.net/sangjinchao/article/details/62044021?locationNum=6&fps=1