CSS学习笔记1--选择器

  |  

前言

CSS作为前端三大项之一,用来定义前端的样式,它最重要的一个技术点之一就是如何精准高效的将定义好的样式应用在相应的位置,这就涉及到CSS选择器

1





元素选择器

如果设置一个HTML文档的样式,选择器通常将是某个HTML元素,例如p、h3、em、a,甚至可以是html本身,示例如下:

1
2
3
4
5
6
7
8
9
html{
color:balck;
}
h1{
color:gray;
}
h2{
color:silver;
}

选择器分组

在CSS中可以将多个选择器放在样式的左边,并用都好来分隔,这样就定义了一个规则,右边的样式将应用到左边的所有选择器中,示例如下:

1
2
3
4
5
6
7
8
9
h1, h2, h4{
color: silver;
}
h2, h3,{
background: gray;
}
h1, h4, b{
background: white
}

通配选择器

CSS2引入了一种新的简单选择器,成为通配选择器(universal selector),显示为一个星号(*)。这个选择器可以与任何元素匹配,就像一个通配符,示例如下:

1
2
3
*{
color: red;
}

类选择器和ID选择器

除了知识文档元素的选择器外还有另外两种类型的选择器:类选择器(class selector)和ID选择器(ID selector),它们允许以一种独立于文档元素的方式来指定样式。这些选择器可以单独使用,也可以与其它元素选择器结合使用。

类选择器

定义方式:

1
2
3
元素.类属性值{
样式
}

为了将一个 类选择器的样式与元素相关联,必须将元素的class属性指定为一个适当的值。例如:

1
<元素 class="类属性值" />

多类选择器

在HTML中,一个class值中有可能包含一个词列表,各个词之间用空格分隔,例如:

1
<p class="urgent warning">this is a paragram.</p>

那么我们可以用多类选择器来设置这个p元素的样式,示例如下:

1
2
3
4
p.warning.urgent{
font-weight: bold;
font-style: italic;
}

ID选择器

定义方式:

1
2
3
元素#ID属性值{
样式
}

为了将样式与元素匹配,元素中需要设置相应的ID属性,示例如下:

1
<p id="id属性值">This is a paragram.</p>

ID选择器不能结合使用,因为ID属性不允许有以空格分隔的词列表

属性选择器

CSS2引入了属性选择器(attribute selector),它可以根据元素的属性及属性值来选择元素。共有4种类型的属性选择器

简单属性选择

定义方式:

1
2
3
元素[属性名]{
样式
}

例如想要给所有具有title属性的元素设置样式:

1
2
3
*[title]{
font-weight: bold;
}

可以根据多个属性进行选择,只需要将属性选择器连接在一起

根据具体属性值选择

为了只选择有特定特定属性值的元素,可以是用根据具体属性值选择的方式定义样式

定义方式:

1
2
3
元素[属性名=属性值]{
样式
}

与属性选择类似,可以把多个属性-值选择器连接在一起来选择一个文档。

根据部分属性值选择

如果属性能接受词列表,可以根据其中的任意一个词进行选择,定义方式如下:

1
2
3
元素[属性名~=词列表中的一个属性值]{
样式
}

CSS2发布了更多的部分属性选择器

类型 描述
[foo^=”bar”] 选择foo属性值以”bar”开头的所有元素
[foo$=”bar”] 选择foo属性值以”bar”结尾的所有元素
[foo*=”bar”] 选择foo属性值中包含字串”bar”的所有元素

后代选择器

后代选择器(descendant selector,也成为包含选择器)或上下文选择器(contextual selector)。示例如下

1
2
3
h1 em {
color: gray;
}

这个规则会把作为h1元素的em元素的文本变成灰色,其它em文本(如段落或块引用的中的em)不会被这个规则选中。

选择子元素

在某些情况下,可能并不想选择一个任意的后代元素;而是希望缩小范围,只选择另一个元素的子元素。例如,只想选择作为一个h1元素子元素的strong元素,可以使用下面示例:

1
2
3
h1 > strong{
color:red;
}

其中的大于号(>),称为子结合符。这个规则只会把出现在h1元素中的第一个strong元素变成红色,而第二个则会不被影响。

选择相邻兄弟元素

要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟结合符(adjacentsibling combinator),表示为一个加号(+)。

伪类和伪元素

利用伪类和伪元素选择器,可以为文档中不一定具体存在的结构指定样式,或者为某些元素(甚至文档本身)的状态所指示的幻象类指定样式。

伪类选择器

链接伪类:

伪类名 描述
:link 指示作为超链接(即有一个href属性)并指向要给为访问地址的所有锚
:visited 指示以访问地址超链接的所有锚

动态伪类:

伪类名 描述
:focus 指示当前拥有输入焦点的元素
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户输入激活的元素

伪元素选择器

伪元素名 描述
:first-letter 设置一个块级元素首字母样式
:first-line 设置元素中第一个文本行
:before 在元素前插入生成的内容,并设置其样式
:after 在元素后插入生成的内容,并设置其样式

文章目录
  1. 1. 元素选择器
  2. 2. 选择器分组
  3. 3. 通配选择器
  4. 4. 类选择器和ID选择器
    1. 4.1. 类选择器
    2. 4.2. 多类选择器
    3. 4.3. ID选择器
  5. 5. 属性选择器
    1. 5.1. 简单属性选择
    2. 5.2. 根据具体属性值选择
    3. 5.3. 根据部分属性值选择
  6. 6. 后代选择器
    1. 6.1. 选择子元素
    2. 6.2. 选择相邻兄弟元素
  7. 7. 伪类和伪元素
    1. 7.1. 伪类选择器
    2. 7.2. 伪元素选择器