css选择器笔记

原创 PHP笔记  2017-03-22 17:27  阅读 897 views 次

在html文档中,有无数的html元素,如果我们要对其中一个或多个进行样式的改变,这首先就需要选定它。css选择器就是用来选择要操作的html元素,它的用法非常简单,在笔记:css基础语法笔记就记录过。

css选择器又分为很多中,常见的有:id选择器、类选择器、标签选择器、全局选择器、组合选择器等。

1、id选择器

id选择器可以选中在html文档中标有特定id的html元素,从而给该元素设置特定的样式。在html文档中,是以id属性来设置id;在css中,id选择器以 "#" 号来定义。

格式:

......
<body>
<style type="text/css">
#特定值{
属性:属性值;
......
}
</style>
<div id="特定值">元素内容</div>
</body>
......

实例:

<body>
<style type="text/css">
#i{
color:#EE6AA7;
font-size:30px;
}
</style>
<div id="i">id选择器示例</div>
</body>

运行结果:

2、class类选择器

class选择器可以选中一个或多个html元素,从而给这些元素相同的样式。在html文档中,是以class属性来设置类;在css中,以"."来声明类选择器。

在html文档:

<标签 class=”类名”>元素内容</标签>
<标签 class=”类名”>元素内容</标签>
......

在css样式表中:

.类名{
......
......
}

 

3、标签选择器

标签选择器可以选择某个或多个标签元素,从而给这些元素相同的样式。在html文档中,标签是直接出现的;在css中,直接写标签就能声明标签选择器。

在html文档:

<标签>元素内容</标签>
<标签>元素内容</标签>
......

在css样式表中:

标签{
......
......
}

4、全局选择器

全局选择器有好几种叫法:通配选择器、通用选择器等,是用来选择所以的html元素,一般用来初始化。直接在css样式表中用*号来声明。

格式:
*{
......
......
}

5、组合选择器

组合选择器是用来组合其它选择器选中的元素,选择器之间以”,”好分割。

格式:

选择器1,选择器2,......{
......
......
}

综合实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器_PHP笔记</title>
</head>
<body>
<style type="text/css">
*{/*全局选择器*/
text-decoration:underline;
}
#i{ /*id选择器*/
color:#EE6AA7;
}
.c{/*类选择器*/
color:#E066FF;
}
span{/*标签选择器*/
color:#A2CD5A;
}
#i,.c,span{/*组合选择器*/
font-size:30px;
}
</style>
<div id="i">id选择器</div>
<p class="c"><span>标签选择器</span>类选择器</p>
<p class="c">类选择器</p>
<div>全局选择器</div>
</body>
</html>

运行结果:

 

非常相关
本文地址:https://www.ggbiji.com/css-selector.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情