1.1元素选择器
用标签名来作为选择器,选中所有相应的元素<ID0CTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type-"texts">
div{
font-size: 30px;
font-family:楷体;
}
</sty1e>
</head>
<body>
<div>元素选择器</div>
<p)元素选择器</p>
<p>元素选择器</p>
<p>元素选择器</p>
</body>
</html>
1.2类选择器
根据class的属性来选择元素,样式定义为: .className{ xxxxxxx}<htnl>
<head>
<meta charset-"utf-8">
<title></title>
<style type="text/css">
.big(
width: 200x;
height: 200px;
background-color: blue;
.small{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
cdiw class="big"></div)
<diw class"small"></div>
<diw class-"big"></div>
<div class="small"></div>
<d1w class="big "></div/
cdiv classe="small"></div>
<diw class="big"></div>
</body>
</html>
1.3 ID选择器
根据id名来选择元素,样式定义为: #idName{xxxxxxxxx}<html>
chead>
cmeta charsete="utf-8">
<title></title>
<style type="text/css">
#big{
width: 288px;
height: 288pxi
background-color: blue;
{
#small{
width: 288px;
height: 208px;
background-color: red;
}
</style>
</head)
<body)
ediv id="big"></div>
ediv id="small")</div>
tdiv id="big")</div>
cdiv id= "small"></div>
</body>
</html>
1.4属性选择器
选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^ =value] 匹配属性值以指定值开头的每个元素。
[attribute$ =value] 匹配属性值以指定值结尾的每个元素。
[attribute* =value ] 匹配属性值中包含指定值的每个元素。
例:[title*=’d’]:选择title值中包含d的元素