Chapter 3 Id, 选择器, 伪类

CSS 命名规则:

只能使用字母,数字,下划线(_),连字符(-)

Id 的作用

可以作为锚点, 当访问url的时候,可以在后面加上#, 网页会直接定位到该标签
<div id="R">test</div>
访问的url : index.html#R
就可以直接定位到这个元素
name属性也有这个作用
<a name="R">test</a>
也可以实现相同的功能

Paste_Image.png
Paste_Image.png

伪类:

  • :link
  • :hover
  • :visited
  • :active
  • :foucs
  • :not()
img:not(.port)
a[href^='http://']:not([href*="google.com"])
  • 用否定选择器只能使用简单的选择器(元素选择器, 通用选择器,类选择器,ID选择器或者伪类)
  • 不能使用派生选择器,伪类元素群组选择器或其组合
  • 不能使用多个否定选择器

伪元素

  • :first-line
  • :first-letter
  • :before
  • :after
  • ::selection . (只能设置color 和backgorund-color,必须双冒号)
  • :frist-child
  • :last-child
  • :nth-child
tr:nth-child(odd)
tr:nth-child(even)
tr:nth-child(3n+2)
  • :first-of-type
  • :last-of-type
  • :nth-of-type

属性选择器

  • 属性等于某个值
  • 属性以xxx开头 ^=
  • 属性以xxx结尾 $=
  • 属性包含xxx 。 *=
input[type="text"]
a[href^="http://"]
a[href$=".pdf"]
img[src*="headshot"]

推荐阅读更多精彩内容