阶段总结：CSS选择器

最新推荐文章于 2024-07-12 01:09:29 发布

龍雅

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量221

点赞数

分类专栏： CSS学习总结文章标签： CSS选择器学习总结前端网页美化 HTML美化

本文链接：https://blog.csdn.net/Dragon_201314/article/details/81906260

版权

CSS学习总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

严格来讲，选择器的种类可以分为三种：标签名（元素）选择器、类（class）选择器和ID选择器。
而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。

一、常用选择器
二、属性选择器
三、派生选择器
四、伪类选择器
五、伪元素选择器
六、选择器组
七、选择器的优先级

一、常用选择器

1.1 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 选择器以 “#” 来定义
优点：可以为元素进行单独设置属性
缺点：样式不能复用，只对id属性值起作用

注意：id 属性只能在每个 HTML 文档中出现一次

示例代码：

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

在现代布局中，id选择器常用于建立派生选择器

使用建议：如果想要对文档中元素单独设置样式，建议使用id选择器

1.2 类（class）选择器

类选择器以一个点号表示
所有能够附带class属性的元素都可以使用此样式声明
类选择器允许以一种独立于文档元素的方式来指定样式

使用建议：如果页面中有多个不同元素需要重用同样的效果，建议使用类选择器

示例代码

.red {color: red; }
.green {color: green; }

1.3 元素选择器

通过元素名来选择CSS目标
在 W3C 标准中，元素选择器又称为类型选择器（type selector）
类型选择器匹配文档语言元素类型的名称。类型选择器匹配DOM树中该元素类型的每一个实例。

如果页面中有多个相同的元素需要重用同样的效果，建议使用元素选择器

示例代码

p {
  text-align: center;
  color: black;
  font-family: arial;
}

1.3.1 CSS元素选择器也可以为XML设置样式

XML文档

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

CSS样式

note {
    font-family:Verdana, Arial;
    margin-left:30px;
}

1.4 通配符选择器

以一个星号表示，可以选中一切元素
```
* {
    margin: 0;
    padding: 0;
}
```

上面的示例可以消除浏览器对元素的默认样式，方便后面设置尺寸

1.5 选择器组合使用

1.5.1 类选择器结合元素选择器

示例代码

    p.important {color:red;}

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”

1.5.2 id选择器和class选择器的区别

id选择器只能在文档中使用一次：与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次
不能使用 ID 词列表：不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表

二、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

2.1 简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器

示例代码

    /*只对有 href 属性的锚（a 元素）应用样式*/
    a[href] {color:red;}
    /*把包含标题（title）的所有元素变为红色*/
    *[title] {color:red;}
    /*还可以根据多个属性进行选择，只需将属性选择器链接在一起即可*/
    a[href][title] {color:red;}

2.2 根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素

示例代码

    /*将指向 Web 服务器上某个指定文档的超链接变成红色*/
    a[href="http://www.baidu.com"] {color: red;}
    /*与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档*/
    a[href="http://www.baidu.com"][title="百度"] {color: red;}

注意：这种格式要求必须与属性值完全匹配

2.3 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）

示例代码

    p[class~="important"] {color: red;}

部分值属性选择器与点号类名记法的区别:

p.important 和 p[class=”important”] 应用到 HTML 文档时是等价的

那么为什么还要有 “~=” 属性选择器呢？

答：因为它能用于任何属性，而不只是 class

2.4 子串匹配属性选择器

[abc^=”def”]：选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]：选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]：选择 abc 属性值中包含子串 “def” 的所有元素

任何属性都可以使用这些选择器

2.5 特定属性选择类型

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

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素

一般来说，[att|=”val”] 可以用于任何属性及其值

应用示例：假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

    img[src|="figure"] {border: 1px solid gray;}

三、派生选择器

3.1 后代选择器

后代选择器（descendant selector）又称为包含选择器，可以选择作为某元素后代（包含子孙）的元素
```
h1 em {color:red;}
```

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器
选择器之间的空格是一种结合符（combinator）
h1 em 可以解释为：作为 h1 元素后代的任何 em 元素

3.2 子元素选择器

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

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

h1 > strong {color:red;}

子选择器使用了大于号作为子结合符，子结合符两边可以有空白符

选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”
3.3 相邻兄弟选择器
- 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
- 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）
注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。
- h1 + p {margin-top:50px;}读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”
补充：兄弟节点选择器 X ~ Y跟X+Y很相似，但是它又不是那么严格。
```
ul + p 选择器指挥选择紧挨着指定元素的那些元素
而兄弟节点选择器 ul ~ p 选择器会选择跟在目标元素后面的所有匹配元素。
```
3.4 派生选择器组合使用

3.4.1 后代选择器结合子选择器
```
    table.company td > p
```
上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性

3.4.2 相邻兄弟选择器结合其他选择器
```
    html > body table + ul {margin-top:20px;}
```
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

四、伪类选择器
- CSS伪类用于向某些选择器添加特殊的效果
- CSS伪类用于设置同一个元素在不同状态的样式
伪类的语法：
```
    selector : pseudo-class {property: value}
```
CSS 类也可与伪类搭配使用：
```
    selector.class : pseudo-class {property: value}
```
4.1 锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
```
    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}  /* 已访问的链接 */
    a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
    a:active {color: #0000FF}   /* 选定的链接 */
```
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

4.2 伪类可以与 CSS 类配合使用
```
    a.red : visited {color: #FF0000}
```
4.3 CSS2 - :first-child 伪类
- 使用 :first-child 伪类来选择元素的第一个子元素
提示：最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

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

代码示例
- 匹配第一个
4.4 所有伪类列表
- :active：向被激活的元素添加样式。
- :focus：向拥有键盘输入焦点的元素添加样式。
- :hover：当鼠标悬浮在元素上方时，向元素添加样式。
- :link：向未被访问的链接添加样式。
- :visited：向已被访问的链接添加样式。
- :first-child：向元素的第一个子元素添加样式。
- :lang：向带有指定 lang 属性的元素添加样式。
五、伪元素选择器
- CSS 伪元素用于向某些选择器设置特殊效果
伪元素语法：
```
    selector:pseudo-element {property:value;}
```
CSS 类也可以与伪元素配合使用：
```
    selector.class:pseudo-element {property:value;}
```
5.1 :first-line 伪元素
- “first-line” 伪元素用于向文本的首行设置特殊样式
注释：”first-line” 伪元素只能用于块级元素。

注释：下面的属性可应用于 “first-line” 伪元素：
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
5.2 :first-letter 伪元素
- “first-letter” 伪元素用于向文本的首字母设置特殊样式
注释：”first-letter” 伪元素只能用于块级元素。

注释：下面的属性可应用于 “first-letter” 伪元素：
- font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (仅当 float 为 none 时)
- text-transform
- line-height
- float
- clear
5.3 :before 伪元素
- “:before” 伪元素可以在元素的内容前面插入新内容
示例代码：
```
    h1:before {
     content:url(logo.gif);
    }
```
上面的代码会在每个

5.4 :after 伪元素
- “:after” 伪元素可以在元素的内容之后插入新内容
示例代码：
```
    h1:after
  {
    content:url(logo.gif);
  }
```
上面的示例会在每个

六、选择器组
- 选择器声明为以逗号隔开的选择器列表
- 可以将任意多个选择器分组在一起，对此没有任何限制
示例代码：
```
    h1, h2, p, span, a {color: red; }
```
提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表

提示：通过分许可以将一些相同规则作用于多个元素

七、选择器的优先级

7.1 选择器的优先级是怎么规定的呢？
```
一般而言，选择器月特殊，它的优先级越高。也就是说选择器指向的越准确，它的优先级就越高
通常我们用下面的方式来数字化优先级，以便更加直观的表示优先级的大小：
- 元素选择器：1
- 类选择器：  10
- ID选择器：  100
```
优先级计算示例：
- .content>div：10+1=11
- .data：10
- .content>.data：10+10=20
注：.content > .data等价于.data

7.2 怎么提升CSS选择器的性能？
- 避免使用通用选择器
- 避免使用标签或class选择器限制id选择器
- 避免使用标签限制class选择器
- 避免使用多层标签选择器。使用class选择器替换，减少css查找
- 避免使用子选择器
- 使用继承
7.3 如何写出简洁、高效的CSS
- 不要在ID选择器前使用标签名
- 不要在class选择器前使用标签名
- 尽量少使用层级关系
- 使用class代替层级关系

龍雅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
阶段总结：CSS选择器

严格来讲，选择器的种类可以分为三种：标签名（元素）选择器、类（class）选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。一、常用选择器1.1 id选择器1.2 类（class）选择器1.3 元素选择器1.3.1 CSS元素选择器也可以为XML设置样式1.4 通配符选择器1.5 选择器组合使用1.5.1 类选择器结合元素选择器1....
复制链接

扫一扫