css选择器
派生选择器
根据其元素在其上下文关系来定义样式
<style type="text/css">
body{
font-size:12px;
color:red;
}
</style>
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。
id选择器
<html>
<head>
<meta charset="utf-8" />
<link href="10.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p>
<strong>p标签hello</strong>
</p>
<ul>
<li>
<!--如何给li标签单独加样式，派生 li strong{属性： 属性值}-->
<strong>li标签hello</strong>
</li>
</ul>
</body>
</html>
li strong {
color:red;
}
strong{
color:blue;
}
id选择器#
<html>
<head>
<meta charset="UTF-8" />
<link href="11.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p id="pid">hello css</p>
</body>
</html>
#pid {
color:red}
<html>
<head>
<meta charset="UTF-8" />
<link href="11.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p id="pid">hello css
<a href="#">欢迎来到</a></p>
<div id="divid">这是div
<p>这是第一个div</p></div>
</body>
</html>
#pid {
color:red}
#pid a{
color:pink;
}
#divid p{
color:green;
}
派生选择器和ID选择器同时使用
类选择器.
<html>
<head>
<meta charset="UTF-8" />
<link href="12.css" type="text/css" rel="stylesheet" />
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p class="pclass">这是一个class效果
<a href="#">这是一个链接</a></p>
<div class="divclass">这是一个div的class</div>
</body>
</html>
.pclass{
color:blue;
}
.pclass a{
color:pink;
}
.divclass{
color:red;
}
属性选择器
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
[title]{color:green;}[title=te]{color:red;} </style>
<meta name="generator"
content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>
<p title="t">属性选择器</p>
<p title="te">属性aa选择器</p>
</body>
</html>
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
<style type="text/css">
.first>span{border:1px solid red;}
</style>
<p class="first">三年级时，<span>我还是一个<span>胆小如鼠</span>的小女孩</span>，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
把文字内容的“我还是一个胆小如鼠的小女孩”这一句话加入红色边框。效果图如下：