H5与CS3权威下.19 选择器(2)结构性伪类选择器
2018-06-27 09:08:11来源:未知 阅读 ()
1.CSS中的伪类选择器及伪元素
(1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器。
eg:a:link{color:#ff0000;}
(2)伪元素的使用方法:
选择器:伪元素{属性:值}
选择器.类名:伪元素{属性:值}
2.css中常用的伪元素选择器
(1)first-line:向某元素中的第一行文字使用样式。
eg:
1 <p>伪元素选择器 <br>类选择器</p>
1 p:first-line{background: pink;}
(2)first-letter:用于向某个元素中的文字的首字母(欧美文字)或是第一个字(中文或是日文等汉字)使用样式。
eg:
1 <p>伪元素选择器 ,类选择器</p> 2 <p>Hello!</p>
1 p:first-letter{font-size: 20px;color:red;}
(3)before:用于在某个元素之前插入一些内容。
eg:
1 <ul> 2 <li>linshuling</li> 3 <li>linshuling</li> 4 <li>linshuling</li> 5 <li>linshuling</li> 6 <li>linshuling</li> 7 </ul>
1 ul{list-style: none;} 2 li:before{content:"*";}
注意:如果content后面的内容不加双引号,会出现错误。(Firefox版本为50.1.0)
li:before{content:*;}
也可以插入其他内容:
eg:
1 li:before{content:url(01.jpg);}
(4)after:用于在某个元素之后插入一些内容。
1 ul{list-style: none;} 2 li:after{content:url(01.jpg);}
1 li:after{content:"0000";}
3.结构性伪类选择器——允许开发者根据文档树中的结构来指定元素的样式。
(1)root选择器:将样式绑定到页面的根元素中。在HTML中页面中指的是整个页面的“<html>”部分。
eg:
1 :root{background: pink;} 2 body{background: yellow;}
注意:
1 body{background: yellow;}
如果仅仅是定义body的背景颜色,而不定义:root,则整个页面都会变成黄色。
(2)not选择器:对某个结构元素使用样式,但是想排除这个结构下面的子结构元素,让它不使用这个样式,可以使用not选择器。
eg:
1 body :not(h1){color:red;font-size: 16px;}
1 <h1>hello!</h1> 2 <ul> 3 <li>linshuling</li> 4 <li>linshuling</li> 5 <li>linshuling</li> 6 <li>linshuling</li> 7 <li>linshuling</li> 8 </ul>
注意:not选择器的使用格式,:not(h1),不能写成not(“h1”),不然会出现错误。
(3)empty选择器:用来指定当元素中的内容为空白时使用的样式。
eg:
1 <h1>hello!</h1> 2 <ul> 3 <li>linshuling</li> 4 <li>linshuling</li> 5 <li></li> 6 <li>linshuling</li> 7 <li>linshuling</li> 8 </ul>
1 :empty{background: pink;}
(4)target选择器:用来对页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
eg:
1 <a href="#text1">实例文字1</a> 2 <a href="#text2">实例文字2</a> 3 4 <div id="text1"> 5 <h2>linshuling</h2> 6 </div> 7 8 <div id="text2"> 9 <h2>linshuling</h2> 10 </div>
1 :target{ 2 background: pink; 3 }
如上的例子,点击“实例文字2”时,第二行的背景颜色会变为粉红色。点击“实例文字1”,第一行的背景颜色会变为粉红色。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- HTML5权威指南 中文版 高清PDF扫描版? 2018-06-24
- Web性能权威指南 PDF扫描版? 2018-06-24
- CCS3的过渡、变换、动画以及响应式布局、弹性布局 2018-06-24
- 读书笔记《CSS权威指南》 2018-06-24
- H5与CS3权威下.19 选择器(2)结构性伪类选择器 2018-06-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash