1.标签选择器:针对的是元素。

<html>
<head>
<style type="text/css">
p{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p id="p1">我会变颜色</p>
<p id="p2">我会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

如果在P元素下面还有其他的元素你也要修饰,你就可以在style 中的p 后面在写元素。

2.id选择器,注意id选择器是唯一的

id选择器以#开头

<html>
<head>
<style type="text/css">
#p1{font:"宋体"; color:#FF0000}

#p2{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p id="p1">我会变颜色</p>
<p id="p2">我会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

3.类选择器:

类选择器以.开头 只要把元素的class="" 就能表现为这种样式了

<html>
<head>
<style type="text/css">

.p1{font:"宋体"; color:#FF0000}
</style>
</head>
<body>
<p class="p1">我会变颜色</p>
<p id="p2">我不会变颜色</p>
<h1>我没有被任何的选择器修饰</h1>
</body>
</html>

html选择器的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. jQuery的61种选择器

    The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...

  3. 05.LoT.UI 前后台通用框架分解系列之——漂亮的时间选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. CSS 选择器及各样式引用方式

    Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样 ...

  5. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  6. 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  8. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  9. 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)

    转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...

  10. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

随机推荐

  1. 业余时间正在开发一个REACT小视频站点

    业余时间正在开发一个REACT小视频站点,数据接口来源于吐槽弹幕网(C站),供C站用户移动端的观看.因现存在移动网络屏蔽C站的关系,最好使用非移动网络进行观看.否则会比较卡,影响用户体验. 站点测试入 ...

  2. 07:urllib与urllib2基本使用

    参考博客:https://blog.csdn.net/chendong_/article/details/51973499 1.1 urllib2发送get请求 # -*- coding:UTF-8 ...

  3. 05: api认证

    1.1 api认证原理介绍 1.api认证原理:客户端生成秘钥 1) 客户端与服务器端有一个相同的字符串作为auth_key 2) 客户端使用encryption="auth_key|tim ...

  4. 网站精准查询IP

    分享一些网站能精准查询IP的 https://www.chaidu.com/App/Web/IP/ http://www.ipip.net/ip.html http://www.hao7188.com ...

  5. Hive创建内部表、外部表

    使用hive需要hive环境 启动Hive 进入HIVE_HOME/bin,启动hive ./hive 内部表 建表 hive> create table fz > (id int,nam ...

  6. 实现分享功能插件2---jiathis分享插件应用

    博主原创:未经博主允许,不得转载 在上一篇的博文中分享了如何用百度分享插件实现分享功能,现在展示用jiathis进行实现分享功能: 主要代码如下: <body> <div class ...

  7. 【旧版本】Ubuntu 14.04 下 P416编译器 p4c的安装

    注:此为2017年5月份的安装方法,最新的p4c安装方法见: Ubuntu14.04下 安装p4c 参考: p4c README Ubuntu 14.04 下 P4v16编译器 p4c的安装 系统要求 ...

  8. oadrunner11录制手机app脚本

    oadrunner11录制手机app视频:http://pan.baidu.com/s/1bnc4cHL 注意点: 1.手机和loadrunner安装的电脑必须在同一网段2.视频的www.baidu. ...

  9. vuex到底是个啥

    vuex总结 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的 ...

  10. python 正则表达式匹配特定浮点数

    def is_decimal(num): import re #以数字开头,小数点后保留1位数字或两位数字或者没有小数部分 dnumre = re.compile(r""" ...