sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > CSS选择器笔记

CSS选择器笔记

作者:xuhongji发布时间:2020-09-15分类:Html浏览:评论:0


导读:一、元素选择符序号选择器含义1.*通用元素选择器,匹配任何元素2.E标签选择器,匹配所有使用E标签的元素3..infoc...
一、元素选择符
序号 选择器 含义
1. * 通用元素选择器,匹配任何元素
2. E 标签选择器,匹配所有使用E标签的元素
3. .info class选择器,匹配所有class属性中包含info的元素
4. #footer id选择器,匹配所有id属性等于footer的元素

1. *

* {
  margin: 0;
  padding: 0;
}

在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空`margin`和`padding`。当然你在练习的时候使用这个没问题,但是我不建议在生产环境中使用它。它会给浏览器凭添许多不必要的东西。
`*`也可以用来选择某元素的所有子元素。

#container * {
  border: 1px solid black;
}

它会选中`#container`下的所有元素。

2. E

a { color: red; }
ul { margin-left: 0; }

如果你想定位页面上所有的某标签,不是通过`id`或者是’class’,直接使用标签选择器。

3. .info

.error {
  color: red;
}

这是个`class`选择器。它跟`id`选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用`class`。当你要对某个特定的元素进行修饰那就是用`id`来定位它。

4. #footer

#container {
   width: 960px;
   margin: auto;
}

在选择器中使用`#`可以用id来定位某个元素。

二、多元素的组合选择器
序号 选择器 含义
5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6. E F 后代元素选择器,匹所有属于E元素后代的F元素,E和F之间用空格分隔
7. E > F 子元素选择器,匹配所有E元素的子元素F
8. E + F 相邻元素选择器,匹配所有紧随E元素之后的同级元素F
9. E~F 匹配任何在E元素之后的同级F元素

5. E,F

a,li { color: red; }

匹配所有的a元素和li元素

6. E F

li a {
  text-decoration: none;
}

只匹配li后面多有的a元素(包括孙子辈)

7. E > F

p#container > ul {
  border: 1px solid black;
}

只匹配li后面多有的a元素(不包括孙子辈)`E F`和`E > F`的差别就是后面这个指挥选择它的直接子元素。看下面的例子:

 1 <p id="container">
 2 <ul>
 3     <li> List Itemli>
 4     <ul>
 5         <li> Child li>
 6     ul>
 7     <li> List Item li>
 8     <li> List Item li>
 9     <li> List Item li>
10 ul>
11 p>

`#container > ul`只会选中`id`为’container’的`p`下的所有直接`ul`元素。它不会定位到如第一个`li`下的`ul`元素。

8. E + F

ul + p {
   color: red;
}

这个叫相邻选择器。它指挥选中指定元素的直接后继元素。上面那个例子就是选中了所有`ul`标签后面的第一段,并将它们的颜色都设置为红色。

9. E~F

#container * {
  border: 1px solid black;
}0

`ul + p`选择器只会选择紧挨跟着指定元素的那些元素。而这个选择器,会选择跟在目标元素后面的所有匹配的元素。

三、关系选择器
序号 选择器 含义
10. E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如"[cheacked]"。以下同。)
11. E[att=val] 匹配所有att属性等于"val"的E元素
12. E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素
13. E[att|=val] 匹配所有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
14. E[att^="val"] 匹配所有att属性以"val"开头的元素
15. E[att$="val"] 匹配所有att属性以"val"结尾的元素
16. E[att*="val"] 匹配所有att属性包含"val"字符串的元素

10. E[att]

匹配所有具有att属性的E元素,不考虑它的值。

#container * {
  border: 1px solid black;
}1

上面的这个例子中,只会选择有class属性的元素。那些没有此属性的将不会被这个代码修饰。

11. E[att=val]

匹配所有att属性等于"val"的E元素

#container * {
  border: 1px solid black;
}2

上面这片代码将会把`class`属性值为`external`的标签设置为红色,而其他标签则不受影响。

12. E[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于"val"的E元素

#container * {
  border: 1px solid black;
}3

这个`~`符号可以定位那些某属性值是空格分隔多值的标签(因此只有外部链接是红色字体)。

13. E[att|=val]

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

#container * {
  border: 1px solid black;
}4

因此只有项目3为红色。

14. E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。

#container * {
  border: 1px solid black;
}5

#container * {
  border: 1px solid black;
}6

选择具有class属性且属性值为以a开头的字符串的E元素(因此只有项目1、2为红色)。

15. E[att$="val"]

匹配所有att属性以"val"结尾的元素

#container * {
  border: 1px solid black;
}7

选择具有class属性且属性值为以a结尾的字符串的E元素(项目4、6为红色)。

16. E[att*="val"]

匹配所有att属性包含"val"字符串的元素

#container * {
  border: 1px solid black;
}8

因为class的属性中都含有字母a所以结果均为红色。

四、伪类选择器
17. E:link 匹配所有未被点击的链接
18. E:visited 匹配所有已被点击的链接
19. E:hover 匹配鼠标悬停其上的E元素
20. E:active 匹配鼠标已经其上按下、还没有释放的E元素
21. E:first-child 匹配父元素的第一个子元素E
22. E:last-child 匹配父元素的最后一个子元素E
23. E:only-child 匹配父元素仅有的一个子元素E
24. E:nth-child(n) 匹配父元素的第n个子元素E
25. E:nth-last-child(n) 匹配父元素的倒数第n个子元素E
26. E:first-of-type 匹配同类型中的第一个同级兄弟元素E
27. E:last-of-type 匹配同类型中的最后一个同级兄弟元素E
28. E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E
29. E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
30. E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

17. E:link

设置超链接a在未被访问前的样式。

#container * {
  border: 1px solid black;
}9

a { color: red; }
ul { margin-left: 0; }0

运行结果:外部链接为红色;内部链接为蓝色

18. E:visited

设置超链接a在其链接地址已被访问过时的样式。

19. E:hover

设置元素在其鼠标悬停时的样式。

20. E:active

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

21. E:first-child

匹配父元素的第一个子元素E。

a { color: red; }
ul { margin-left: 0; }1

a { color: red; }
ul { margin-left: 0; }2

结果只有列表第一条信息test1为红色

22. E:last-child

匹配父元素的最后一个子元素E。

a { color: red; }
ul { margin-left: 0; }3

结果只有列表最后一条信息test5为红色

23. E:only-child

匹配父元素仅有的一个子元素E。

a { color: red; }
ul { margin-left: 0; }4

a { color: red; }
ul { margin-left: 0; }5

结果只有列表test1为红色

24. E:nth-child(n)

匹配父元素的第n个子元素E。

a { color: red; }
ul { margin-left: 0; }6

结果只有列表test3为红色

25. E:nth-last-child(n)

匹配父元素的倒数第n个子元素E。

a { color: red; }
ul { margin-left: 0; }7

结果只有列表test3为红色

26. E:first-of-type

匹配同类型中的第一个同级兄弟元素E。

a { color: red; }
ul { margin-left: 0; }8

a { color: red; }
ul { margin-left: 0; }9

结果只有这是段落1为红色。

27. E:last-of-type

匹配同类型中的最后一个同级兄弟元素E。

.error {
  color: red;
}0

结果只有这是段落5为红色。

28. E:only-of-type

匹配同类型中的唯一的一个同级兄弟元素E。

.error {
  color: red;
}1

结果只有我是一个p元素为红色。

29. E:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E,n 可以代表数字也可以代表字母。

.error {
  color: red;
}2

结果只有这是段落2为红色。

n为odd时表示奇数;n为even表示偶数;

.error {
  color: red;
}3

结果:段落1、3、5显示为红色。

.error {
  color: red;
}4

结果:段落2、4显示为红色。

30. E:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素E,n 可以代表数字也可以代表字母。。

.error {
  color: red;
}5

结果:段落4显示为红色。

n为odd时表示奇数;n为even表示偶数;

.error {
  color: red;
}6

结果:段落1、3、5显示为红色。

.error {
  color: red;
}7

结果:段落2、4显示为红色。


欢迎 发表评论:

Html排行
«    2024年6月    »
12
3456789
10111213141516
17181920212223
24252627282930
标签列表
网站分类
文章归档
最近发表
推荐文章