CSS基础选择器简介

一、概念

1. 找出页面中的元素，以便给他们设置样式。
2. 使用多种方式选择元素。

        （1）按照标签名、类名、id。

        （2）按照属性。

        （3）按照 DOM 树的位置。

二、基础选择器

1）通配选择器 “ * ” ：它匹配页面中所有的元素。

2）标签选择器：通过标签名选中一个元素。

3）id 选择器：通过 “ # ” + id 属性值，可以选中。（页面中 id 值唯一）

4）类选择器：通过 class 选择这个元素。如下图（abc被选中）

.abc {
  ...
}

5）属性选择器：通过标签名与属性组成。即  标签名[ 属性 ]

                           通过标签名、属性和属性值组成。即   标签名[ 属性 = "属性值" ]

6）标签属性的属性值以某符号开头，即   标签名[ 属性 ^ = " 符号 " ]

7）标签属性的属性值以某符号结尾，即   标签名[ 属性 $ = " 符号 " ]

三、伪类

    不基于标签和属性定位元素。

1.动态伪类

    根据元素所属的状态来选择

a:link (选中一个正常链接)

a:visited （选中访问过的链接）

p:hover （鼠标悬浮在p元素上触发相应的样式）常用

p:active （鼠标点击时触发的样式）

:focus （用于input）输入框被点击时的样式

2.结构性伪类

     通过元素在 DOM 中所处的位置被选中。如

p:first-child
p元素在父级中为第一个元素则被选中。

P:last-child
p元素在父级中为最后一个元素则被选中。

四、组合器

CSS 组合器https://www.w3school.com.cn/css/css_combinators.asp

五、选择器组合

body，h1,h2,h3,h4,h5,h6 {
    margin: 0;
}

[ type = "checkbox" ],[ type = "radio" ] {
    padding: 0;
}