css 选择器-选中元素的那些事

选择器的概念

选择器的作用和目的都很简单,就是按照一定的规则选出符合条件的元素,为之添加css样式.

选择器的种类

选择的器的种类繁多,大概可以归为这么几大类

• 通用选择器
• 元素选择器
• 类选择器
• id选择器
• 属性选择器
• 组合
• 伪类
• 伪元素

下面对这几种选择器做统一的总结与演示.

通用选择器

特点

通用选择器会将所有的元素都选中,效率相对来说比较低,尽量不要使用.

通用选择器 通过 '*' 字符 来选中所有的元素.

使用场景

一般用来给所有元素作一些通用性的设置

• 比如内边距,外边距
• 重置一些内容

用法演示

通常我们可以对页面中的 所有元素进行一些统一的设置或者重置某些css属性,比如设置页面中所有的文字大小,设置所有元素的margin为0,padding为0,方便布局,设置所有的元素的盒子模型类型.

* {
    margin: 0 0;
    padding: 0 0;
    font-size: 20px;
    box-sizing: border-box;
  }

总结

通用选择器 一般不使用,因为会选中所有元素,即使你页面中没有使用某些类型的标签(html元素),css 的选中算法肯定也是要过一遍这种类型的便利的,所以更建议只针对一些常用的元素进行重置,比如:

body, p, div, h2, span {
  margin: 0;
  padding: 0;
  font-size: 20px;
  box-sizing: border-box;
}

这里使用的是另外一种选择器,元素选择器

元素选择器

概念

元素选择器,使用元素的名称来选择选元素的选择器.

使用场景

当需要对某种特定类型的标签(html)元素进行 一个统一的设置的时候,可以使用这种选择器.

比如:对所有的div 元素进行统一设置:

 div {
    background: yellow;
  }

类选择器

概念

类选择器是我们平时使用最多的 一种选择器,通过 '.' 后面跟类名来选中对应的元素.

比如 当我们要选中 一个类名为cat元素,可以这么做

.cat{
  /* css 属性*/
}

使用场景

当需要对类名相同的元素一个元素或多个元素设置css时,使用该选择器.

id 选择器

通过 '#' 后面跟 id 值 形式的选中元素的方式称为id 选择器.

使用场景

需要通过id 选中某个元素时,使用.

#cat {
    background-color: red;
  }

<div id="cat">i am cat</div>

id 选择器使用注意事项

一个html 文档里的id 值 是唯一的,不能重复.

• id值如果由多个单词组成,单词之间可以用中划线- (又叫连字符 ),**下划线_**连接
• 最好不要使用标签名作为id值

属性选择器

概念

通过对元素的某些属性或者属性值进行匹配,选中元素的选择器.

• 拥有某一个属性[att]
• 属性等于某个值[att=val]

其他类型的属性选择器(了解)

• [attr*=val]:属性值包含某一个值 val;
• [attr^=val]:属性值以val 开头
• [attr$=val]:属性值以val 结尾
• [attr|=val]:属性值等于val 或者以val开头后面紧跟连接符-
• -[attr~=val]:属性值包含val,如果有其他值必须以空格和val分割

使用场景

不常用,按需使用.

组合选择器

概念

组合选择器的类型比较多,具体可分为如下几个类型

• 后代选择器
• 兄弟选择器
• 交集选择器
• 并集选择器

后代选择器

后代选择器一:所有的后代(直接/间接的后代)

选择期之间以空格 分割

后代选择器二:直接子代选择器(必须是直接子代)

选择器之间以 > 分割

<div class="box">
  <div>
    <span>哈哈</span>
  </div>
</div>
<div class="box">
  <span>呵呵</span>
</div>

  .box > span {
    color: red;
  }

兄弟选择器

兄弟选择器一:相邻兄弟选择器 +

使用 + 连接

兄弟选择器二:普遍兄弟选择器 ~ 使用符号 ~ 连接 (两个选择器可以是任意类型)

<div class="one">
  哈哈
  <span>我是子代</span>
</div>
<div>呵呵</div>
<div class="xixi">嘻嘻</div>
<div>嘿嘿</div>

.one ~ div {
    color: red;
  }
  .one ~ .xixi {
    color: palevioletred;
  }

交集选择器

交集选择器,需要同时符合两个选择器的条件(两个选择器紧密连接)

在开发中通常为了精确的选择某一个选择器, 两个选择器之间通过 . 连接,中间没有空格

<div class="one two">one</div>
<div class="one">one</div>
<div class="two">two</div>

.one.two {
    color: red;
  }

并集选择器

并集选择器:符合一个选择器条件即可(两个选择器以,号分割)

在开发中,通常为了给多个元素设置相同的样式;

<div class="one two">one</div>
<div class="one">one</div>
<div class="two">two</div>

.one,
.two {
color: red;
}

伪类

概念

伪类是选择器的一种 ,它用于选择 处于特定状态的元素

比如,input,textarea元素的聚焦状态,a标签的访问后的状态等等

伪类的分类

1.动态伪类

:link,:visited,:hover,:active,:focus

2.目标伪类:

:target

3.语言伪类

:lang

4.元素状态伪类

:enabled,:disabled,:checked

5.结构伪类

• :nth-child(),:nth-last-child(),:nth-of-type(),:nth-last-of-type()

• :first-child,:last-child,:first-of-type,:last-of-type

• :root,:only-child,:only-of-type,:empty

6.否定伪类 :not()

动态伪类 (主要对于a标签使用)

使用举例:

• a:link 未访问的链接
• a:visited 已访问的链接
• a:hover 鼠标挪动到链接上(重要)
• a:acitve 激活的链接(鼠标在链接上长按住未松开)

使用注意事项

• :hover 必须放在:link和:visited 后面才能完全生效
• :active 必须放在:hover 后面才能完全生效
• 所以建议的编写顺序是:link,:visited,:hover,:active

除了a元素,:hover,:active也能用在其他元素上

<a href="#">百度</a>

a:link {
    background: green;
    color: white;
  }
  a:visited {
    background: blue;
    color: white;
  }
  a:hover {
    background: red;
    color: white;
  }
  a:active {
    background: pink;
    color: white;
  }

动态伪类-:focus

• :focus 指当前拥有输入焦点的元素(能接收键盘输入)

• 因为lianjie a 元素 可以被键盘的Tab 键选中聚焦,所以**:focus 也适用于a 元素**

• 动态伪类编写顺序建议为

  :link,:visited,:focus,:focus,:active

直接给a元素设置样式,相当于给a元素的 所有动态伪类都设置了 相当于 a:link,a:visited,a:hover,a:active,a:focus的color 都是red

结构伪类-:nth-child()

:nth-child(1)

是父元素的第 1 个子元素

:nth-child(2n)

• n 代表任意正整数和 0
• 是父元素中的 第偶数个子元素 (第2,4,6,8,...个)
• 跟:nth-child(even)同义

:nth-child(2n+1)

• n代表任意正整数和0
• 是父元素中的第奇数个元素 第(1,3,5,7...个)
• 跟:nth-child(odd)同义

:nth-child(-n+2)

代表 前2个元素

结构伪类-:nth-last-child()

:nth-last-child()的语法跟:nth-child()类似,不同点是:nth-last-child()从最后一个子元素开始往前计数

:nth-last-child (1),代表倒数第一个子元素 :nth-last-child(-n+2),带白最后 2个元素

:nth-of-type()

:nth-of-type() 用法跟:nth-child()类似

不同点是 :nth-of-type() 计数时只计算同种类型的元素

nth-last-of-type()

:nth-last-of-type() 用法跟:nth-last-type()类似

不同点是:nth-last-of-type() 从最后一个这种类型的子元素开始往前计数

:nth-child() 与 nth-type-of 的区别(***** 五星重要)

首先两种伪类都支持 限定子元素类型和不限定子元素类型的用法:

不限定子元素类型的用法

.box :nth-child(4) {
    color: red;
}
.box :nth-of-type(4) {
    color: green;
}

此时两者主要的区别是

• :nth-child() 不区分类型,它只会把所有的子元素排序,然后选中 对应 index 的元素,因此它只会选中一个子元素,因为只有一个序列.
• nth-type-of 会把所有的子元素分为不同的序列,每个序列都有自己的index,然后选中每个序列中,用户选择的index 的值的元素,也就是说有几种不同类型的元素并且有对应index值的元素,就会选中几个元素.

<div class="box">
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
  <div>div1</div>
  <span>span4</span>
  <div>div2</div>
  <span>span5</span>
  <div>div3</div>
  <div>div4</div>
  <div>div5</div>
</div>

:nth-child():

.box :nth-child(4) {
    color: red;
  }

只选中了div1 :nth-type-of()

.box :nth-of-type(4) {
    color: green;
  }

同时选中了 div4 和span4

限定子元素的类型的用法

此时,两者的区别是:

:nth-child()会先找到对应元素的位置但是不匹配类型,然后再判断类型,如果匹配则选中,如果不匹配,就不选中任何元素. :nth-type-of 会同时根据类型和index 找对应的元素,如果匹配则选中,不匹配则不选中

<div class="box">
  <span>span1</span>
  <span>span2</span>
  <span>span3</span>
  <div>div1</div>
  <span>span4</span>
  <div>div2</div>
  <span>span5</span>
  <div>div3</div>
  <div>div4</div>
  <div>div5</div>
</div>

:nth-child()

.box span:nth-child(4) {
    color: red;
  }

因为第4个位置上的元素类型是div 而不是 span ,所以未选中任何元素

:nth-type-of()

.box span:nth-of-type(4) {
    color: green;
  }

因为子元素中有第4个 类型为span 的元素,所以选中了这个元素

否定选择器

:not() 的格式是:not(x)

• x 是一个简单选择器
• x 可以是 元素选择器,通用选择器,属性选择器,类选择器,id选择器,伪类(除否定伪类以外的伪类)

:not(x)表示 除 x 以外的元素

其他常见的伪类(不怎么用)

• :fist-child,等同于:nth-child(1)
• :last-child,等同于:nth-last-child(1)
• :first-of-type,等同于:nth-of-type(1)
• :last-of-type,等同于:nth-last-of-type(1)
• :only-child,是父元素中唯一的子元素
• :only-of-type.是父元素中唯一的这种类型的子元素

偶尔会用

• :root,根元素,就是html元素
• :empty 代表 里面完全空白的元素

伪元素

伪元素并不是选择器,它是利用选择器的一部分选择特性来实现某些功能的元素,伪元素和选择器并不是一样的概念,这里先区分下, 只是为了知识点的聚合,在这里做统一的总结.

常见的伪元素有

• :first-line,::first-line
• :first-letter,::first-letter
• :before,::before
• :after,::after

为了区分伪元素和伪类,建议伪元素使用2个冒号,比如::first-line

伪元素- ::first-line,::first-letter(了解)

::first-line 可以针对首行文本设置属性 ::first-letter 可以针对首字母设置属性

伪元素 ::before 和 ::after(常用)

::before 和::after 用来在一个元素的内容之前或之后插入其他内容(可以是文字,图片)

通常通过content 属性来为一个元素添加修饰性的内容

<div class="box">
    <span class="before">123</span>
    我是div元素
    <span class="after">abc</span>
  </div>

  <div class="box2">
    <span class="before">123</span>
    我是box2
    <span class="after">abc</span>
  </div>

  <!-- 伪元素方案 -->
  <div class="box3 item">我是box3</div>
  <div class="box4 item">我是box4</div>

  <!-- 伪元素的补充 -->
  <div class="box5">我是box5</div>

.before {
  color: red;
}

.after {
  color: blue;
}

/* 伪元素 */
.item::before {
  content: "321";
  color: orange;
  font-size: 20px;
}

.item::after {
  /* content: "cba"; */
  content: url("../images/hot_icon.svg");
  color: green;
  font-size: 20px;

  /* 位置不是很好看(以后) */
  position: relative; /* 相对定位 */
  left: 5px;
  top: 2px;
}

/* .new::after {
  content: url("../images/new_icon.svg");
} */

/* 额外的补充 */
/* ::after是一个行内级元素 */
.box5::after {
  /* 使用伪元素的过程中, 不要将content省略 */
  content: "";

  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #f00;
}

css 样式不生效 技巧

有时候css 属性不好使,有可能是因为

1. 选择器的优先级太低

2. 选择器没选中对应的元素

3. css属性的使用形式不对

• 元素不支持此CSS 属性,比如span 默认是不支持width 和height的
• 浏览器不支持此CSS属性,比如旧版版的浏览器不支持一些css moudle
• 被同类型的CSS 属性覆盖,比如font 覆盖 font-size

如何解决问题

充分利用浏览器的开发者工具进行调试(增加,修改样式),查错