网页制作学习之CSS选择器

最新推荐文章于 2024-04-22 21:24:38 发布

Study_is_a_long_way

最新推荐文章于 2024-04-22 21:24:38 发布

阅读量498

点赞数 2

CC 4.0 BY-SA版权

分类专栏：网页制作学习文章标签： CSS

本文链接：https://blog.youkuaiyun.com/itsalittledifficult/article/details/86062131

网页制作学习专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解了CSS选择器的各种类型，包括元素、ID、类、交集、并集、后代和子元素选择器，以及伪类如:hover和:first-child的使用方法。通过实例展示了如何精确控制网页元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细参考见http://www.runoob.com/cssref/css-selectors.html 菜鸟教程

http://www.w3school.com.cn/cssref/css_selectors.asp W3School

元素选择器 element{}

最基本的选择器，可以直接为标签添加css样式，主流浏览器的各个版本都支持，eg：body{}

ID选择器 #ID{}

与类和元素不同，id在每一个HTML文档里是唯一的，不可以出现多个，主流浏览器的各个版本都支持，eg：#name{}

类选择器 .class{}

.class选择器很常用，可以在同一个文档中出现多个，便于相同样式的不同模块的设置，主流浏览器的各个版本都支持，eg：.hello{}

交集选择器 element.class{} 或者 element#id{}————————不常用

第一个必须是元素选择器，第二个是ID或者类选择器，两个选择器之间不能有空格，并且注意交集选择器的各个选择器的排列顺序是要遵循能被解析的原则的（比如:选择p和.class1的交集，p.class1可行，但是.class1p不可行，原因是后者不能被CSS解析器正确解析），eg：p.hello{} 选择标签是并且class=“hello”的部分

并集选择器 element,.class,#id{}

并集选择器或者叫选择器组，可以同时选择多个多种选择器，用“，”分隔开，同时设置他们的样式，主流浏览器的各个版本都支持，eg：p,.hello,#name,h1{}

后代选择器 element .class{}

后代选择器可以选择到一个元素的后代元素，有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，不管嵌套层数多么深，只要是符合的都可以被选择到。

<html>
<head>
<style type="text/css">
ul em {color:red; font-weight:bold;}
</style>
</head>

<body>
<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>
</body>
</html>

结果：

子元素选择器 element>element{}

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素，

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>

结果：

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

常见的伪类：

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

超链接

:link 未点击的链接样式

:visited 已点击访问过的链接样式

:hover 鼠标经过、悬停的样式

:active 点击链接时的样式。

<html>
<head>

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>
</html>

结果：未点击红色，点击后绿色，悬停时粉色，点击时蓝色

未点击

已点击

：first-child

可以使用 :first-child 伪类来选择元素的第一个子元素。

最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

eg1: p>i:first-child{font-weight:bold} ,选择器匹配所有 元素中的第一个 元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

result1:

eg2: p:first-child i { color:blue; } 选择器匹配所有作为元素的第一个子元素的 元素中的所有 元素：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

result2: