CSS学习

最新推荐文章于 2024-09-23 15:32:37 发布

转载最新推荐文章于 2024-09-23 15:32:37 发布 · 59 阅读

本文详细介绍了CSS中的多种选择器类型，包括分组选择器、派生选择器、后代选择器等，并通过实例展示了如何使用这些选择器来精确地选择HTML元素。

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

1 多重样式层叠

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

2 CSS 语法

CSS 语法

2.1 值的不同写法和单位

p { color: #ff0000; }

CSS 的缩写形式：

p { color: #f00; }

2.2 写引号

提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

2.4 继承及其问题

子元素从父元素继承属性。但是它并不总是按此方式工作。

创建一个针对子元素的特殊规则，这样它就会摆脱父元素的规则。

3 选择器

3.1 分组选择器

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

3.2 派生选择器

定义一个派生选择器：也叫上下文选择器 (contextual selectors)

li strong {
    font-style: italic;
    font-weight: normal;
  }

请注意标记为 <strong> 的蓝色代码的上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字

3.2.1 后代选择器

再看看下面的 CSS 规则（后代选择器）：

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

下面是它施加影响的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

ul em {color:red;}

<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>

3.2.2 子元素选择器（Child selectors）

只能选择作为某元素子元素的元素

h1 > strong {color:red;}

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

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

3.2.3 相邻兄弟选择器（Adjacent sibling selector）

可选择紧接在另一元素后的元素，且二者有相同父元素。

如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

用一个结合符只能选择两个相邻兄弟中的第二个元素。

3.2.4 结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

3.3 id 选择器

id 选择器以 "#" 来定义，一个html文件中只可出现一次。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id选择器和派生选择器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

3.4 css类选择器

.center {text-align: center}

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

.fancy td {
	color: #f60;
	background: #666;
	}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元。

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

3.5 属性选择器

带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

适用于由空格分隔的属性值：

[title~=hello] { color:red; }

适用于由连字符分隔的属性值

[lang|=en] { color:red; }

3.6 总结

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。以空格分开
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。以连接词分开
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。