`
lucifinilhades
  • 浏览: 86016 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3 选择器【1】

CSS3选择器 
阅读更多

选择器概述

选择器是CSS3中一个重要的内容。使用它可以大幅度提高开发人员书写或修改样式表时的工作效率。在CSS3中，提倡使用选择器来将样式与元素直接 绑定真情为，这样，在样式表中什么样式与什么元素相匹配变得一目了然，修改起来也方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大 量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。

CSS3中的属性选择器

  • [attr=val]属性选择器的含义是：如果元素用attr表示的属性之属性值为val指定的字符，则该元素使用这个样式。
  • [attr*=val]属性选择器的含义是：如果元素用attr表示的属性之属性值包含val指定的字符，则该元素使用这个样式。
  • [attr^=val]属性选择器的含义是：如果元素用attr表示的属性之属性值以val指定的字符开始，则该元素使用这个样式。
  • [attr$=val]属性选择器的含义是：如果元素用attr表示的属性之属性值以val指定的字符结尾，则该元素使用这个样式。

结构性伪类选择器

CSS中的伪类选择器

伪类选择器与类选择器的区别是，类选择器可以随便起名，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。在CSS中最常用的伪类选择器是使用在a（锚）元素上的几种选择器，使用方法如下所示：

a:link {color:#FF0000; text-decoration:none;}
a:visited {color:#00FF00; text-decoration:none;}
a:hover {color:#FF00FF; text-decoration:underline;}
a:active {color:#0000FF; text-decoration:underline;}

CSS中的伪元素选择器

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。在CSS中主要有如下四类伪元素选择器：

  • first-line伪元素选择器：用于为某个元素中的第一行文字使用样式；
  • first-letter伪元素选择器：用于为某个元素中的文字的首字母（欧美文字）或第一个字使用样式；
  • before伪元素选择器：用于在某个元素之前插入一些内容；
  • after伪元素选择器：用于在某个元素之后插入一些内容。

结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

选择器root、not、empty和target

root选择器将样式绑定到页面的根元素。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML页面中就是指包含着整个页面 的<html>部分。另外，在使用样式指定root元素与body元素的背景时，根据不同的指定条件，背景色的显示范围会有所变化，这一点请 注意。

如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。例如：我们可以使用“body *”来指定body元素的背景色为黄色，但是排除h1元素使用这个背景色，则CSS样式定义如下：

<style type="text/css">
:root {background-color:yellow;}
body *:not(h1) {background-color:yellow;}
:empty {background-color:red;}
:target {background-color:green;}
</style>

使用empty选择器来指定当元素内容为空白时使用的样式。

使用target选择器来对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

选择器first-child、last-child、nth-child和nth-last-child

这几个选择器能够特殊针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素、偶数个或奇数个子元素进行样式的指定。

单独指定第一个子元素、最后一个子元素的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>first-child与last-child选择器示例</title>
<style type="text/css">
li:first-child {background-color: yellow;}
li:last-child {background-color: skyblue;}
</style>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
</ul>
</body>
</html>

对指定序号的子元素使用样式

使用nth-child选择器和nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式，其使用方法如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>nth-child与nth-last-child选择器示例</title>
<style type="text/css">
li:nth-child(2) {background-color: yellow;}
li:nth-last-child(2) {background-color: skyblue;}
</style>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
</ul>
</body>
</html>

该示例中，指定ul列表中第二个li列表项的背景色为黄色，倒数第二个li列表项的背景色为浅蓝色。

对所有奇数或偶数个元素使用样式

这两个选择器还可以用来对某个父元素中所有奇数（odd）或偶数（even）个子元素使用样式，使用方式如下所示：

<style type="text/css">
li:nth-child(odd) {background-color: yellow;}
li:nth-child(even) {background-color: skyblue;}
</style>

注意：nth-child和nth-last-child选择器是针对父元素中所有子元素的排列来计算序号的 ，即有可能父元素中包含不止一种类型的子元素时，而你要对某一类子元素进行奇偶数元素进行样式指定时不能使用该选择器，应该使用下面两种选择。

选择器nth-of-type和nth-last-of-type

在CSS3中，可以使用这两个选择器来解决上述注意事项中所说明的问题。使用这两个选择器时，CSS3在计算子元素是排号为奇数或偶数时，就只针对同类型的子元素进行计算了，使用方法如下所示：

<style type="text/css">
h2:nth-of-type(odd) {background-color: yellow;}
h2:nth-of-type(even) {background-color: skyblue;}
</style>

另外，如果计算奇偶数的时候需要从下往上倒过来计算，则使用nth-last-type选择器进行计算。

循环使用样式

如果开发者想对所有的列表项目都设定背景色，但是不采用一个个列表项分别指定的方式，而是采用循环指定的方式，让剩下来的列表项循环采用一开始已经 指定好的背景色，这时仍然可以采用nth-child选择器，只要使用“nth-child(xn+y)”的形式即可。其中“x”表示每次循环中共包括几种样式，“y”表示指定的样式在循环中所处的位置，使用方法如下所示：

<style type="text/css">
li:nth-child(4n+1) {background-color: yellow;}
li:nth-child(4n+2) {background-color: limegreen;}
li:nth-child(4n+3) {background-color: red;}
li:nth-child(4n+4) {background-color: white;}
</style>

另外，“4n+4” 的写法可略写成“4n”的形式。上述四个选择器均支持这种应用。

only-child和only-of-type选择器

如果采用如下所示的方法结合运用nth-child与nth-last-child选择器，可以指定当某个父元素中只有一个子元素时才使用的样式。

<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<title>only-child选择器</title>
<style type="text/css">
li:nth-child(1):nth-last-child(1) {background-color: red;}
</style>
</html>
<body>
<ul>
    <li>只有一个列表项</li>
</ul>
</body>
</thml> 

上述示例中的CSS样式可以修改成如下样式：

<style type="text/css">
li:only-child {background-color: red;}
</style>

另外，也可使用only-of-type选择器替代“nth-of-type(1)：nth-last-of-type(1)”这种结合两个选择器表达式格式来让让样式只对唯一子元素起作用的实现方法。

分享到：
| HTML5 绘制图形【3】
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS3选择器总结CSS3选择器总结

    CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...

    HTML5+CSS3 城市选择器

    另外，CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计，使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用，它简化了JavaScript的DOM操作，使得事件处理、元素操作和动画效果的实现...

    HTML5&CSS3网页制作：CSS基础选择器.pptx

    在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML元素。 **CSS选择器**是CSS中的基本概念，它们是用于选取HTML文档中特定元素的工具。选择器使得我们可以...

    react-React组件的css选择器

    在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...

    CSS选择器-.pdf

    此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...

    前端必须掌握的css选择器方法

    下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...

    让IE支持CSS3选择器的插件

    在IT领域，尤其是在前端开发中，CSS3是现代网页设计不可或缺的一部分，它引入了许多新的选择器，极大地增强了样式表的功能和灵活性。然而，早期版本的Internet Explorer（IE）浏览器，尤其是IE8及以下版本，对CSS3...

    利用css＋javascript实现的一个日期选择器代码

    1. `calendar-win2k-cold-1.css`：这很可能是用于定义日期选择器样式的CSS文件。文件名暗示它可能采用了类似Windows 2000操作系统风格的冷色调设计。CSS文件会包含各种选择器（如类选择器、ID选择器等）和属性（如...

    css属性选择器理解案列

    理解css属性选择器

    css颜色选择器

    CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值，并显示最近使用的颜色的列表。 默认情况下，颜色选取器将输入...

    ie-css3.js 让IE支持高级CSS3选择器.zip

    《使用ie-css3.js让IE浏览器支持CSS3高级选择器》 在现代Web开发中，CSS3已经成为构建精美网页和复杂交互的必备工具，其中高级选择器提供了更强大的样式控制能力。然而，早期版本的Internet Explorer（IE6、IE7、IE...

    CSS基本选择器实用PPT课件.pptx

    CSS 基本选择器 本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用，旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet，即层叠样式表。它的...

    HTML5+CSS3实现的华丽的日期选择器源码

    在这个日期选择器中，可能运用了伪类（如`:hover`）来实现鼠标悬停时的背景变化，这种立体效果可能通过CSS3的阴影（box-shadow）和渐变（linear-gradient）属性来实现。此外，CSS3的Flexbox或Grid布局也可能用于创建...

    CSS3 样式选择器

    在定义CSS时，需要知道其书写语法和影响范围，此文档给你说明

    web开发——CSS属性选择器.docx

    Web 开发——CSS 属性选择器 CSS 属性选择器是 CSS 中一种强大的选择器，允许开发者根据 HTML 元素的属性和值来设置样式。下面是 CSS 属性选择器的详细知识点： 什么是 CSS 属性选择器？ CSS 属性选择器是一种...

    树使用css选择器优化代码（IE7+，firefox3，opera9，chrom下可用）

    本篇文章将探讨如何使用CSS选择器来优化代码，使之适用于IE7+、Firefox 3、Opera 9以及Chrome等主流浏览器。 首先，理解CSS选择器的性能差异是优化的关键。CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器...

    一种可视化的方式来分析选择器在CSS中的特殊性

    **CSS选择器特殊性分析** 在CSS样式表中，选择器是用于指定元素样式的关键工具。它们决定了哪些规则将应用于页面上的特定元素。选择器的特殊性（Specificity）是CSS优先级的一种度量，用于解决当多个选择器同时影响...

    CSS基本选择器实用PPT学习教案.pptx

    CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用，旨在帮助学生掌握基本的 CSS 选择器，并实践于个人主页项目中。 一、CSS 概念和语法 CSS（Cascading Style Sheets）是用来...

Magicbox
Global site tag (gtag.js) - Google Analytics