1-选择器
发表更新前端 / CSS13 分钟读完 (大约1934个字)

1-选择器

CSS选择器,继承性,优先级和长度单位

准备

常见的字符集：

【Web前端HTML5&CSS3】01-前端简介 - VectorX - 博客园 (cnblogs.com)

网页基本知识:

【Web前端HTML5&CSS3】03-字符实体与语义标签 - VectorX - 博客园 (cnblogs.com)

CSS语法和选择器

样式表

内联样式(行内样式)

在标签内部通过style属性来设置元素的样式

1
<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

开发时候尽量不要使用

内部样式表

将样式编写到head中的style标签里然后通过 css 的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

1
2
3
4
5
6
<style>
p{
    color:green;
    font-size:50px;
}
</style>

外部样式表

可以将 css 样式编写到一个外部的 CSS 文件中，然后通过link标签来引入外部的 CSS 文件

1
<link rel="stylesheet" href="./style.css" />

选择器

css选择器

通配选择器（Universal selector）

  • 选择页面中所有的元素
1
2
3
* {
  color: red;
}

元素选择器（Type selector）

  • 根据标签名选中指定的元素
1
2
3
4
5
6
7
p {
  color: red;
}

h1 {
  color: green;
}

类选择器（Class selector）

  • 根据元素的class属性选中一组元素
1
2
3
4
5
6
.blue {
  color: blue;
}
.size {
  font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class:

  • 可以重复使用，
  • 可以通过class属性来为元素分组，
  • 可以同时为一个元素指定多个class属性

ID 选择器（ID selector）

  • 根据元素id属性值选中元素
1
2
3
#red {
  color: red;
}

属性选择器（Attribute selector）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#选择含有指定属性的元素
p[title] {
  color: orange;
}
#选择含有指定属性和属性值的元素
p[title="e"] {
  color: orange;
}
#选择属性值以指定值开头的元素
p[title^="e"] {
  color: orange;
}
#选择属性值以指定值结尾的元素
p[title$="e"] {
  color: orange;
}
#选择属性值中含有某值的元素
p[title*="e"] {
  color: orange;
}

复合选择器

交集选择器和并集选择器区别_笔记大全_设计学院 (python100.com)

并集选择器

  • 选中同时复合多个条件的元素()
1
2
3
4
#选中所有class为box和p标签的元素
.box, p {
  font-size: 20px;
}

选择的是所有选择器(.box和p)

交集选择器

  • 选中符合条件的元素
1
2
3
.box span.article {
  font-size: 20px;
}

选中.box中带有.article的span元素

关系选择器

子元素选择器（Child combinator）

  • 选中指定父元素的指定子元素
1
2
3
div.box > p > span {
  color: orange;
}

后代元素选择器（Descendant combinator）

  • 选中指定元素内的指定后代元素
1
2
3
div span {
  color: skyblue;
}

兄弟元素选择器（Sibling combinator）

  • 选择下一个兄弟
1
2
3
4
5
6
7
8
9
#选中第一个<p>元素紧跟着一个同级的<span>元素时
p + span {
  color: red;
}

#选中<p>元素后面的所有同级<span>元素
p ~ span {
  color: red;
}

伪类选择器

伪类（不存在的类，特殊的类）

  • 用来描述一个元素的特殊状态，例如：第一个子元素，被点击的元素

  • :first-child 第一个子元素

  • :last-child 最后一个子元素

  • :nth-child()

    选中第 n 个子元素

    • n：第 n 个，n 的范围 0 到正无穷
    • 2n 或 even：选中偶数位的元素
    • 2n+1 或 odd：选中奇数位的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* ul下所有li，黑色 */
ul > li {
  color: black;
}

/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
  color: yellow;
}

/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
  color: green;
}

/* ul下第一个li，红色 */
ul > li:first-child {
  color: red;
}

/* ul下最后一个li，黄色 */
ul > li:last-child {
  color: orange;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
  /* 把没访问过的链接用特殊颜色标记出来 */
  a:link {
    color: aqua;
  }

  /* 把已经访问过的链接用特殊颜色标记 */
  a:visited {
    color: azure;
  }

  /* 鼠标经过时链接变色 */
  a:hover {
    color: black;
  }

  /* 鼠标按下还未弹起的时候变换的特殊颜色 */
  a:active {
    color: blue;
  }
</style>

伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

  • ::first-letter 表示第一个字母
  • ::first-line 表示第一行
  • ::selection 表示选中的内容
  • ::before 元素的开始
  • ::after 元素的最后
  • ::before和::after 必须结合content属性来使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 段落首字母设置大小为30px */
p::first-letter {
  font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line {
  background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection {
  background-color: green；;
}

/* div前加上内容 */
div::before {
  content: "BEFORE";
  color: red;
}

/* div后加上内容 */
div::after {
  content: "AFTER";
  color: blue;
}

选择器练习小游戏

三特性和其他

css的三特性

层叠性

相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。层叠性的主要解决冲突的问题

层叠性原则：

  • 样式冲突，遵循就近原则，那个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

继承性

为一个元素设置的样式，同时也会应用到它的后代元素上继承是发生在祖先后后代之间的，继承的设计是为了方便开发。

利用继承，可以将一些通用的样式（css中子标签会继承父标签的某些样式，如文本颜色和字号），统一设置到共同的祖先元素上。这样只需设置一次即可让所有的元素都具有该样式

注意，并不是所有的样式都会被继承：

  • 比如背景相关的，布局相关等的这些样式都不会被继承。

优先级

  • 相同选择器，遵循层叠原则
  • 不同选择器，按照权重来

​

选择器 权重
继承 0，0，0，0
元素标签选择器 0，0，0，1
类/伪类选择器 0，0，1，0
id选择器 0，1，0，0
行内样式表 1，0，0，0
important ∞ 
1
background-color: rgba(0, 0, 0, 0.3) !important;

使用important声明的属性优先级最高

注意：

如果继承的优先级为0，如果标签定义有样式表，则优先级高于其继承父标签的样式表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    <style>
        #father {
            color: aqua;
        }
        p {
            color: azure;
        }
    </style>
</head>
<body>
    <div id="father">
        <p></p>
    </div>
</body>

权重的叠加：

  • 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）

  • 选择器的累加不会超过其最大的数量级，类选择器再高也不会超过 ID 选择器

  • 如果优先级计算后相同，此时则优先使用靠下的样式

长度单位

  • 百分比：可以将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素的改变而改变

  • px：像素点

  • em：参考是父元素的font-size（1em = <self>.font-size），具有继承的特点。如果自身定义了font-size按照自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值

  • rem：css3新单位，相对于根元素html的font-size（1em = <root>.font-size），不会像em那样，依赖于父元素的字体大小，而造成混乱

#
关注我

最新文章

分类

×