css第一种直接在<head>中写css样式
<style type="text/css">
#id{
color: red;
}
第二种重新定义一个css文件
image.png
在HTML中调用（直接在head中调用）
<link rel="stylesheet" type="text/css" href="common.css"/>
第三种直接在要修饰的中写
<body>
<span id="id1">我是</span>
</body>
第一种按ID选 #ID名称 可以认为是唯一标识，类似主键，一个页面里不允许有重复的id
第二种按类class选 .类名 类似于分类。可以是一个元素一类，也可以多个元素一类
第三种按标签选 标签名 span input p img
优先级 ： id > class > 标签
<span id="id01">覆盖法人</span><br>
<span class="content">覆盖法人</span><br>
<span>覆盖法人</span><br>
后代选择器 用空格分隔
ul ul ul li{
color: red;
}
`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器 用空格分隔 */
ul ul ul li{
color: red;
}
ol li{
color: #00FFFF;
}
</style>
</head>
<body>
<h1>东软睿道学习平台</h1>
欢迎来到东软睿道学习平台，这里将为您提供丰富的学习内容。
<ul>
<li>网页制作</li>
<ul>
<li>使用Dreamweaver制作网页</li>
<li>使用CSS布局和美化网页</li>
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
<li>使用JavaScript制作网页特效</li>
</ul>
<li>平面设计</li>
<ol>
<li>美术基础</li>
<li>使用Photoshop处理图形图像</li>
<li>使用Illustrator设计图形</li>
<li>制作Flash动画</li>
</ol>
</ul>
</body></html>
交集选择器 ## 两种条件同时满足
两种选择器直接并列书写，中间没有任何分隔符
<style type="text/css">
p.haha{
color: #8A2BE2;
}
并集选择器 ##用逗号分隔
p,span{
color: red;
}
</style>
通配选择器
- 选择所有
E>F 子选择器 （儿子,直接子类 ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1> span{
color: #8A2BE2;
}
</style>
</head>
<body>
<h1>This is a <span>important</span><p><span>p---------important</span></p> heading</h1>
</body>
</html>
效果：
image
试着将大于号改为空格试试效果
E+F 相邻 紧挨着e的f元素 （第一个兄弟）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#id1+p{
color: red;
}
</style>
</head>
<body>
<p id="id1">11111111</p>
<p>22222</p>
<p>333333</p>
<p>444444</p>
</body>
</html>
image.png
E~F 通用选择器 E后面所有的F （所有兄弟）
image.png
伪类选择器
动态伪类选择器（掌握 一般用在链接,指定链接在不同时机下的样式，比如说链接被点击前，鼠标悬停时，被激活时，被点击后等等）
E：link 链接没有被访问过
E：visited 链接被访问过
E：active 激活时 从悬停到释放之间，按往鼠标不翻译 (按住的瞬间）
E：hover 悬停
E：focus 获取焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{color: blue;text-decoration: none}
a:hover{color: chartreuse}
a:visited{color: brown}
a:active{color: red}
</style>
</head>
<body>
<a href="#" target="_blank">测试伪类</a>
</body>
</html>
UI元素伪类选择器
E:checked 匹配用户界面上处于选中状态的元素E(input type=radio/ checkbox)
E:enabled 匹配用户界面上处于可用状态的元素
E:disabled 匹配用户界面上处于禁用状态的元素
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户界面(UI)元素状态伪类选择符 checked选择器-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被选中了";}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
网友评论