本节将要介绍CSS的选择器，CSS有三种常用的选择器，还有三种扩展选择器，说到选择器，那么选择器是做什么用的呢？

上一节我们介绍CSS常用属性的时候，我们都是通过在标签内定义Style属性来介绍的，但是如果Style中的属性有很多，并且我们还要把相同类型的标签用同一个CSS样式来美化，我们总不能Copy代码吧，首先页面太乱，再者代码量大，在大型的网站开发中会影响执行效率，最后自己操作起来也很麻烦，遇到这个问题，我们改怎么解决呢？

这就是选择器要做的事情，我们可以先定义好一个样式，然后再指定给那些需要美化的标签，这样难道不好吗？好，从美学角度讲，一个页面的同类事物只有一个风格会给用户整体舒服感，那么选择器该怎么用呢？下面先请看下图：

此图看和想5分钟，好好体会一下。了解了分类和用途之后，下面我们就结合代码，看看你的体会对吗？

1.标签选择器

<html>

<head>

<styletype="text/css">

div{background:#FF0000}

</style>

</head>

<body>

<div >我是div</div>

<div >我也是div</div>

<p>我是p</p>

<p>我也是p</p>

<inputtype="text" value="我是TXT"/>

</body>

</html>

在浏览器中查看发现所有的div标签全被美化了，其他标签都是默认状态，<style type="text/css"></style>这段代码可以先不用管，下一节会介绍，主要看红色标记的部分，标签选择要写在head标签内，写法格式要好好掌握。

2.类选择器

<html>

<head>

<styletype="text/css">

.waring{Blue;}< /span>

.highlight{font-size:xx-large;cursor:help;}

</style>

</head>

<body>

<div>

<h1>我是h1</h1>

<h2>我是h2</h2>

<h3 class="highlight">我是h3</h3>

</div>

</body>

</html>

在浏览器中查看发现，只有在class属性被定义的标签被相应美化了，其他标签仍为默认样式，类选择器的名称是自定义的。

3.ID选择器

<html>

<head>

<styletype="text/css">

#myTxt

{

font-size:36px;

background-color:#00ff00;

}

</style>

</head>

<body>

<div>

<p>我是p</p>

<input id="myTxt" type="text"value="我是text"/>

</div>

</body>

</html>

ID选择器和我们平时开发取对象很相似，最具有针对性。

对于以上的三种选择器，三种选择器可以结合使用，但是浏览器会给他们排个优先级，就是标签的样式被定义多次，该显示哪个样式，浏览器会其中优先级最高的样式，样式优先级：ID>class>标签。

4.关联选择器

<html>

<head>

<styletype="text/css">

div h1{background:#00ff00}

</style>

</head>

<body>

<div>

<p>我是p</p>

<h1>我是h1</h1>

</div>

<h1>我也是h1</h1>

</body>

</html>

在浏览器中查看，我们发现，只有div标签内的h1标签被修饰了，div标签内的其他标签，甚至div外的h1标签都没有被修饰，这就是关联组合器的作用，神奇吧。

5.组合选择器

<html>

<head>

<styletype="text/css">

div,h1,p{background:#00ff00}

</style>

</head>

<body>

<div>我是div</div>

<h1>我也是h1</h1>

<p>我是p</p>

<h2>我是h2</h2>

</body>

</html>

在浏览器中查看，我们会发现，只有div,h1,p这三种标签被修饰了，其他标签没有被修饰，这也是标签选择器的组合用法，达到页面效果统一。

6.伪元素选择器

<html>

<head>

<styletype="text/css">

a:active{color:Green};

a:hover{cursor:help};

a:link{color:Red};

a:visited{color:Blue};

</style>

</head>

<body>

<ahref="www.baidu.com">百度网首页</a>

</body>

</html>

这是我介绍的最后一个选择器了，上面代码在浏览器中查看，发现超链接默认的颜色变为了绿色，鼠标放上去的时候鼠标指针形状为问号帮助样式，当我们鼠标按下时超链接的颜色变为红色，访问完再回到页面，发现超链接的颜色变为蓝色，我说完这些你也大概知道上面的代码是什么意思了，为选择器不仅可以用于a标签，还可以用于p等标签，具体怎么用就去查帮助文档吧，怎么查呢？

DHTML->HTML元素->a标签->样式。

好了，关于选择器我就介绍到这里，之所以举这么简单的例子，是因为我主要讲的是原理，不想因为初学者突然看到其他难点而忽略了重点。好了，本节就到这里，下一节将继续HTML与CSS的结合方式。

转载于:https://blog.51cto.com/jhq0113/1264543

DHTML【7】--CSS相关推荐

  1. DHTML【8】--CSS

    在讲HTML时说过,有个Style标签是在CSS里用的,是的,在HTML中添加CSS样式必须要用到Style,在标签里单独定义标签属性时用的是Style属性.上一节我们也说过,先不用管那个Style标 ...

  2. DHTML【6】--CSS

    从今天开始,我们迎来了一个新的面孔---CSS,二者这也是一个漂亮的面孔,为什么说这是一个漂亮的面孔呢?因为CSS是做特效的,可以美化HTML页面,我们看到淘宝网.网易首页等网站都非常好看,那都是一些 ...

  3. 【基础】CSS实现多重边框的5种方式

    原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...

  4. html多重边框，中间空白,【基础】CSS实现多重边框的5种方式

    原文:[基础]CSS实现多重边框的5种方式 简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框 ...

  5. 【CSS】【14】CSS中使用背景图像

    默认情况下背景图像会自动向水平和竖直两个方向平铺,如果不希望不平铺,或者只希望沿一个方向平铺,可以使backgroud-repeat属性来控制,该属性可以取以下4种之一 repeat:沿水平和竖直两个 ...

  6. 【荐】CSS多级导航菜单

    代码简介: CSS导航菜单,三级菜单,资源完整,超实用,希望大家喜欢. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  7. 【CSS】【7】CSS的盒子模型

    一.margin与padding的区别:        当我们把网页想像成一面墙时,网页中的内容总可以概括为由一个个的盒子所构成的,如图: 这里单独地把一个盒子拿出来,就会发现由外边距.边框.内边距和 ...

  8. 【18】CSS基础(3)——理解层叠式

    本篇学习目标: 理解CSS的层叠式(层叠式包含继承性和层叠性)比较重点 CSS 的概念回顾:点击查看 ★CSS:cascading style sheet层叠样式表,是一种用来表示HTML样式的计算机 ...

  9. 【聊一聊】css中的经典布局——双飞翼布局

    上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...

最新文章

  1. APP自动化测试过程概述
  2. PHP中的urlencode，rawurlencode和JS中的encodeURI，encodeURIComponent
  3. 流利说递交招股书：上半年亏1.8亿 王翌持股27.9%
  4. UltraEdit正则表达式介绍及实例
  5. Halcon初学者知识【17】如何将零件提取dxf图
  6. RunTime类,后台快速打开浏览器
  7. tab栏切换 动画的相关方法上 动画的相关方法下 隐藏动画案例 隐藏动画练习
  8. 启动php-fpm时报错
  9. idea打war包时，JDK版本的问题解决方式
  10. 【小程序】当前“页面B”动态更改title，点击返回按钮，更改的标题会显示在“来源页面A”...
  11. 吴恩达深度学习笔记 2.6~2.9 logistic中的梯度下降
  12. Linux 运维人最常用 150 个命令汇总
  13. TimeQuest就一定要搞定——时序分析基本公式
  14. bag of words matlab,Bag of words（matlab实现）
  15. Win7开发的VC2012程序在XP上无法运行
  16. 华为开启管理员模式_华为设备管理员级别与其对应的权限
  17. 成功解决3dmax中，旋转时透视图可以看穿物体
  18. Scikit-learn中的Lasso/LassoCV以及R^2可决系数的分析与讨论
  19. QT 读Excel表格
  20. BP神经网络理解及公式推导

热门文章

  1. 各个系统下以及VS2017、Qt十分常用的快捷键
  2. 关于HashMap根据Value获取Key
  3. netstat获取本机监听的地址列表 —— *awk与splite命令实现*（sudo netstat -nl | grep tcp……）
  4. css布局中的百分比布局
  5. Apache常见功能实战详解
  6. 解决Asp.net中的Chart控件运行出现错误提示“ ChartImg.axd 执行子请求时出错”
  7. json数据 提示框flash.now[:notice] flash.now[:alert]
  8. Spring自定义属性编辑器PropertyEditorSupport + 使用CustomEditorConfigurer注册属性编辑器...
  9. 拒绝平庸--浅谈WEB登录页面设计
  10. C# 视频监控系列（10）：服务器端——验证、设置画面质量、字幕叠加、板卡序列号...