DHTML【7】--CSS

最新推荐文章于 2025-06-12 15:13:39 发布

原创最新推荐文章于 2025-06-12 15:13:39 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS选择器 #css #dhtml

DHTML基础同时被 2 个专栏收录

12 篇文章

订阅专栏

【DHTML】

11 篇文章

订阅专栏

本文深入解析CSS选择器的功能与应用，包括标签选择器、类选择器、ID选择器、关联选择器、组合选择器及伪元素选择器。通过实例展示如何利用选择器高效地为网页元素赋予样式，提升用户体验与页面美观度。

本节将要介绍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{background:Blue;}

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

</style>

</head>

<body>

<div>

<h1>我是h1</h1>

<h2

class="waring">我是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的结合方式。