您的位置：首页 > Web前端 > CSS

CSS 选择器

2017-05-26 00:12 162 查看

Html 由N个标签(节点、元素、标记)组成。

html的css选择器有如下几种:

标签选择器:直接在html中的head中通过style标签定义我们在html标签中的样式.

.....
<head>
.....
<style>
p{
//在这里定义P标签的样式
}
</style>
</head>
<body>
<p>.....</p>
</body>

类选择器:在标签中通过class=”xxxx”,来指定标签的样式.

**

**注:css文件如果定义在外面,此时就需要在html的head标签中通过link标签来引入我们的css文件**
-----------------------------------------------------

**
......
//index.html
<div class="content">

</div>

//index.css
.content{
//定义div标签的样式
}
.....

id选择器:通过给标签定义id,从而来给标签设置样式;和类选择器一样,只不过就是需要将div的标签中的class换成id=”content”,然后在css文件中不是通过.content设置,而是通古偶#content来设置样式.

群组选择器: 当一个html中,有两个或者以上的标签在设置样式的时候度一样,此时我们就可以不去写两份一样的代码,通过群组选择器就可以达到这样我们想要的效果.

......
<head>
p,h1,h2{
//定义公共的属性,例如
color:red;
}
</head>
<body>
<p>这是字段</p>
<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
</body>
......

后代选择器:也称作为派生选择器,通过依据元素在其位置的上下文关系来定义.这样我们就能够更精准的去控制我们标签的样式.

index.html
.....
<body>
<div class="top">
<p>xxxx</p>
</div>
</body>
.....

index.css
.top p{
// 定义样式 TODO
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航