关于CSS选择器

CSS选择器

CSS选择器是CSS规则的一部分，它能够告诉浏览器，相应的HTML元素的样式规则。

CSS选择器类型

1. ID选择器，类选择器，元素选择器

• ID选择器
  #ID{ }
• 类选择器
  .class{ }
• 元素选择器
  html,body{ }

2. 属性选择器
   属性选择器只对存在属性的HTML元素有效，常见<a>标签的href属性
   <a href="url"> URL </a>
a[href]{ color : red }
3. 伪类和伪元素选择器

• 伪类选择器
  伪类选择器可以选择处于特定状态的元素。
  article p :first-child{}

	<article>
		<p><p>
		<p><p>
	</article>

• 伪元素选择器
  伪元素更多表示实际的内容
  伪元素选择器更多像添加一个新的HTML元素一样，而不是将类应用于现有元素
  article p::first-line{}

4. 组合器选择器

• 后代选择器
  article p
• 子选择器
  表示直接匹配的元素
  div > p
• 相邻同级选择器
  表示同一层次的元素
  h1 + p
• 不相邻同级选择器
  h1 ~ p

CSS选择器优先级

!important > style 行内样式 > #ID选择器 > .类选择器 > 元素选择器 > *通配符 > 继承 > 浏览器默认值

CSS选择器的权重值

!important 最重
行内样式 1000
ID选择器 100
类选择器10
元素 1
若权重值一样，按照样式的先后顺序，靠后的优先。

区分::after,:after

:after是伪类选择器，::after伪元素选择器
伪类选择器一般不用于添加实际的内容。比如添加图标时，常用:after