css选择器

css选择器

1. CSS（给HTML标签设置样式的）
   1. CSS定义：
      层叠样式表
   2. CSS语法：
      选择器 {k1: v1; k2:v2...}
   3. CSS代码存在的位置
      1. 直接写在标签中的style属性
      2. 写在head标签中的style标签内
      3. 写在单独的CSS文件中，通过link标签引用
      4. CSS选择器（定义如何在HTML中找标签）
2. 基本选择器
   1. ID选择器 --> #p1
   2. 标签选择器 --> div
   3. 类选择器 --> .c1
   4. 通用选择器 --> *
3. 组合选择器
   1. 子子孙孙选择器（后代选择器） --> div p
   2. 儿子选择器 --> div>p
   3. 毗邻选择器(紧挨着下面的标签) --> div+p
   4. 弟弟选择器(同级下面所有的标签) --> div~p
4. 属性选择器
   1. 有某个属性的标签 --> div[title]
   2. 有属性并且属性值等于我给定的值 --> div[title='hello']
5. 分组和嵌套
   1. 分组应用于多个选择器找到的标签应用相同的样式时，为了避免重复写到一起
      div, p {color: red}
   2. 基本选择器之间可以任意嵌套组合使用
      .c1>p
6. 伪类选择器
   1. a:link-->未访问的链接
   2. a:visited-->已访问的链接
   3. a:active-->点击的那一刻
   4. a:hover-->鼠标移上去之后
   5. input:focus-->input输入框获取焦点时样式
7. 伪元素选择器
   1. #c3:first-letter-->id为c3的第一个单词
   2. .p:after-->class为p的元素后
   3. .p:before-->class为p的元素之前
8. 选择器的优先级
   1. 当选择器相同的时候
      谁最后加载听谁的！
   2. 选择器不同的时候
      1. 内联样式(1000) > ID选择器(100) > class选择器(10) > 元素选择器(1)
      2. 不讲道理的!import