九九学前端随记10"/>
小九九学前端随记10
选择器
标签选择器
标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签选择器</title>
<style type="text/css">
h1{
font-weight:normal;
color:red;
}
</style>
</head>
<body><h1>篮球</h1>
</body>
</html>类选择器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类选择器</title>
<style type="text/css">
.setRed{color:red;
}
</style>
</head>
<body><h1><span class="setRed">篮球</span>></h1>
</body>
</html>ID选择器
与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ID选择器</title>
<style type="text/css">
#setRed{color:red;
}
</style>
</head>
<body><h1><span id="setRed">篮球</span></h1>
</body>
</html>子选择器
大于符号(>),用于选择指定标签元素的第一代子元素。如：.food>li{border:1px solid red;}。这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择器</title>
<style type="text/css">
.food>li{border:1px solid red;}
</style>
</head>
<body>
<h1>食物</h1>
<ul class="food"><li>水果<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜<ul><li>白菜</li><li>油菜</li><li>卷心菜</li></ul></li>
</ul>
</body>
</html>包含（后代）选择器
子选择器的大于符号(>)作用于元素的第一代后代，包含选择器的空格作用于元素的所有后代。
通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}。
伪类选择符
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}。这一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}。
更多推荐
小九九学前端随记10
发布评论