大约 5 分钟
选择器
标签,id,类,关联,混合,伪类,属性选择器
<!DOCTYOE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css的选择器</title>
<link href="./two.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--1 标签选择器 -->
<h1>我是h1标签</h1><br/>
<!-- 标签选择器的弊端是符合标签的所有选择器都会生效,符合的标准非常少! -->
<!--2 id选择器 -->
<div id="one">我是div标签</div><br/>
<!-- id属性的值不能以数字开头,可以以字母开头.只能以字母数字和下划线组成,
id必须保证唯一性 -->
<!-- 3class类选择符 -->
<div class="two">我是class标签</div><br/>
<!-- 4关联选择器 -->
<ol id="three">
<li>涵大姐</li>
<li>飞大妈</li>
<li>龙大嫂</li>
<li>
<ul class="four">
<li id="five">龙妹妹</li>
<li>飞美眉</li>
<li>涵小妞</li>
<ul>
</li>
</ol>
<!-- 5混合选择器 -->
<p>鹅鹅鹅,</p><cite>曲项向天歌,</cite><br/><strong>白毛浮绿水,</strong><br/><u>红掌拨清波!</u>
<br/><br/>
<!-- id class 标签都有自己的权重值:分别是100 10 1 -->
<!-- 6伪类选择器 -->
<a href="./one.html">点击看美女</a><br/><br/>
<!-- 7css3中属性选择器 -->
<form action="1.php" method="post">
账号:<input type="text" name="number" value=""/><br/><br/>
地址:<input type="text" name="adrees" value=""/><br/><br/>
年龄:<input type="text" name="age" value=""/><br/><br/>
爱好:<input type="text" name="hobby" value=""/><br/><br/>
姓名：<input type="text" name="xm" value="" /><br/><br/>
</form>
</body>
</html>two.css
/*标签选择器*/
h1{
color:red;
border:2px solid cyan;
}
/*id选择器*/
#one{
color:orange;
}
/*class选择器*/
.two{
color:yellow;
}
/*关联选择器*/
#three li{
color:green;
}
ul.four #five{
color:cyan;
}
/*混合选择器*/
p,cite,strong,u{
color:blue;
}
/*伪类选择器*/
/* 1未访问默认情况下的链接样式 */
a:link{
color:purple;
/* 清除链接文本下化线的样式 */
text-decoration:none;
}
a:hover{
color:pink;
/* 鼠标移入悬停时显示下划线样式*/
text-decoration:underline;
}
/* 鼠标点击链接时的样式 */
a:active{
color:black;
background-color:yellow;
}
/* 链接被访问后的样式 */
a:visited{
color:red;
}
/* css3中的属性选择器 */
/* 1包含type属性的所有input标签 */
input[type]{
color:orange;
}
/* 2包含type属性,且name值为number的input标签 */
input[name='number']{
color:yellow;
}
/* 3包含name属性且name值是以a开头的input标签 */
input[name^='a']{
color:green;
}
/* 4包含name属性且name值是以e结尾的input标签 */
input[name$='e']{
color:cyan;
}
/* 5包含name属性且name值包含y的input标签 */
input[name*='y']{
color:blue;
}css3结构性伪类选择器
示例1
<!DOCTYPE html>
<html>
<head>
<title>css3结构性伪类选择器</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
#news{
width:300px;
height:300px;
border:1px solid red;
}
/*查找到p标签当中的第一个字符，进行样式修饰*/
#news p:first-letter{
font-size:25px;
color:pink;
}
/*查找到p标签当中的第一行文字，进行样式修饰*/
#news p:first-line{
color:blue;
}
</style>
</head>
<body>
<h1>css3结构性伪类选择器</h1>
<div id="news">
<h1>菊花的功效</h1>
<p>菊花是一种植物，具有观赏性，可以入药，可以使用，关键是能清热去火！</p>
</div>
</body>
</html>示例2
<!DOCTYPE html>
<html>
<head>
<title>css3当中的结构性伪类选择器</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
#news{
width:360px;
height:300px;
border:1px solid red;
}
#news #news_list{
/*将列表默认的小图标清除*/
list-style:none;
}
/*找到ul列表中li的第一条*/
#news #news_list li:first-of-type{
color:red;
}
/*找到ul列表中li的最后一条*/
#news #news_list li:last-of-type{
color:blue;
}
/*找到ul列表中唯一的一个p标签(若有多个就不生效了)*/
#news #news_list p:only-of-type{
color:#fc0;
}
</style>
</head>
<body>
<h1>css3当中的结构性伪类选择器</h1>
<div id="news">
<ul id="news_list">
<li>1.印度又开始挑衅中国了，咱们走着瞧！</li>
<li>2.北京现在开启蒸桑拿模式，你感觉到了吗？</li>
<li>3.杨思涵出门一不小心踩到了狗屎上……</li>
<p>杨思涵放了一个p</p>
</ul>
</div>
</body>
</html>示例:3
<!DOCTYPE html>
<html>
<head>
<title>css3中的结构性伪类选择器</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
#news{
width:360px;
height:300px;
border:1px solid red;
}
#news #news_list{
list-style:none;
}
/*ul仅有的一个li子元素生效(多个子元素资源则不生效)*/
#news #news_list li:only-child{
color:red;
}
/*ul列表中指定li子元素的样式修饰*/
/*#news #news_list li:nth-child(1){
color:red;
}
#news #news_list li:nth-child(2){
color:green;
}
#news #news_list li:nth-child(3){
color:yellow;
}*/
/*倒着数ul里表中的li并进行样式修饰*/
/*#news #news_list li:nth-last-child(1){
color:blue;
}
#news #news_list li:nth-last-child(2){
color:green;
}
#news #news_list li:nth-last-child(3){
color:red;
}*/
/*给倒数第一个子元素添加样式*/
#news #news_list li:last-child{
color:#fc0;
}
</style>
</head>
<body>
<h1>css3当中的结构性伪类选择器</h1>
<div id="news">
<ul id="news_list">
<li>1.印度又开始挑衅中国了，咱们走着瞧！</li>
<li>2.北京现在开启蒸桑拿模式，你感觉到了吗？</li>
<li>3.杨思涵出门一不小心踩到了狗屎上……</li>
<!-- <p>杨思涵放了一个p</p> -->
</ul>
</div>
</body>
</html>css3状态伪类选择器
<!DOCTYPE html>
<html>
<head>
<title>css3状态伪类选择器：focus获得焦点时的样式</title>
<meta charset="utf-8" />
<link href="" type="text/css" rel="stylesheet" />
<style>
input:focus{
/*给查找到的元素添加属性修饰会让它显得更炫*/
width:300px;
height:50px;
border:10px dotted pink;
font-size:30px;
color:red;
}
</style>
</head>
<body>
<h1>css3状态伪类选择器：focus获得焦点时的样式</h1>
<form action="1.php" method="post">
姓名：<input type="text" name="uname" value="" />
</form>
</body>
</html>