跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

css选择器实例分享

现在正在学习jquery的选择器的使用,与 css 中的大部分选择器有相同之处,这里对css的选择器做一个总结便于以后对比学习。 第一、元素选择器: 通配选择器:*{}       一般用于全局的消除浏览器自带效果 类型选择器:E{}       html的标签,一般用于消除一些特定的浏览器自带效果 id选择器:#myid{}     一般用于指定特定的效果,或者用于命名特别的区域。学会利用id只能有一个的特性 类选择器:.myclass{}    主要用于设置特效,并使用class可以使用多个的特性对网页进行布局设计 立即学习 “ 前端免费学习笔记(深入) ”; 第二、关系选择器: 包含选择器:E F(注意这里的符号是空格,关系选择器)   在设置网页效果时长期使用,目前本人理解的是用于准确定位 注意:包含选择器在某些地方也叫子类选择器,并且这里的子类无论嵌套多深都会实现,如下图 子选择器:E>F           一般用于特定指定某个元素的子元素 注意:这里只能是父元素的下一级子元素,不能是子元素的子元素。请与上面的子类选择器区分。 相邻选择器:E+F        如果想要 选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。 兄弟选择器:E~F     选择E元素后面的所有兄弟元素F。 注意:这里会选择除了E后面的所有相同元素,开发中不常用。 第三、属性选择器:(使用频率比较少) 属性选择器的分类:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"] 具体作用: E[att]:选择具有att属性的E元素 E[att="val"]:选择具有att属性且属性值等于val的E元素 E[att~="val"]:选择具有att属性且属性值为医用空格分给的字词列表,其中一个等于val的E元素。 E[att^="val"]:选择具有att属性且属性值以val开头的字符串的E元素。 E[att$="val"]:选择具有att属性且属性值以val结尾的字符串的E元素 E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素 E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔符的字符串的E元素。 总结:空格用~,开头结尾分别为^、$,包含用*,特殊的-格式用特殊的| 第四、伪类选择器:(重点,用于一些特殊的布局效果) 关于超链接a的伪类选择器 E:link   被访问前的样式 E:visited  被访问后的样式 E:hover   鼠标放到超链接上时的效果(时常使用 ) E:active   在鼠标点击与释放之间发生的事件 E:focus     当获取到焦点的时候放生,该对象的onfocus事件发生 其他伪类选择器: E:lang()    匹配使用的特殊语言 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 E:not()    匹配不含有s选择器的元素E,用于取消某个特定的选择器 E:root    匹配E元素在文档中的根元素。在html中,根元素永远是html。 一些重要的伪类选择器: E:first-child   匹配父元素的第一个子元素E     注意:用于有大量内容的时候,设置某些特殊的效果 E:last-child   匹配父元素的最后一个子元素 E:only-child   匹配父元素仅有的一个子元素E    注意:要使该属性生效,子元素只能有一个。(这里记着jquery中也有使用) E:nth-child(n)   匹配父元素的第n个子元素      注意:这里可以通过语法设定按照偶数或者奇数(基础) E:nth-last-child(n)   匹配父元素的倒数第n个子元素E E:first-of-type    匹配同类型中的第一个同级兄弟元素E E:last-of-type匹配同类型中的最后一个同级兄弟元素E E:only-of-type匹配同类型中的唯一的一个同级兄弟元素E E:nth-of-type(n)       匹配同类型中的 第n个同级兄弟元素E E:nth-last-of-type    匹配同类型中的倒数第n个同级兄弟元素E E:empty            匹配没有任何子元素的元素E    注意:不仅没有子元素,而且里面没有显示任何东西才能生效 E:checked          匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) E:enabled          匹配用户界面上处于可用状态的元素E。就是 字面意思 E:disabled          匹配用户界面上处于禁用状态的元素E。就是 字面意思 E:target              匹配相关url指定的E元素,下面是代码,请自主实验
目标伪类选择符 E:target_CSS参考手册_web前端开发参考手册系列

前往区块1 前往区块2 前往区块3 前往区块4 前往区块5

区块1

区块1内容

区块1内容

区块1内容

区块2

区块2内容

区块2内容

区块2内容

区块3

区块3内容

区块3内容

区块3内容

区块4

区块4内容

区块4内容

区块4内容

区块5

区块5内容

区块5内容

区块5内容

第五、伪对象选择器: 常用: E:before/E::before    双冒号为现在推荐写法,单独的冒号任然适用 E:after/E::after E::selection    设置对象被选择时的样式      (一般用来弄些装b的特效文字展示,认真脸。注意两个冒号) E:first-line/E::first-line                设置对象内的第一行样式(懒得写了,反正用的不多。可以查看帮助文档) E:first-letter/E::firset-letter            设置对象内的第一个字符的样式(这个写文章用得多,很显然现在市场上用得少) 相关推荐: CSS选择器的新用法详解 CSS选择器字段解析的实现方法 详解CSS选择器 Selector

相关文章