十分钟快速上手CCS，选择器(Selector)

一、CSS 结构

(一)、选择器(Selector)

主要有四个选择器「元素」、「class」、「id」、「属性」，被选择到的对象，就会套用该设定值，未被选择到的项目就已预设值显示。

(二)、宣告 (Declaration)

宣告的部分就是一些设定值，上网查一下就很容易找到，学习上也相当容易，就不做整理啦~ 😅

二、选择器(Selector) 案例

(一)、「元素(tag)」选择器

被选择的「元素」，在该网页上皆会套用你所设定的样式，基本上会使用在全网页共同的样式，因为影响范围非常大，所以使用上要小心一点。

使用方式：直接输入你所想变更样式的「元素」。

/ 影响所有的 div 元素
div {
    边框：#FFFFFF 1px 实线；
}

// 影响所有的 p 元素
p {
    字体粗细：900；
}

(二)、「class」选择器

「class」因该会是属于公版，比如同一个「元素」在不同位置上，有着不同的样式，而且样式是可以分类的，就可以依不同样式去设计及套用。

使用方式：先输入「.」在输入你所想变更样式的「class」名称。

// 影响 class 为 divStyle01 的元素
.divStyle01 {
    边框：#FFFFFF 1px 实线；
}

// 影响 class 为 divStyle02 的元素
.divStyle02 {
    边框：#CCCCCC 2px 实线；
}

// 影响 class 为 pStyle01 的元素
.pStyle01 {
    字体粗细：300；
}

// 影响 class 为 pStyle02 的元素
.pStyle02 {
    字体粗细：900；
}

(三)、「id」选择器

使用「元素id」的话比较属于仅单一项目有着不同样式，与其他项目都没有共同的样式，就会以「 id」去个别更改其样式。

使用方式：先输入「#」在输入你所想变更样式的「元素id」。

// 影响 id 为 div01 的元素
#div01 {
    边框：#FFFFFF 1px 实线；
}

// 影响 id 为 div02 的元素
#div02 {
    字体粗细：900；
}

// 影响 id 为 p01 的元素
#p01 {
    边框：#FFFFFF 1px 实线；
}

// 影响 id 为 p02 的元素
#p02 {
    字体粗细：900；
}

(四)、「属性」选择器

会使用「属性」，表示仅针对有相应的「属性」之元素进行套用，有一定程度的减少设定「元素class」或「元素id」的动作。

使用方式：先输入「元素」再接上中括弧，并于中括弧内输入对应的「元素属性」。

// 影响类型属性为 checkbox 和 radio 的 input 元素
输入[类型=“复选框”]，输入[类型=“单选”]{
  高度：18px；
  宽度：18px；
内边距：2px 2px 2px 2px；
}

(五)、同时使用「多个选择器」

如果多个「元素」、「class」或者「id」有相同的设定值，可以用此方法渐少程式码的撰写。

使用方式：每个「选择器」，以「,」做区隔。

// 影响所有的 div 和 table 元素
分区，表格 {
    边框：#FFFFFF 1px 实线；
}

// 影响 class 为 divStyle、divStyle2 和 divStyle3 的元素
.divStyle, .divStyle2, .divStyle3 {
    边框：#FFFFFF 1px 实线；
}

(六)、选择「元素」或「class」或「id」下的「子元素」

可以针对「元素」或「class」或「id」下的子元素进行设定，减少「子元素」设定「元素class」或「元素id」的动作。

使用方式：先输入「元素」或「class」或「id」，再接着「>」符号或「一个空格」，在输入「子元素」。 (可继续向下延伸)

// 影响所有的div元素下面的a元素
div > 一个 {
    边框：#FFFFFF 1px 实线；
}

// class 为 divStyle 的元素下的所有 p 元素中的 a 元素徒步旅行
.divStyle > p > a {
    边框：#CCCCCC 1px 实线；
}

// id 为 div01 的元素下的所有 p 元素中的 a 元素徒步旅行
#div01 > p > a {
    边框：#AAAAAA 1px 实线；
}

(七)、其他应用

这里就举个案例作分享，比较少使用。

// 影响 class 为 divStyle 元素下的 a 元素的超链接样式
.divStyle a:link {
    颜色：蓝色；
}

// 影响 class 为 divStyle 元素下的一个元素的「已被点击过」的超链接样式
.divStyle a:访问过 {
    颜色：紫色；
}

// 影响 class 为 divStyle 元素下的一个元素的「鼠标在上」的超链接样式
.divStyle a:悬停 {
    红色;
}