html 5 css 选择器-优快云博客

本文介绍了CSS选择器的基础使用方法，包括选择器分组、继承、派生标签、id选择器及类选择器等，并通过具体的HTML代码示例展示了如何应用这些CSS规则。

new.css

/*选择器分组*/
h1,h2,h3{
color: orange;
font-size: 21px;
}
h1{
/* 如果值大于1个单词，需要加上引号*/
/* 属性大于1个之后，属性之间用分号隔开*/
font-size: 14px;
color: red;

}
/*继承*/
body{
margin: 110px;
/* font-size: 144px;*/
color: yellow;
}
/*派生标签*/
li strong{

color: blue;
font-size: 44px
}
strong{
color: black
}

/*id 选择器*/
#pid{
color: green;
}
/*<p id="piid"><a>这里面的内容</a></p>*/
/*id 与派生一起用*/
#piid a{
font-size: 31px;
color: gray;
background-color: red;
}
/*类选择器*/
.pclass{

color: red;
background-color: blue;

}
/*类选择器加派生选择器配合*/

.pclass a{

font-size: 42px;
color: green
;
background-color: orange;
}

new.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<link href="new.css" type="text/css" rel="stylesheet">
<style type="text/css">
/* 属性选择器*/
[title]{
color:yellow;

}
[title=te]{

color: red;

}

</style>
</head>

<!--
<frame src="a.html" frameborder="0" width="800px" height="800px"></frame>

</frameset>
-->

<body>
<p id="pid">id p样式</p>

<h1>h1中的内容</h1>
<h2>h2中的内容</h2>
body中的内容

<ul>
<li><strong>li标签下strong</strong></li>

<p id="piid"><a>p中a 派生</a></p>

</ul>
<p class="pclass">pclass</p>
<b class="pclass"><a>p类选择器 a加派生选择器配合</a></b>
<p title>title属性</p>
<p title="te">title="te"</p>
</body>
</html>

转载于:https://www.cnblogs.com/xiezefeng/p/4494091.html