HTML+CSS学习记录04--CSS选择器

3、常见的选择器

• 元素（标签）选择器
  
  
  组合选择器:
  
  
• 类选择器
  
  
  a) 结合标签选择器
  
  
  
  
  b)多类选择器
  两个属性用空格隔开
  
  
  c)链接多个类选择器
  同时包含了d1、d2这两个属性的才能生效
  

• id选择器
  ⼀个id选择器的属性值在html⽂档中只能出现⼀次，避免写js获取id时出现混淆
  
  

• 通配符选择器*
  *代表当前文档的所有样式
  但优先级比较低，容易被别处声明的属性覆盖
  常用于声明margin
  
  

• 派⽣选择器
  a)后代选择器 空格
  一个元素是另一个元素的后代
  可以叠好几层
  
  
  b)⼦元素选择器 >号
  
  
  c)相邻选择器（兄弟选择器） +号
  li标签跟li标签有同一个父级
  
  h1标签跟p标签有同一个父级
  
  
  4、特殊的选择器
  显示红色字体：
  
  但是如果前端的数据是通过后端拿到的，这样设置红色字体的方法可能会出现问题。

• 伪类选择器

:first-child {} //第⼀项
:last-child {} //最后⼀项
:nth-child(n) {} //第n项

:nth-child(2n+1){} //奇数项
:nth-child(2n) {} //偶数项

:not() //否定伪类 除了第n项

结合之前的伪类选择器使用

a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/

a:hover {color:#FF00FF;} /⿏标悬浮后的链接/
a:active {color:#0000FF;} /已选中的链接/

• 伪元素选择器
  css3之后都是两个冒号
  
  使用伪元素选择器时class取名尽量规范

::first-letter //第⼀个 只能用于块级元素

::first-line //第⼀⾏ 只能⽤于块级元素

::selection //选中

把鼠标选中的设置成绿色


不通过标签添加内容

::before //在开始位置
::after //在结束位置