li:after元素first-letter
<元素>:after{
content:插入文字
}
//也可以插入其他内容
<元素>:after{
content:url(text.wav)
}
after伪元素选择器的一个使用示例,在该示例中有一个ul列表,这个ul列表的内容为某个网站上播放电影的
节目清单。该列表中有几个列表项目,每个列表项目存放了对于某部电影的超链接,使用after伪元素选择器的
每个超链接的后面加入(仅于测试,请勿用于商业用途)的文字,并且将文字颜色设为红色。
li:after{
content:"(仅用于测试,请勿用于商业用途。)";
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
<li><a href="movie2.mp4">精武风云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>
显示如下:
first-letter
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
p:first-letter{
color:#0000ff
}
</style>
</head>
<body>
<p>This is an english text.</p>
<p>这个是第一段中文文字</p>
显示如下:
</body>
root选择器
再使用样式指定root元素与bod元素的背景时,根据不用的指定条件背景的显示
范围会有所变化,这一点请注意。如同样是上面这个示例,如果采取如下所示的样式,
不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面
就全部变成绿色的了
<style>
:root{
background-color:yellow;
}
body{
background-color:limegreen;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
<p> 选择器是CSS3中一个重要的内容。首先需要
说明的是,使用选择器的目的是为了提高开发人员书写或修改样式表时的工作
效率。因为在样式表中,一般会书写大量的代码,在大型网站中国,样式表中
显示如下
的代码可能会达到几千行。
</p>
</body>
not选择器元素
再使用样式指定root元素与bod元素的背景时,根据不用的指定条件背景的显示
范围会有所变化,这一点请注意。如同样是上面这个示例,如果采取如下所示的样式,
不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面
就全部变成绿色的了;
<style>
body *:not(h1)
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
<p> 选择器是CSS3中一个重要的内容。首先需要
说明的是,使用选择器的目的是为了提高开发人员书写或修改样式表时的工作
效率。因为在样式表中,一般会书写大量的代码,在大型网站中国,样式表中
的代码可能会达到几千行。
</p>
显示如下:
</body>
empty选择器:
使用empty选择器来指定当元素中内容为空白时使用的样式。可以使用empty选择器
来指定当表格中某个单元格内容为空白时,该单元格背景为黄色。
<style>
:empty{
background-color:yellow;
}
</style>
</head>
<body>
<table border="1" cellpagding="0" cellspacing="0">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td></td></tr>
</table>
显示如下:
target选择器:
使用target选择器来对页面中某个target元素(改元素的id元被当做页面中的超链接
来使用)指定样式,该样式只有在用户点击了页面中的超链接,并且跳转到target元素
后起作用。
<style>
:target{
background-color:yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a>|
<a href="#text2">示例文字2</a>|
<a href="#text3">示例文字3</a>|
<a href="#text4">示例文字4</a>|
<a href="#text5">示例文字5</a>
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此处略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此处略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此处略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此处略去</p>
</div>
</body>
first-child和last-child选择器:
如果要对第一个项目列表和最后一个项目列表分别指定不同的背景色,目前采取两个列表加上
<style>
li:first-child{
background-color:yellow;
}
li:last-child{
background-color:skyblue;
}
</style>
</head>
<body>
如果要对第一个列表项
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
显示如下:
nth-child选择器与nth-last-child选择器
如果使用nth-child选择器与nth-last-child选择器,不仅可以指定某个元素第一个
子元素以及最后一个子元素的样式,还可以针对父元素中某个指定序号的子元素来指定
样式。这两个选择器是first-child 及 last-child的扩展选择器。
<style>
li:nth-child(2){
background-color:yellow;
}
li:nth-last-child(2){
background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
显示如下
对所有第奇数个子元素或第偶数个子元素使用样式:
除了对指定序号的子元素使用样式以外,nth-child选择器与nth-last-child选择器还可以用来对某个父元素
中所有的第奇数个子元素或第偶数个子元素使用样式。使用方法如下:
nth-child(odd){
//指定样式}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式}
//所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(odd){
//指定样式}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式}
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
li:nth-child(odd){
background-color:yellow;
}
li:nth-child(even){
background-color:skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
显示如下:
nth-of-type选择器与nth-last-of-type选择器:
为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样,我们首先使用nth-child选择器来进行指定,指定第奇数篇文章的标题背景色为黄色,
第偶数篇文章的标题背景色为浅蓝色。
<style>
h2:nth-child(odd){
background-color:yellow;
}
h2:nth-child(even{
background-color:skyblue;
})
</style>
</head>
<body>
<h2>文章标题A</h2>
<p>文章正文</p>
<h2>文章标题B</h2>
<p>文章正文</p>
<h2>文章标题C</h2>
<p>文章正文</p>
<h2>文章标题D</h2>
<p>文章正文</p>
</body>
nth-of-type和nth-last-of-type奇数与偶数的设置
<style>
h2:nth-of-type(odd){
background-color:yellow;
}
h2:nth-of-type(even){
background-color:skyblue;
}
</style>
</head>
<body>
<h2>文章标题A</h2>
<p>文章正文</p>
<h2>文章标题B</h2>
<p>文章正文</p>
<h2>文章标题C</h2>
<p>文章正文</p>
<h2>文章标题D</h2>
<p>文章正文</p>
</body>
nth-child(n)选择器
使用nth-child选择器,只需在"nth-child(n)"语句处,把参数n改成可循环αn+β的形式就可以了。
α表示每次循环中共包括几种样式,β表示指定的样式在循环中所处位置。如此处是4中背景色作为一组
<style>
li:nth-child(4n+1){
background-color:yellow;
}
li:nth-child(4n+2){
background-color:limegreen;
}
li:nth-child(4n+3){
background-color:red;
}
li:nth-child(4n+4){
background-color:white;
}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
</body>
<style>
/*li:nth-child(1):nth-last-child(1){
background-color:yellow;
}*/
li:only-child{
background-color:red;
}
只对唯一样式进行显示
</style>
</head>
<body>
<h2>ul列表A</h2>
<ul>
<li>列表项目A01</li>
</ul>
<h2>ul列表B</h2>
<ul>
<li>列表项目B01</li>
<li>列表项目B02</li>
<li>列表项目B03</li>
</ul>
</body>
显示如下:
选择器:E:hover 、E:active、E:focus:
E:hover选择器被用来指定当鼠标指针到元素上时元素所使用的样式:样式方法如下:
<元素>:hover{
//指定样式
}
可以在“<元素>"中添加元素的type属性,使用方法如下:
input[type=“text”]:hover
//指定样式
}
另外,所有UI元素状态伪类选择器的使用方法均与此类似:
。E:active选择器被用来指定元素被激活(鼠标在元素上按下还没有松开)时使用的样式。
。E:focus选择器被用来指定元素获得光标焦点时使用的样式,主要在文本框控件获得焦点并进行文字输入时使用
<style>
input[type="text"]:hover{
background-color:greenyellow;
}
input[type="text"]:focus{
background-color:skyblue;
}
input[type="text"]:active{
background-color:yellow;
}
</style>
</head>
<body>
<form>
<p>姓名:<input type="text" name="name"/></p>
<p>地址:<input type="text" name="name"></p>
</form>
</body>
显示如下:
伪类选择器:E:read-only伪类选择器与E:read-write伪类选择器
<style>
input[type="text"]:read-only{
background-color:gray;
}
input[type="text"]:read-write{
background-color:greenyellow;
}
input[type="text"]:-moz-read-only{
background-color:gray;
}
input[type="text"]:-moz-read-write{
background-color:greenyellow;
}
</style>
</head>
<body>
<form>
<p>名前:<input type="text" name="name"/></p>
<p>地址:<input type="text" name="address" value="江苏省常州市"
readonly="readonly"/></p>
</form>
</body>
代码显示如下:
E::selection伪类选择器
.E:read-only伪类选择器用来指定元素处于只读状态时的样式。
.E:read-write伪类选择器用来指定当元素处于非只读状态时的样式。
在Firefox浏览器中,需要写成“-moz-read-only”或“-moz-read-write”的形式
<style>
p::selection{
background:red;
color:#fff;
}
p::-moz-selection{
background:red;
color:#fff;
}
input[input="text"]::selection{
background:gray;
color:#fff;
}
input[input="text"]::-moz-selection{
background:gray;
color:#fff;
}
td::selection{
background:green;
color:#fff;
}
td::-moz-selection{
background:green;
color:#fff;
}
</style>
</head>
<body>
E::seleciton伪类选择器的使用示例,在该示例中分别给出了一个P元素,一个文本框控件以及
一个表格。当P元素处于选中状态时,被选中文字变成红色。当文本框控件处于选中状态时,被选中
文字变成货色;当表格处于选中状态时,被选中文字变成绿色。
<p>这是一段测试文字。</p>
<input type="text" value="这是一段测试文字。"/><p/>
<table border="1"cellspacing="0" cellpadding="0">
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
<tr>
<td>测试文字</td>
<td>测试文字</td>
</tr>
显示如下:
</body>
E:invalid伪类选择器与E:valid伪类选择器
E:invalid伪类选择器来指定,当元素内容不能通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素规定格式
(例如通过使用type属性值为email的input元素来限定元素内容必须为有限的email格式)时的样式
E:valid伪类选择器用来指定,当元素内容通过HTML5通过使用元素的诸如required,pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过
使用type属性值为email的input元素来限定元素内容必须为有效的email格式)时的样式。
<style>
input[input="text"]:invalid{
background-color:red;
}
input[input="text"]:valid{
background-color:white;
}
</style>
</head>
<body>
<form>
<p>请输入任意文字:<input type="text" required></p>
</form
E:required伪类选择器与E:optional伪类选择器
E:required伪类选择器用来指定允许使用requited属性,且已经指定了required属性的input元素
、select元素以及textarea元素的样式
E:optional伪类选择器用来指定允许使用required属性,且未指定required属性的inpu元素、select
元素以及textarea元素的形式。
如下使用两个输入框,不对输入住址的文本框指定required属性。同时通过E:required伪类选择器指定的
输入姓名的文本框边框为红色,宽度为3px.通过E;optional伪类选择器指定用于输入住址的文本框边框为黑色, 宽度为1px
<style>
input[type="text"]:required{
border-color:red;
border-width:3px;
}
input[type="text"]:optional{
border-color:black;
border-width:1px;
}
</style>
</head>
<body>
<form>
姓名:<input type="text" required placeholder="必须输入姓名"/><br/>
住址:<input type="text"/>
</form>
E:in-range伪劣选择器与E:out-of-range伪类选择器:
E:in-range伪类选择器用来指定当元素的有效值被指定在一段范围之内(通常通过min属性值与max属性值
来限定),且实际输入值在改范围内时使用的样式
E:out-of-range伪劣选择器用来指定当元素的有效值被限定在一段范围之内(通长通过min属性值与max属性值
来限定),但实际输入值在改范围之外时使用的样式
示例页面中
<style>
input[type="numbaer"]:in-range{
background-color:white;
}
input[typr="number"]:out-of-range{
background-color:red;
}
</style>
</head>
<body>
<form>
请输入1到100之内的数值:<input type=number min="0" max="100">
</form>
通用兄弟元素选择器:
<子元素>~<子元素之后的同级兄弟元素{
//指定样式
}
该示例中对所有的div元素之后的,与div元素处于同级的P元素指定其背景色为绿色,但是对div元素内部的P元素的背景色不做指定。
<style>
div~p{
background-color:#00ff00;
}
</style>
</head>
<body>
<div style="width:733px;border:1px solid #666;padding:5px;"></div>
<div>
<p>P元素为div元素的子元素</p>
<p>P元素为div元素的子元素</p>
</div>
<hr/>
<p>P元素为div元素的兄弟元素</p>
<p>P元素为div元素的兄弟元素</p>
<hr/>
<p>P元素为div元素的兄弟元素</p>
<hr/>
<p>p元素为div元素的子元素</p>
<hr/>
<p>p元素为div元素的兄弟元素</p>
</body>