频道栏目
首页 > 资讯 > HTML/CSS > 正文

CSS的三种基础选择器介绍

18-05-24        来源:[db:作者]  
收藏   我要投稿

CSS 选择器的作用是找出某类元素,以便对这类元素设置样式。

CSS 的基础选择器:

标签选择器

类选择器

ID 选择器

1. 标签选择器

一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。

标签选择器(名称:<>内的关键字,选中:所有这一标签里面的内容)

<!DOCTYPE html>  
<html lang="zh-cn">  
  
<head>  
    <meta charset="UTF-8">  
    <title>Example</title>  
    <style type="text/css">  
        /*标签选择器*/  
        p {  
            color: red;  
        }  
    </style>  
</head>  
  
<body>  
  
    <a href="http://www.baidu.com">百度</a>  
    <p>文本内容</p>  
    <p>文本内容</p>  
    <span>文本内容</span>  
</body>  
  
</html>  

2. 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式,类选择器可以单独使用,也可以与其他元素结合使用。类选择器前面有一个“.”。

class选择器(名称:以点开头的自定义名称,选中:所有 class="类名" 的内容,可以重复使用)

【注】 只有适当地标注文档后,才能使用类选择器,所以使用该选择器之前通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。

类选择器(Class选择器)根据类名来选择,而这个类名是自定义的。

<!DOCTYPE html>  
<html lang="zh-cn">  
  
<head>  
    <meta charset="UTF-8">  
    <title>Example</title>  
    <style type="text/css">  
        /*类选择器*/  
        .text {  
            color: red;  
        }  
    </style>  
</head>  
  
<body>  
    <p class="text">文本内容01</p>  
    <p>文本内容02</p>  
</body>  
  
</html>  

3. Id 选择器

ID 选择器(名称:以#开头的自定义名称,选中:所有 id="id名" 的内容,不可重复使用)

<!DOCTYPE html>  
<html lang="zh-cn">  
  
<head>  
    <meta charset="UTF-8">  
    <title>Example</title>  
    <style type="text/css">  
        /*ID选择器*/  
        #text {  
            color: red;  
        }  
    </style>  
</head>  
  
<body>  
    <p id="text">文本内容01</p>  
    <p>文本内容02</p>  
</body>  
  
</html>  
相关TAG标签
上一篇:说说为什么应该使用transform来替代top
下一篇:react中的逆向传输流实例讲解
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站