<1>
获取ul下的第一个，和最后一个li元素
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
#meun ul li:first-child { /*获取ul下的第一个li元素 （与上面的是一样的）*/
color: red;
}
#meun ul li:last-child { /*获取ul下的最后个li元素*/
color: blue;
}
#meun ul li:nth-child(3) { /*获取ul下的第三个li元素*/
color: yellow;
}
</style>
</head>
<body>
<div>
<div id="meun">
<ul>
<li>上海</li>
<li>北京</li>
<li>重庆</li>
<li>天津</li>
<li>广州</li>
<li>深圳</li>
</ul>
</div>
</div>
</body>
</html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.11.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// $("select").select().css("background", "Red");设置select选择下拉框，选中项的背景颜色
// var selectVal=$("select").select().val(); //获取select选择下拉框选中项的值
})
</script>
<style type="text/css">
/* 同一个名字的样式，根据不同控件显示不同是样式【注意：input后无空格】*/
input.classA{ background-color:Yellow} /*设置class属性值为classA的<input>标签的样式*/
div.classA{ width:120px; height:20px; border:1px solid Black} /*设置class属性值为claaA的<div>标签的样式*/
/*为控件的子元素设置样式。【注意：为子元素设置样式，中间用空格隔开】*/
div .classB{ color:Red} /*设置div标签下，class属性值为classB的元素样式【注意：div与.classB直接有空格隔开】*/
div input{ background-color:Red}/*设置 <div>标签下的<input>标签的样式*/
div p.classC{ background-color:Yellow} /*设置<div>标签的子元素class属性值为classC的元素样式*/
/*组合选择器，同时为多个标签设置样式【各标签之间用逗号隔开】*/
H1,H2,div,span{ color:Blue} /*同时为<h1><h2><div><span>这几个标签设置样式*/
div li{ color:Yellow}/*选择div下所有的li元素*/
#city > li{ color:Red} /* 选择id属性值为city的元素下直接的li元素*/
*[id]{ font-size:100px} /*设置页面具有id属性的元素的样式（*代表所有元素）*/
p[id]{ background-color:Teal} /*设置具有id属性的的<p>元素的样式*/
P[class=classE]{ color:Gray} /*设置class属性值为classE的<p>元素的样式*/
/*------------------------------------------------------------*/
/*div.d1的意思是：选择id属性值为d1的这个<div>元素。#d2.d1的意思是：选择id属性值为d2,class属性值为d1的这个元素。而.d1.d2的意思就很难理解。总以为一个元素是不能设置多个class的。其实是可以的，比如：<div class="classE classF">。*/
.classE.classF{ color:Yellow} /*当同一个元素的class属性中要同时有classE和classF两个类选择器，样式才生效。*/
/*<div class="classE classF">当这个div元素的class="classE classF"的时候，上面那条样式才起作用</div> */
/*------*通配选择符：*{属性：值} 用于定义HTML的所有元素【慎用】------*/
*{ margin:0px; padding:0px;}/*设置页面所有元素的样式; 因为它是针对页面所有元素的，所有它的效率是最低的，不推荐用*/
</style>
</head>
<body>
<!-- ------------------------------------------------>
<input class="classA" type="text"/>
<div class="classA"></div>
<!-- ------------------------------------------------>
<div>
<p class="classB">BBBBB</p>
<p class="classD">DDDDD</p>
</div>
<!-- ------------------------------------------------>
<div>
<input type="text" />
<p class="classC">CCCCC</p>
</div>
<!-- ------------------------------------------------>
<h1>H1</h1>
<h1>H2</h1>
<div>DIV</div>
<span>SPAN</span>
<!-- ------------------------------------------------>
<div>
<ul id="city">
<li>湖南
<ul>
<li>永州</li>
<li>长沙</li>
</ul>
</li>
<li>广东</li>
<li>北京</li>
</ul>
</div>
<!-- ------------------------------------------------>
<div class="classE classF">EEEFFFF</div>
<!-- ------------------------------------------------>
<select>
<option value="中国">中国</option>
<option value="美国" selected="selected">美国</option>
<option value="德国">德国</option>
</select>
<!-- ------------------------------------------------>
</body>
</html>
<2>
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>登陆界面</title>
<!-- <link type="text/css" rel="Stylesheet" href="为选择器.css" />-->
<style type="text/css">
/* 标签选择器 这么定义后，以下所有的input标签都会是这个样式了 */
input{ background-color:Black; color:Red }
/* 组合选择器： 同时为多个标签设置一个样式，这里同时为<p><input><H1>标签设置一个样式 */
p,input,H1{ color:Blue; font-family:@华文琥珀}
/* class选择器 :使用方法，自己定义一个class名字，然后在前面加一个 "." 用的时候在标签里写 class="className"就可以了。也可以一个标签同时拥有多个选择器：例如：class="className1 className2" */
.ni{ font-size:large; font-family:Arial; color:Red }
.wo{ border-color:Red ; border-style:dashed}
/* 标签+class选择器 */
p.ca{ text-align:right;color:Red } /*--设置<P>标签下class属性值为ca的样式--*/
div.ca{ font-style:italic} /*--设置<div>标签下class属性值为ca的样式--*/
/* id选择器 ：使用方法，在id(suername就是标签的id)前面加# */
#username{ font-size:xx-large} /*设置页面所有标签id属性值为username的样式*/
/* 标签+id选择器 */
p#t1{ background-color:Red}/*设置id属性值为t1的<p>标签的样式*/
div#t1{ background-color:Red}/*设置id属性值为t1的<div>标签的样式*/
/*--注意上下两条的代码的区别，上面是标签后面没有空格，二下面两条是标签后面有空格--*/
p #t1{ background-color:Gray} /*设置<p>标签下id属性值为t1的元素样式*/
div #t1{ color:Red} /*设置<div>标签下id属性值为t1的元素样式*/
/* 关联选择器 ：设置<p>标签里面的<u>标签的样式 */
p u{ color:Red; font-family:@华文彩云; font-size:xx-large}
div input{barder:5px solid Red} /*设置<div>标签下的<input> 标签的样式*/
/* 伪选择器：为标签的不同状态设定不同的样式 。一般用于超链接（详情请看最下方的图片） */
a:visited{ text-decoration:none}
a:active{ text-decoration:none}
a:link{ text-decoration:none}
a:hover{ text-decoration:underline}
</style>
</head>
<body >
<!--标签选择器-->
<input type="button" value="提交" οnclick="location='http://www.baidu.com'" />
<!--class选择器----class="ni wo"表示当前标签同事拥有ni，wo两种样式-->
<p class="ni wo">这是class选择器1</p>
<div class="wo">这是class选择器2</div>
<!--标签+class选择器-->
<p class="ca">这是标签+class选择器1</p>
<div class="ca">这是标签+class选择器2</div>
<!--id选择器-->
<!--<p id="username">这个是id选择器</p>-->
<input id="username" type="button" value="提交" onclick ="location ='http://www.hao123.com'"/>
<!--标签+id选择器 -->
<p id="t1">p标签+id选择器测试</p>
<div id="t1">div标签+id选择器测试</div>
<!--关联选择器-->
<p>中国<u>美国</u>俄罗斯</p>
<!--组合选择器-->
<p>这里是组合选择器测试</p>
<input type="text" />
<h1>这里是组合选择器测试</h1>
<!--伪选择器-->
<a href="http://www.hao123.com" >好123</a>
<a href="http://www.hao123.com" >好123</a>
<a href="http://www.hao123.com" >好123</a>
<a href="http://www.hao123.com" >好123</a>
</body>
</html>在另一个页面调用样式表（样式表.css）页面的方法
<head>
<link type="text/css" rel="Stylesheet" href="伪选择器.css" />
</head>伪选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link
{
color: Red; /* 未访问的链接 */
}
a:visited
{
color: Yellow; /* 已访问的链接 */
}
a:hover
{
color: Blue; /* 鼠标移动到链接上 */
}
a:active
{
color: Green; /* 选定的链接 */
}
</style>
</head>
<body>
<a href ="HTMLPage1.htm" target="_blank">fnidnfd</a>
</body>
</html>
E+F选择器 (选择E元素后面的那一个同级F元素，注意：它只选一个元素)
<html>
<head>
<title></title>
<style type="text/css">
div+p{ /*选中紧随着div元素之后的那一个同级p元素； 注意：“紧随”“之后”“那一个”关键词； 其实就是选中挨着div元素后面的那个一个同级p元素。如果div元素后面有两个同级别的p元素，则只选择第一个*/
font-size:1cm;
color:red;
}
</style>
</head>
<body>
<p>pppppppppppppp</p>
<div>div div div div</div>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<b>bbbbbbbbbbbbbb</b>
<p>pppppppppppppp</p>
</body>
</html>
E~F选择器（选择E元素后面的的所有同级F元素）
<html>
<head>
<title></title>
<style type="text/css">
div~p{ /*选中div元素后面的所有同级p元素*/
font-size:1cm;
color:red;
}
</style>
</head>
<body>
<p>pppppppppppppp</p>
<div>div div div div</div>
<p>pppppppppppppp</p>
<p>pppppppppppppp</p>
<b>bbbbbbbbbbbbbb</b>
<p>pppppppppppppp</p>
</body>
</html>
属性选择器
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div[class] { /*将具有class属性的div标签的颜色设为红色*/
color:red;
}
div[class=pox] {
color:yellow; /*将class属性值为pox的div标签的颜色设为黄色*/
}
div[class~=is] { /*如果div标签的class属性的值包含多个空格分隔符（例如： class="this is a test"），并且其中一个值为is，那么就将这个div的颜色设为蓝色*/
color: blue;
}
div[lang|=zh] { /*如果div标签的lang属性包含多个连字号分隔符（例如：lang="zh-cn"），并且其中一个值以zh开头，那么就将这个div的背景颜色设为鲜绿色*/
background-color: #b6ff00;
}
div[class^=da] { /*将class属性的值是以da开头的div元素的背景颜色设为浅蓝色*/
background-color: #0094ff;
}
div[class$=wo] { /*将class属性的值是以wo结尾的div元素的背景颜色设为紫色*/
background-color:#b200ff;
}
div[class*=tt] { /*将class属性的值包含tt的div标签的背景颜色设为粉色*/
background-color: #ff00dc;
}
</style>
</head>
<body>
<div class="box">北京</div>
<div class="pox">上海</div>
<div class="this is a test">深圳</div>
<div id="abc">长沙</div>
<div lang="zh-cn">中国</div>
<div lang="en-us">美国</div>
<div class="data">广州</div>
<div class="wowo">天津</div>
<div class="pptt">永州</div>
</body>
</html>
1647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
