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

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; }

总结一下：

1.有child表示该元素规定是第几个孩子，不管是同类还是不同类，如果没有该元素，样式不能生效
2.有of表示对于父类元素下，同类元素中的第几个，而不是孩子节点的第几个