小九九学前端随记10

最新推荐文章于 2018-07-14 11:24:53 发布

青春小九九

最新推荐文章于 2018-07-14 11:24:53 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_30203943/article/details/81011784

版权

选择器

标签选择器

标签选择器其实就是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>