css3之结构性伪类选择器
来源：互联网 发布：打开db数据库 编辑：程序博客网 时间：2024/05/22 15:46
本篇介绍伪类选择器以及伪元素。
1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：
p.left{text-align: left} p.rigth{text-align: right}2、伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。
最常见的伪类选择器：
a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active{ color: #55b28e } /* 正在被点击的链接 */3、伪元素选择器伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}
4、在CSS中，主要有四个伪元素选择器。
1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。
例如：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>伪类选择器以及伪元素</title> <style> :root{ background: #126fb0; } body{ background: #ffffff; } p.aaas{ text-align: left; color: red; } p.right{ text-align: right; color: green; } a:link{ color: #000; } a:visited{ color: fuchsia; } a:hover{ color :green; } a:active{ color: #ff6600; } p:first-line{ color: #f60; } p:first-letter{ color: green; font-size: 24px; } li{ list-style: none; } li:before{ content:"..."; color: red; } li:after{ content: "__after追加"; color: #ff6600; } </style></head><body><h1>类选择器</h1><p class="aaas">伪类选择器以及伪元素</p><p class="right">伪类选择器以及伪元素</p><br/><a href="index1.html">伪类选择器</a><br/><p> 在CSS中，主要有四个伪元素选择器<br/> first-line伪元素选择器用于向某个元素中的第一行文字使用样式。</p><ul> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li></ul></body></html>5、结构性伪类选择器root、not、empty和target
1）、root选择器
root选择器将样式绑定到页面的根元素中。
2）、not选择器
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>not选择器</title> <style> :root{ background: #126fb0; } body *:not(h1){ background: #fff; } :empty{ background: #ff6600; } </style></head><body><h1>not选择器</h1><p>not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器not选择器</p><br/><table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td></td> <td>4</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td></td> </tr></table></body></html> 3）、empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4）、target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>TARGET</title> <style> :target{ background: #000; color: #fff; } </style></head><body><a href="#A">A</a><a href="#B">B</a><a href="#C">C</a><a href="#D">D</a><div id="A"> <h2>标题</h2> <p>内容.........</p></div><div id="B"> <h2>标题</h2> <p>内容.........</p></div><div id="C"> <h2>标题</h2> <p>内容.........</p></div><div id="D"> <h2>标题</h2> <p>内容.........</p></div></body></html>6、选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
2）、last-child选择器
last-child单独指定最后一个子元素的的样式。
3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素
7、only-child选择器
only-child选择器，只对唯一的子元素起作用。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择器first-child、last-child、nth-child和nth-last-child</title> <style> /*li:first-child{*/ /*background: #ff6600;*/ /*}*/ /*li:last-child{*/ /*background: green;*/ /*}*/ /*li:nth-child(odd){*/ /*background: red;*/ /*}*/ /*li:nth-child(even){*/ /*background: #ff6600;*/ /*}*/ /*li:nth-last-child(odd){*/ /*background: green;*/ /*}*/ /*li:nth-last-child(even){*/ /*background:gray;*/ /*}*/ /*h2:nth-child(odd){*/ /*color: #ff6600;*/ /*}*/ /*h2:nth-child(even){*/ /*background: #693ada;*/ /*}*/ /*h2:nth-of-type(odd){*/ /*background: #126fb0;*/ /*}*/ /*h2:nth-last-of-type(even){*/ /*background: #f60;*/ /*}*/ /*li:nth-child(3n+1){*/ /*background: #126fb0;*/ /*}*/ /*li:nth-child(3n+2){*/ /*background: #ff6600;*/ /*}li:nth-child(3n+3){*/ /*background: #ff1b00;*/ /*}*/ /*li:nth-child(4n+3){*/ /*background: #000000;*/ /*}*/ /*li:nth-child(4n+4){*/ /*background: green;*/ /*}*/ li:only-child{ background: #ff1b00; } </style></head><body><!--<h1>选择器first-child、last-child、nth-child和nth-last-child</h1>--><h1>唯一的</h1><ul> <li>第一个项目</li></ul><h1>很多的</h1><ul> <li>第一个项目</li> <li>第二个项目</li> <li>第三个项目</li> <li>第一个项目</li> <li>第一个项目</li> <li>第一个项目</li> <li>第一个项目</li> <li>第一个项目</li></ul><!--<div>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p> <h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--> <!--<h2>标题</h2>--> <!--<p>内容</p>--><!--</div>--></body></html> 0 0
- css3之结构性伪类选择器
- CSS3 结构性伪类选择器
- CSS3结构性伪类选择器
- css3学习 之 css选择器(结构性伪类选择器)
- CSS3选择器--结构性伪类选择器
- CSS3结构性常用伪类选择器
- 【CSS3】 结构性伪类选择器—root
- 【CSS3】结构性伪类选择器—not
- 【CSS3】结构性伪类选择器—empty
- 【CSS3】结构性伪类选择器—target
- CSS3结构性伪类
- 结构性伪类选择器
- 结构性伪类选择器
- 9、实例CSS3新增加结构性伪类选择器
- 【CSS3】---结构性伪类选择器-root+not+empty+target
- 【CSS3】---结构性伪类选择器-first-child+last-child
- 【CSS3】结构性伪类选择器—first-child
- 【CSS3】结构性伪类选择器—last-child
- ScrollView嵌套ListView数据显示不完全解决办法
- 十进制与十六进制的互换
- HTML5学习_day02(1)--css高级选择器
- SearchView的功能与使用
- 基于深度学习的目标检测研究进展
- css3之结构性伪类选择器
- 基础知识之PHP缓存技术
- IDoc-变更自动运行－ｃｈａｎｇｅ ｐｏｉｎｔｅｒ 。
- 让activity横竖屏切换不重新调用各个生命周期方法
- Inxi：获取Linux系统和硬件信息的神器
- 图片相关：bigmap工具类，实现压缩、异步、并发、缓存
- CATransition类动画
- GitHub上README.md教程
- mysql 基本命令
