写了这么长时间前端代码竟然对CSS3选择器还不是很清楚,呜呼哀哉!
俗话说:书读百遍,其义自见,我信这句话,所有我要多看书,多作笔记,多记录学过的东西,不然学了跟没学没什么分别。【本文会根据学习会新增内容,不正确的地方请大家指正,谢谢!】
一、CSS3属性选择器
在CSS3中增加了三个属性选择器
- [att*=val]:如果元素用att表示的属性之属性值包含字符为val指定的字符串的话,则该元素使用该样式。
- [att^=val]:如果元素用att表示的属性之属性值的开头字符为val指定的字符串的话,则该元素使用该样式。
- [att$=val]:如果元素用att表示的属性之属性值的结尾字符为val指定的字符串的话,则该元素使用该样式。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS3选择器</title> <style type="text/css"> ._divYellow{ background:yellow} [id^=section]{ background:red } [id$=\-1]{ background:yellow } </style> </head> <body> <div id="section1" class="divYellow">示例文本1</div> <div id="subsection1-1">示例文本1-1</div> <div id="subsection1-2">示例文本1-2</div> <div id="section2">示例文本2</div> <div id="subsection2-1">示例文本2-1</div> <div id="subsection2-2">示例文本2-2</div> </body> </html>
看上面代码:
[id^=section]表示id以section开头,[id$=\-1]表示id以-1结束那样式就会满足该条件的所有标签器作用。
二、结构性伪类选择器
1、伪类选择器及伪元素选择器
所谓伪类选择器就是相同元素,定义不同的类选择器,且选择器名已定义好,如a(锚)元素的几种选择器。
所谓伪元素选择器:并不是针对真正的元素使用选择器,而是针对CSS中一定义好的伪元素使用的选择器。
在CSS中有如下四种为元素选择器:
- first-line:元素的第一行
- first-letter:元素的中文第一个汉字或英文的第一个字母
- before:元素前面插入内容
- after:元素后面插入内容
接上面例子:
...... p:first-line{ color:#0000ff } ...... <p> 段落中的第一行。<br>段落中的第二行。 </p> ......
运行代码样式对p标签第一个元素起作用。
。。。。。。
相关推荐
前端必须掌握30个CSS3选择器.
CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。
CSS3选择器教辅.pdf
CSS3选择器(ppt).pdf
IE-Css3.Js 让IE支持CSS3 选择器的插件。
CSS3选择器学习笔记代码
CSS3选择器.pdf
css3选择器-read.docx
ie-css3.js 让IE支持高级CSS3选择器.zip
ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到,它就会被替换为同名的CSS class。比如: div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后,Robert Nyman的...
该资源是我本人自学css时,系统地整理的一些关于css选择器的资料汇总拿出来与大家共享,如果需要转载请注明出处,如果表达有误,欢迎指出谢谢!
然后两个选择器相对应的CSS代码如下: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色: 尽管上面两个demo...
别误会,IE是不支持CSS3高级选择器,包括最新的IE8,但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的制作高可维护性的页面。 然而IE对高级CSS选择器特别是CSS3选择...
CSS3选择器--属性选择器;CSS3选择器简介;使用选择器可以方便的定位于指定的元素,而不用使用额外的class或id,通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]...
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
CSS3选择器--关系选择器 关系选择器 01 子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(>) 示例:设置 h1 ...
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...