css选择器

基本选择器

首先来说一下，什么是选择器。在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。 选择器为样式规则指定一个作用范围。

基础选择器包括：

• 标签选择器
• 类选择器
• ID选择器
• 通用选择器

标签选择器

顾名思义就是通过标签名来选择元素：

示例：

p {
  color: red;
}

ID选择器

通过元素的ID值选择元素：

示例：

#i1 {
  color: blue;
}

类选择器

通过样式类选择元素：

示例：

.c1 {
  color: blue;
}

通用选择器

使用*选择所有元素：

* {
  color: black;
}

高级选择器

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：

div p {
  color: red;
}

从div的所有后代中找p标签，设置字体颜色

儿子选择器

div>p {
  color: red;
}

从div的直接子元素中找到p标签，设置字体颜色

毗邻选择器

div+p {
  color: red;
}

找到所有紧挨在div后面的第一个p标签，设置字体颜色

弟弟选择器

div~p {
  color: red;
}

找到所有div标签后面同级的p标签，设置字体颜色

属性选择器

除了HTML元素的id属性和class属性外，还可以根据HTML元素的特定属性选择元素。

根据属性查找

[title] {
  color: red;
}

根据属性和值查找

找到所有title属性等于hello的元素：

[title="hello"] {
  color: red;
}

找到所有title属性以hello开头的元素：

[title^="hello"] {
  color: red;
}

找到所有title属性以hello结尾的元素：

[title$="hello"] {
  color: red;
}

找到所有title属性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}

找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {
  color: red;
}

表单常用

input[type="text"] {
  backgroundcolor: red;
}

分组选择器

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

例如：

div,p {
  color: red;
}

为div标签和p标签统一设置字体为红色的样式。

伪类选择器

常用的几种伪类选择器。

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

a:link {
  color: blue;
}

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

a:visited {
  color: gray;
}

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

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

鼠标点击瞬间的样式：

a:active {
  color: yellow;
}

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

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

伪元素

介绍常用的伪元素。

first-letter

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

例如：

p:first-letter {
  font-size: 48px;
}

before

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

例如：

p:before {
  content: "*";
  color: red;
}

在所有p标签的内容前面加上一个红色的*。

after

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

例如：

p:after {
  content: "＊";
  color: red;
}

在所有p标签的内容后面加上一个蓝色的＊


选择器的优先级

学过了很多的选择器，有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？它是按照下面的选择器的权重规则来决定的。

内联样式1000  id选择器 100 类选择器10 元素选择器1

转载于:https://www.cnblogs.com/zero1230/p/9954613.html