元素按显示方式分为哪几种, 并举例, 正确描述它们
CSS是什么? 它的主要作用是什么?
什么是CSS选择器,它的样式声明是哪二部分组成?
举例演示CSS简单选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单选择器</title>
<style>
p{
color: red;
}
p[class]{
color: blueviolet;
}
p[class="s1"]{
color: lightblue;
}
.s1{
background-color: aqua;
}
#001{
background-color: yellow;
}
.s2, h2{
background-color: aquamarine;
}
body * {
font-size: 2rem;
}
</style>
</head>
<body>
<p>iPhone</p>
<p class="s1">小米</p>
<p>华为</p>
<p class="s2" id="001">魅族</p>
<h2>黑莓</h2>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示CSS上下文选择器(全部)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
section h2{
color: greenyellow;
}
section>h2{
color: blue;
}
#item + *{
background-color: green;
}
#item ~ *{
background-color: red;
}
</style>
</head>
<body>
<section>
<div>
<h2 id="item">手机</h2>
<h2>电脑</h2>
<h2>pad</h2>
</div>
<h2>打印机</h2>
<h2>传真机</h2>
</section>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示常用CSS结构伪类选择器(不少于四种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
ul > :nth-child(2){
background-color: lightblue;
}
ul:first-child > :nth-child(2){
background-color: lightcoral;
}
ul:first-child > :last-child{
background-color: yellow;
}
ul:first-child > :last-child li:nth-child(n+1){
background-color: blueviolet;
}
ul:first-of-type > :last-of-type > p:nth-of-type(n+1){
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li>
<h3>手机</h3>
<ul>
<li>iPhone</li>
<li>华为</li>
<li>小米</li>
</ul>
</li>
<li>
<h3>电脑</h3>
<ul>
<li>MacBook</li>
<li>Lenovo</li>
<li>Thinkpad</li>
</ul>
</li>
<li>
<h2>电视</h2>
<p>客厅电视</p>
<ul>
<li>TCL</li>
<li>夏普</li>
<li>熊猫</li>
</ul>
<p>其他电视</p>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
举例演示常用CSS表单伪类选择器(不少于三种)
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单伪类选择器</title>
<style>
input:enabled {
background-color: greenyellow;
}
input:disabled{
background-color: red;
}
input:required{
background-color: blue;
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form action="" method="post">
<p>
<label for="username">用户名:</label>
<input type="username" id="username" name="username" required>
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="不得少于6位">
</p>
<p>
<label for="warning">警告:</label>
<input type="text" id="warning" value="密码错误三次锁定账号" disabled>
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
