示例将id值以ms开始的span元素都会被选中-唐朝资源网

元素被选中。

例子

选择id值以ms开头的span元素，并将这些span元素的文本颜色设置为红色。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    span[id^="ms"] {color:red;}
  </style>
</head>
<body>
  <p>
    <span>松下问童子，</span><br>
    <span id="h001">言师采药去。</span><br>
    <span id="ms-301">只在此山中，</span><br>
    <span id="ms001">云深不知处。</span>
  </p>
</body>
</html>

效果

松下问男孩，

老师去采药了。

只有在这山里，

云不知去向。

4.7 属性值后缀选择器（[att$=val]）

属性值后缀选择器通过判断元素的属性值是否以指定字符串结尾来选择元素。此选择器适用于查找属性中包含文件名的元素。

语法

[att$=val]

说明

属性值后缀选择器以使用名为 att 的属性的 HTML 元素为目标，该属性的值以 val 结尾。

例如a[href$=”.jpg”]{color:red}规则，选择器a[class$=”.jpg”]会选择使用href属性和属性值的a元素以 .jpg 结尾。根据这个规则，元素会被选中。

例子

以黄色背景显示链接地址以.html结尾的a元素。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    a[href$="html"] {background:yellow;}
  </style>
</head>
<body>
  <p><a href="here.html">here.html</a></p>
  <p><a href="here.htm">here.htm</a></p>
</body>
</html>

效果

以下两个链接仅供展示，无需点击

这里.html

这里.htm

5.ID 选择器 (#)

如果

HTML 元素有一个 ID 集，这个 ID 的值必须是唯一的。 HTML元素的ID是元素的一个重要特征，对于选择元素非常有帮助。

语法

#val

说明

选择目标

ID 选择器是一个 HTML 元素，其 id 属性设置为与 val 相同的值。

ID 选择器以 # 开头，后跟 ID 值。

例如，对于 p#note1{color:red} 规则，选择器 p#note1 将选择 id 值为 note1 的 p 元素。

例子

将id值为note1的span元素的文本颜色设置为红色。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    span#note1 {color:red;}
  </style>
</head>
<body>
  <p>
    <span>松下问童子，</span><br>
    <span id="no">言师采药去。</span><br>
    <span id="note1">只在此山中，</span><br>
    <span id="note2">云深不知处。</span>
  </p>
</body>
</html>

效果

松下问男孩，

老师去采药了。

只有在这山里，

云不知去向。

6. 伪类选择器

上一章我们介绍了5个简单的选择器：类型选择器、泛型类型选择器、类选择器、属性选择器和ID选择器。这 5 个选择器通过不同的特性选择 HTML 元素，所有这些特性都可以在 HTML 文档中找到。还有一些特性可以帮助我们选择 HTML 元素，比如链接是否被访问过，鼠标是否在元素上，但是这些特性在 HTML 文档中是不存在的，所以 CSS 引入了伪类选择器的概念.

伪类选择器以 : 开头。

6.1 个选择器未访问 (:link)

未访问选择器用于具有 href 属性的超链接元素。在 HTML 中，超链接元素有两种状态：未访问、已访问。未访问的选择器用于选择未访问的超链接元素。

语法

:链接

说明

未访问选择器的选择目标是未访问的超链接元素。

例如 a:link{color:blue} 规则，选择器 a:link 将选择所有未访问的 a 元素。

例如 a.far:link{…} 规则，选择器 a.far:link 将选择所有使用 far 类且未被访问过的 a 元素。

例子

下例中的 300 首唐诗将显示为红色，直到被点击为止。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    a:link{color:red;}
  </style>
</head>
<body>
  <p>
    <a href="#not-move-1">唐诗三百首</a>
  </p>
  <p id="book">here</p>
</body>
</html>

效果

这里

6.2 个访问选择器 (:)

不一样

，选择器用于选择一个已经被访问过的超链接元素。

语法

：

说明

已访问选择器以已访问过的超链接元素为目标。

例如 a:{color:red} 规则，选择器 a: 将选择所有访问过的 a 元素

例子

下面的代码将已经访问过的链接的颜色设置为绿色。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    a:visited{color:green;}
  </style>
</head>
<body>
  <p>
    <i>点击下面的链接，它将变成绿色...</i>
  </p>
  <p>
    <a href="#not-move-2">唐诗三百首</a>
  </p>
  <p id="book2">here</p>
</body>
</html>

效果

点击下面的链接，它会变成绿色

这里

6.3 悬停选择器（:hover）

当用户使用鼠标浏览网页时，鼠标可能会定位在某个元素上，这称为鼠标悬停。 CSS 可以使用这个特性来选择元素。

语法

:悬停

说明

浮动选择器的选择目标是鼠标所在的HTML元素，但用户还没有点击鼠标左键激活该元素。

例如 a:hover.note{color:red} 规则，选择器 a:hover.note 将选择使用 note 类的 a 元素，鼠标悬停在它上面。

例子

下面的代码实现了这个效果：当鼠标悬停在松下问男孩和老师采药时，会显示不同的背景颜色。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p.first:hover{background:lime}
    p.second:hover{background:yellow;}
  </style>

</head>
<body>
  <p class="first">松下问童子</p>
  <p class="second">言师采药去</p>
</body>
</html>

效果

将鼠标移到下面的文字上会显示不同的背景颜色

松下问男孩

老师去采药

6.4 激活选择器 (:)

用户可以在元素上按下鼠标左键。用户释放鼠标左键之前元素的状态称为活动状态。 CSS 可以使用这个特性来选择元素。

语法

：

说明

活动选择器的选择目标是用户按下但未释放鼠标左键的 HTML 元素。

例如，对于 p.:{color:red} 规则，选择器 p.: 将选择使用该类的 p 元素，并且鼠标左键按下但未释放。

例子

下面的代码实现了这个效果：当鼠标悬停在松下问小子和老师采药上时，显示黄色背景；当在它们上方按下鼠标左键时，会显示红色背景。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p:hover{background:yellow}
    p:active{background:red}
  </style>
</head>
<body>
  <p>松下问童子</p>
  <p>言师采药去</p>
</body>
</html>

效果

将鼠标移到下方文字会显示黄色背景，按下鼠标左键显示红色背景，松开鼠标左键恢复黄色背景。

松下问男孩

老师去采药

6.5 焦点选择器 (:focus)

编辑元素如

等只有在获得焦点时才能响应用户击键。 CSS可以利用元素是否具有焦点的特性来选择元素。

语法

:焦点

说明

焦点选择器的选择目标是具有焦点的 HTML 元素。

例如 :focus{color:red} 规则，选择器 :focus 将选择焦点所在的那个并使用 info 类输入元素。

例子

下面的代码实现了这个效果：鼠标切换并点击两个文本框，显示不同的背景颜色。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    input.fs1:focus{background:yellow}
    input.fs2:focus{background:lime}
  </style>
</head>
<body>
  <p><input class="fs1" value="点我" type="text"/></p>
  <p><input class="fs2" value="点我吧" type="text"/></p>
</body>
</html>

效果

请在下面的两个文本框之间切换

6.6 启用状态选择器 (:)

可以与用户交互的界面元素，如按钮、文本框等，一般有两种状态：启用状态和禁用状态。处于启用状态的界面元素可以与用户交互。处于禁用状态的 UI 元素无法与用户交互。 CSS可以使用界面元素是否启用选择元素的特性。

语法

：

说明

启用状态选择器的目标是处于可与用户交互的可用状态的 HTML 元素。

例如输入：{color:red}规则，选择器输入：将选择启用的输入元素。

例子

下面的代码实现了这个效果：启用状态的文本框显示黄色底纹，禁用状态的文本框显示虚线边框。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    input:enabled{background:yellow}
    input:disabled{border:dotted}
  </style>
</head>
<body>
  <p><input type="text" value="我是正常的" /></p>
  <p><input type="text" value="我被禁用了" disabled  /></p>
</body>
</html>

效果

6.7 禁用状态选择器 (:)

相比之下，禁用选择器用于选择禁用的元素。

语法

：

说明

禁用状态选择器针对处于禁用状态且用户无法与之交互的 HTML 元素。

例如输入：{color:red}规则，选择器输入：将选择禁用的输入元素。

例子

看。

6.8个只读选择器(:read-only)

编辑元素如

input等可以控制用户对文本的编辑权限。具有只读权限，用户可以看到文本，但不能编辑它。具有读取和写入权限，用户可以查看和编辑文本。 CSS 可以使用元素的读写状态特性来选择元素。

语法

:只读

说明

只读选择器以只读的 HTML 元素为目标。

例如，对于 input:read-only{color:red} 规则，选择器 input:read-only 将选择只读的输入元素。

例子

下面的代码实现了这个效果：只读文本框显示翠绿色底纹，可读写文本框显示蓝色文本。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    input:read-only{background:lime}
    input:read-write{color:blue}
  </style>
</head>
<body>
  <p><input type="text" value="我是只读的" readonly /></p>
  <p><input type="text" value="我是可读可写的" /></p>
</body>
</html>

效果

6.9 读/写选择器（:read-write）

相比之下，读写选择器用于选择处于读写状态的元素。

语法

:读写

说明

可读可写选择器以处于可读可写状态的 HTML 元素为目标。

例如在 :read-write{color:red} 规则中，选择器 :read-write 将选择使用 info 类且处于可读写状态的输入元素。

例子

看。

6.10 提示消息选择器(:-shown)

输入元素有时会显示工具提示。 CSS 可以使用这个特性来选择输入元素。

语法

:-显示

说明

提示选择器的选择目标是这样的 HTML 元素：这些元素是 input 类型css设置input背景色，并且这些元素具有属性集。

例子

下面的代码实现了这个效果：设置属性设置为虚线的输入输入框的边框。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    input:placeholder-shown {border: dotted;}
  </style>
</head>
<body>
  <p><input type="text" placeholder="我是提示信息" /></p>
  <p><input type="text" value="我是默认值" /></p>
</body>
</html>

效果

在两个文本框中输入内容，体验提示信息与文本输入框默认值的区别

6.11 第一子选择器（:first-child）

子选择器帮助我们选择元素的第一个子元素。

语法

:第一个孩子

说明

选择器的选择目标是一个 HTML 元素，它有一个父元素并且是父元素的第一个子元素。

例如在 li:first-child{color:red} 规则中，选择器 li:first-child 将选择第一个子位置的 li 元素。

例子

在下面的示例中，一个将显示为红色，因为它是 div 元素的第一个子元素。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p:first-child{color: red}
  </style>
</head>
<body>

  <div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </div>
</body>
</html>

效果

一个

两个

三个

6.12 个子选择器（:last-child）

子选择器可以帮助我们选择元素的最后一个子元素。

语法

:最后一个孩子

说明

子选择器的选择目标是一个 HTML 元素，它有一个父元素并且是该父元素的最后一个子元素。

li:last-child{color:red} 规则示例，选择器 li:last-child 将选择所有位于子位置的 li 元素。

例子

在下面的示例中，三个将显示为红色，因为它是 div 元素的最后一个子元素。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p:last-child{color: red}
  </style>
</head>
<body>
  <div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </div>
</body>
</html>

效果

一个

两个

三个

6.13 一子选择器(:only-child)

唯一的子选择器可以帮助我们选择有父元素但没有兄弟元素的 HTML 元素。

语法

:独生子女

说明

唯一子选择器的选择目标是一个有父元素但没有兄弟元素的 HTML 元素。

例如使用 li:only-child{color:red} 规则，选择器 li:only-child 将选择没有兄弟的 li 元素。

例子

在下面的示例中，四个将显示为红色，因为它所在的 p 元素没有兄弟。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p:only-child{color: red}
  </style>
</head>
<body>
  <div>
    <p>one</p>
    <p>two</p>
    <p>three</p>
  </div>
  <div>
    <p>four</p>
  </div>
</body>
</html>

效果

一个

两个

三个

四个

7. 伪元素选择器

当我们打开一个网页时，有些元素在HTML文档中，有些元素在逻辑上存在但没有对应的HTML元素，比如第一行文字，文字的第一个字母等。要表达这些元素，为了选择它们，CSS 引入了伪元素 (-) 的概念，从而产生了伪元素选择器。

伪元素选择器以 :: 开头。

7.1个第一行选择器（::first-line）

当屏幕上显示一段文字时，第一行不固定。当字体发生变化时，当显示区域大小发生变化时（如缩放浏览器），当屏幕尺寸发生变化时（如电脑屏幕和手机屏幕），第一行显示的内容会有所不同如何描述这第一行？ CSS 将此逻辑第一行称为第一行伪元素，因此称为第一行选择器。

语法

::一线

说明

选择要在屏幕上显示的第一行文本。

例如，在 p::firsr-line{color:red} 规则中，选择器 p::first-line 选择屏幕上 p 元素的第一行。

例子

对第一行文本应用黄色底纹。

HTML + CSS

1 2 3 4 5 6

图片[3]-示例将id值以ms开始的span元素都会被选中-唐朝资源网

7 8 9 10 11

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p::first-line{background: yellow;}
  </style>
</head>
<body>
  <p>船尾一个女子持桨荡舟，长发披肩，全身白衣，头发上束了条金色细带，白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般，不禁看得呆了。那船慢慢荡近，只见那女子方当韶龄，不过十五六岁年纪，肌肤胜雪，娇美无比，笑面迎人，容色绝丽。</p>
</body>
</html>

效果

缩放浏览器以查看第一行的变化

船尾的一个女人正拿着桨划船。她有一头长发和一条披肩。她一身白衣，头发上系着一根细细的金色带子。雪光闪闪发光。郭靖看到这少女打扮得像个仙女，愣住了。小船缓缓驶近，只见方荡少玲这女子只有十五、十六岁，皮肤比雪还好，美不胜收。

7.2 初始选择器 (::first-)

文字排版中经常会用到首字下沉和大写字母的排版方法，都是对文字的第一个字母进行操作。首字母选择器用于选择首字母。

语法

::first-

说明

选择文本块的第一个字母。

例如p::first-{color:red} 规则，选择器 p::first-

第一个字母

元素文本。

例子

以首字母大写显示文本的第一个字母。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p::first-letter{color:#e91e63;float:left;font-size:70px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px}
  </style>
</head>
<body>
  <p>船尾一个女子持桨荡舟，长发披肩，全身白衣，头发上束了条金色细带，白雪映照下灿然生光。郭靖见这少女一身装束犹如仙女一般，不禁看得呆了。那船慢慢荡近，只见那女子方当韶龄，不过十五六岁年纪，肌肤胜雪，娇美无比，笑面迎人，容色绝丽。郭靖只觉耀眼生花，不敢再看，转开了头，缓缓退开几步。 </p>
</body>
</html>

效果

船尾的一个女人正拿着桨划船。她有一头长发和一条披肩。她一身白衣，头发上系着一根细细的金色带子。雪光闪闪发光。郭靖看到这少女打扮得像个仙女，愣住了。小船缓缓驶近，只见方荡少玲这女子只有十五、十六岁，皮肤比雪还好，容貌绝美。郭靖只觉得眼花缭乱，不敢再看。他转过头，缓缓后退了几步。

7.内容前的3个选择器(::)

有时我们需要在元素的内容之前插入额外的内容，所以我们需要一种在内容之前选择这个伪元素的方法。

语法

说明

之前

用于选择元素的内容，要插入的内容放在元素的属性中。

例如 p::{: “note:”} 规则，选择器 p:: 会在 p 元素的文本之前插入一个 note:。

例子

在正文前插入红色唐僧：

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p::before{content:"唐僧：";color:red}
  </style>
</head>
<body>
  <p>小心了，打雷啰，下雨收衣服了。</p>
</body>
</html>

效果

小心，打雷css设置input背景色，下雨收拾你的衣服。

7.4 选择器后的内容(::after)

有时我们需要在元素的内容之后插入额外的内容，所以我们需要一种方法在内容之后选择这个伪元素。

语法

::之后

说明

选择一个元素的内容后，将要插入的内容放在元素的属性中。

与 p::after{: “great”} 规则一样，选择器 p::after 将在 p 元素的文本之后插入 great。

例子

在文本后面插入红色的射雕英雄传。

HTML + CSS

<html>
<head>
  <meta charset="utf-8"/>
  <style type="text/css">
    p::after{content:"《射雕英雄传》";color:red}
  </style>
</head>
<body>
  <p>那船慢慢荡近，只见那女子方当韶龄…</p>
</body>
</html>

效果

小船缓缓驶近，我看到了女人方荡少玲……

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END