CSS选择器（入门级别）
##1.元素选择器
@代码举例
<head>
<style type ="text/css">
div{color:red;}
p{color:green}
</style>
</head>
<body>
<div>内容\</div>
<p>内容</p> <-!p处内容变为绿色->
...
</body>
###@注意
- div{width:100px;}------元素符号（选择符）{属性：属性值；}
- 选择选择符所指示的元素，如<p></p>,<div></div>等等
##2.id选择器
###@代码举例
<head\>
<style type ="text/css">
block{color:red;}
</style>
</head>
<body>
<div id="block">内容</div>
<p class="block">内容</p>(id选择器中不该出现）
...
</body>
###@注意
- id类似一个标识，对该id下的块或元素进行外观修改
- 同一个页面中，不允许出现两个相同的id
- \id名前必须加上前缀“#”同一页面中可以出现多个相同的
##3.class选择器
###@代码举例
<head>
<style type ="text/css"\>
.block{color:red;}
</style\>
</head>
<body>
<div class="block">内容\</div>
<p class="block">内容\</p>
...
</body>
###@注意
- class前面必须有前缀英文 " . ";
- 不同元素可以有相同的class
- 同一页面中可以出现多个相同的class
##4.后代选择器
###@代码举例
<head>
<style type ="text/css">
#father1 div{width:100px;length:100px;}
#father2 span{color:green;}
</style>
</head>
<body>
<div id="father1">
<p>内容1</p>
<div>内容2</div> (只有本行有样式效果）
</div>
<div id="father1">
<span\>内容1</span> (只有本行有样式效果）
<div\>内容2</div>
</div>
...
</body>
###@注意
- father1 div{}表示id为father1元素下的div元素（同理）
- 后代选择器即选择元素内部中某一元素的所有元素
- 父元素与后代元素必须用空格隔开
##5.群组选择器
###@代码举例
> <head>
> <style type ="text/css">
> h3,div,p{color:red;}
> </style>
> </head>
> <body>
> <h3>内容</h3>
> <div>内容</div>
> <p>内容</p>
> <span>内容</span>
> ... (h3,div,p元素color为red,span元素为默认）
> </body>
###@注意
- 也可#id_tag,.class_tag,元素{…},表示选中id为id_tag，class为class_tag，以及指定元素
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
