文档章节

CSS中的选择器之类选择器和id选择器

任平生7887
 任平生7887
发布于 2017/08/03 00:20
字数 487
阅读 5
收藏 0

##1.css中的选择器:

1.类选择器,又叫class选择器
2.id选择器
3.html元素选择器(又叫标签选择器)
4.通配符选择器
5.伪类选择器
6.组合选择器(多元素选择器,子元素选择器,后代选择器)

简单来说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用

选择器的名称命名规范: 一般使用中划线形式:xxx-yyy,一般是小写字母

##2.类选择器 基本语法:

.类选择器名称{
CSS属性:属性值;
CSS属性:属性值;
}

一般来说,类选择器是提供给多个html元素来使用的.

实例代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span-news{
            font-weight:bold;
            background-color:pink;
            color:black;
        }
    </style>
</head>
<body>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
</body>
</html>

刷新浏览器后显示效果如下:

##3.id选择器 基本语法:

#id选择器名称{
CSS属性:属性值;
CSS属性:属性值;
}

在类选择器代码的基础上增加一行字体,并设置其自己的样式.

实例代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .span-news{
            font-weight:bold;
            background-color:pink;
            color:black;
        }
        #span-news-tb{
            font-weight:bold;
            font-size:25px;
            background-color:silver;
        }
    </style>
</head>
<body>
<span class="span-news">新闻一</span>
<span class="span-news">新闻二</span>
<span class="span-news">新闻三</span>
<span class="span-news">新闻四</span>
<span class="span-news">新闻五</span>
<hr>
<span id="span-news-tb">这是一个比较重要的新闻</span>
</body>
</html>

刷新浏览器后显示的效果:

关于id选择器的一些说明 :

    1.一般来说,id选择器是提供给某一个html元素来使用
    2.当不确定时,有多个html元素来使用该样式时,请使用类选择器.

© 著作权归作者所有

任平生7887
粉丝 2
博文 78
码字总数 112264
作品 0
海淀
私信 提问
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
CSS 从零开始(一)初识CSS

版权声明:转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 https://blog.csdn.net/powertoolsteam/article/details/89334612 什么是CSS CSS...

powertoolsteam
04/16
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
转------详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候。这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起...

aiaiaiya
2015/08/20
0
0
CSS选择器、优先级与匹配原理

1 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而 在标签内写入style=""的方式,...

上赶的大老鼠
2013/12/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何远程调试部署在CloudFoundry平台上的nodejs应用

网络上关于如何本地调试nodejs应用的教程已经很多了,工具有Chrome开发者工具,Visual Studio Code,和nodejs周边的一些小工具等等。 在实际情况中,我们可能遇到本地运行良好,但是部署到C...

JerryWang_SAP
21分钟前
0
0
微信扫码访问网站调用默认浏览器打开如何实现?

我们在微信内分享链接或二维码的时候,我们会发现我们的网站是可以在浏览器里正常打开的,但就是不能在微信里打开,提示 “ 已停止访问该网页 ”,无论是聊天框也一样。说是系统检测到您的网...

明尼苏达哈士奇
29分钟前
1
0
一份Java程序员进阶架构师的秘籍,你离架构师还差多远

一、如何定义架构师 Java架构师,首先要是一个Java程序员,熟练使用各种框架,并知道它们实现的原理。jvm虚拟机原理、调优,懂得jvm能让你写出性能更好的代码;池技术,什么对象池,怎么解决并...

我最喜欢三大框架
37分钟前
0
0
想说再见不容易,win7最新市占率依然超36%

微软正在通过努力让Windows 7用户升级至Windows 10,不过从目前的市占率来看,他们还是要加把劲了。 据最新的市场份额看,Windows 10在本月的市场份额有所提升,从43.62%增长到44.10%。另一...

linuxCool
49分钟前
4
0
SQL的优化

对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 对查询进行优化,要尽量避免全表扫描,首先应考虑在进行条件判断的字段上创建了索引。 应尽量避...

咸鱼-李y
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部