CSS设计指南笔记：选择符篇

最新推荐文章于 2023-09-20 08:48:52 发布

材女的进击

最新推荐文章于 2023-09-20 08:48:52 发布

阅读量174

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_39987434/article/details/86162942

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

上下文选择符：（后代组合式选择符），标签1 标签2 {声明} 用于选择作为指定祖先元素后代的标签。

例：

<body>
<article>
<h1>Contextual selectors are <em>very</em> selective</h1>
<p>This example shows how to target a <em>specific</em> tag.</p>
</article>
</body>

article p {font-weight:bold;}

只有是article 后代的p 元素才会应用后面的样式。

article h1 em {color:green;}

特殊的上下文选择符：

下面我们再用另一段标记来演示几种特殊的上下文选择符。

<section>
<h2>An H2 Heading</h2>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
</section>

子选择符：> 标签1 > 标签2 标签2 必须是标签1 的子元素，这个选择符中的标签1 不能是标签2 的父元素之外的其他
祖先元素。

section > h2 {font-style:italic;}

紧领同胞选择符： + 标签1 + 标签 2 标签2 必须紧跟在其同胞标签1 的后面。

h2 + p {font-variant:small-caps;}

一般同胞选择符： ~ 标签1 ~ 标签 2 标签2 必须跟（不一定紧跟）在其同胞标签1 后面。

h2 ~ a {color:red;}

通用选择符： * 通配符，匹配任何元素。

ID和类选择符

类选择符：. 类名

标签带类选择符：把标签名和类选择符写在一块

p.specialtext {color:red;}

只选择带specialtext 类的段落

多类选择符：

给元素添加多个类

<p class="specialtext featured">Here the span tag <span>may or may not</span>
be styled.</p>

选择同时存在这两个类名的元素，可以这样写：
.specialtext.featured {font-size:120%;}
注意，CSS 选择符的两个类名之间没有空格

ID选择符：#

<p id="specialtext">This is the special text.</p>
那么，相应的ID 选择符就是这样的：
#specialtext {CSS 样式声明}

属性选择符：

属性名选择符：标签名[属性名]

img[title] {border:2px solid blue;}

<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />

会导致像下面这个带有title 属性的HTML img 元素显示2 像素宽的蓝色边框，

属性值选择符：标签名[属性名=“属性值”]

img[title="red flower"] {border:4px solid green;}

<img src="images/red_flower.jpg" title="red flower" alt="red flower" />

在图片的title 属性值为red flower 的情况下，才会为图片添加边框。

伪类

 UI（User Interface，用户界面）伪类会在HTML 元素处于某个状态时（比如鼠标
指针位于链接上），为该元素应用CSS 样式。
 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第
一个或最后一个），为相应元素应用CSS 样式。

UI伪类：

链接伪类
- Link 等待用户点击
- Visited 用户点击过这个链接
- Hover 鼠标悬停在链接上
- Active 链接正在被点击

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

注：

由于这4 个伪类的特指度（本章后面再讨论特指度）相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果

一个冒号（:）表示伪类，两个冒号（::）表示CSS3 新增的伪元素。尽管浏览器目前都支持对CSS 1 和CSS 2 的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。

：focus伪类

e:focus e表示任何元素

input:focus {border:1px solid blue;}
会在光标位于input 字段中时，为该字段添加一个蓝色边框。

：target伪类

e:target

<a href="#more_info">More Information</a>
位于页面其他地方、ID 为more_info 的那个元素就是目标。该元素可能是这样的：
<h2 id="more_info">This is the information you are looking for.</h2>
那么，如下CSS 规则
#more_info:target {background:#eee;}
会在用户单击链接转向ID 为more_info 的元素时，为该元素添加浅灰色背景。

结构化伪类：

：first-child 和last-child e:first-child e:last-child

：first-child代表一组同胞元素中的第一个元素：last-child代表最后一个。

ol.results li:first-child {color:blue;}
应用给以下标记：
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
文本“My Fast Pony”就会变成蓝色。如果选择符改成这样：
ol.results li:last-child {color:red;}
那变成红色的文本就是“Slow Ol’ Nag”了。

：nth-child e:nth-child(n) e代表元素名，n代表一个数值（也可以是odd或even）

li:nth-child(3)

会选择一组列表项中的每个第三项。
:nth-child 伪类最常用于提高表格的可读性

伪元素

伪元素就是文档中若有实无的元素。

::first-letter

p::first-letter {font-size:300%;}
可以得到段落首字符放大的效果。

::first-line

p::first-line {font-variant:small-caps;}
可以把第一行以小型大写字母显示

::before 和 ::after 可用于在特定元素前面后者后面添加特殊内容

<p class="age">25</p>
和如下样式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
能得到以下结果：
Age: 25 years.

层叠规则：

规则一：包含ID 的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选
择符。
规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样
式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声
明的。
规则一胜过规则二。换句话说，如果选择符更明确（特指度更高），无论它在哪里，都会
胜出。
规则三：设定的样式胜过继承的样式，此时不用考虑特指度（即显式设定优先）。下面简单
解释一下规则三。比如下面的标记
<div id="cascade_demo">
<p id="inheritance_fact">Inheritance is <em>weak</em> in the Cascade</p>
</div>
和下面的规则
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2 （高特指度）
会导致单词“weak”变成蓝色，因为它从父元素p 那里继承了这个颜色值。
但是，只要我们再给em 添加一条规则
em {color:red;}
0 - 0 - 1 （低特指度）
em 就会变成红色。因为，虽然它的特指度低（0-0-1），但em 继承的颜色值，会被为它明
确（显式）指定的颜色值覆盖，就算（隐式）遗传该颜色值的规则的特指度高（2-0-2）也
没有用。