10.2.2 选择器

基本选择器

  • 标签选择器:tag
  • 类选择器:.class
  • ID选择器:.id
  • 通用选择器:*

组合选择器

  • 后代选择器: (空格)
  • 儿子选择器:>
  • 毗邻选择器:+
  • 弟弟选择器:~

属性选择器

  • 根据属性查找:[title]
  • 根据属性和值查找:[title=“value”]

分组选择器

当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

伪类选择器

没有访问的超链接a标签样式:

a:link {
  color: blue;
}

访问过的超链接a标签样式:

a:visited {
  color: gray;
}

鼠标悬浮在元素上应用样式:

a:hover {
  background-color: #eee; 
}

鼠标点击瞬间的样式:

a:active {
  color: green;
}

input输入框获取焦点时样式:

input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

first-letter:用于为文本的首字母设置特殊样式。

before:用于在元素的内容前面插入新内容。

after:用于在元素的内容后面插入新内容。

选择器的优先级

在这里插入图片描述
还有一种不讲道理的!import方式来强制让样式生效,但是不推荐使用。

因为大量使用!import的代码是无法维护的。

发布了726 篇原创文章 · 获赞 402 · 访问量 31万+

猜你喜欢

转载自blog.csdn.net/weixin_43336281/article/details/104659048