css学习笔记-----选择器

最新推荐文章于 2025-09-12 09:51:07 发布

原创最新推荐文章于 2025-09-12 09:51:07 发布 · 259 阅读

CC 4.0 BY-SA版权

本文详细介绍了CSS中的各类选择器，包括基本的选择器如类选择器、ID选择器、属性选择器等；组合选择器如子代选择器、相邻兄弟选择器、通用兄弟选择器等；以及伪类选择器如:first-child、:last-of-type等。并解释了它们的应用场景及区别。

CSS Selectors

1..class class选择器
2.#id id选择器
3.p 属性选择器
4.div, p “逗” 有的意思
5.div p div下的p元素这个p可以是好多级的p 孙子级别的
6.div > p div 为父亲的所有p选择
7.div + p 紧跟div平级的p选择，如果还有p则不行
8.p ~ ul 与p平级下的所有ul

[]简称框框选择器,属性选择器

1.[attribute]
2.[attribute=value]
3.[attribute~=value]:包含单词有value的
4.[attribute|=value]:以en开头的
5.[attribute^=value]:以value开头的
6.[attribute=value*]:有value包含的值
7.[attribute$=value]:以value结束的

伪类选择器

1.:active
2.:visited
3.:checked
4.:enabled
:disabled
input[type=text]:enabled { background: #ffff00; }//框内可以修改 input[type=text]:disabled { background: #dddddd; }//框内不能修改
5.:empty Selects every element that has no children (including text nodes)
6.:first-letter
p:first-letter { font-size: 200%; color: #8A2BE2; }
7.::first-line
8.:first-child
p:first-child{ background: #ff0000; }
9.:first-of-type Selects every p element that is the first element of its parent
p:first-of-type { background: #ff0000; }
10.:focus
11.:hover
12.:in-range
13:last-of-type
p:last-of-type{ color:#000; //在父类元素中，最后一个p元素的样式 }
14.:link 所有的链接
15.:not(p)
16.p:nth-child(2)
17.p:nth-last-child(2)
18.p:nth-of-type(2)
19.:only-of-type
20.:only-child
21.:read-only
22.:read-write
23.:visited
24.p:last-child
p:last-child { color: #ff0000; }