【学习笔记】CSS Selector 选择器

在使用internal styling和external styling时，会需要用到选择器，用以选择HTML中要套用CSS的元素。

universal selector

选择全部的元素。

*{}

element selector

标籤选择器，选取所有同样的标籤。

h1{}

id selector

id选择器，用以选择在标籤中设定的id。
html中的标籤都仅能设定一个id，且须是唯一的。

#idname{}

class selector

class选择器，可以选择在标籤中设定的class(类别)。
标籤中仅能有一个id，但可以有很多class。

.class{}。

在标籤写两个class以上时，写class = "class1 class2 class3”即可。

以上三个标籤可以複合使用，

h1.class{color: black;}

就会是h1跟class=”class”的才会被使用。

grouping selector

不同标籤或选择器要做同样的设定，可以用grouping selector，语法:

h1, h2{color: black;}

Decendent Selector

后裔(子元素)选择器，若有一html为:

<div class="link1"><a href="url"></div>

则可以使用decendent selector:

div.link1 a{}

attribute selector: 属性选择器，语法:

input[type="text"]{}

pseudo classes: 伪类别，是一个keyword，被加入到selector的后面:

textarea:hover{background-color: red;}

(textarea: 可以自由写东西的标籤)

:hover: 滑鼠游标移到的位置

:active: 滑鼠压住会套用CSS

:focus: 滑鼠点击后会套用CSS，直到点击下一个地方。

:nth-child(number): 每几个number的元素会适用CSS。

pseudo elements: 语法:

p::before{content: ">>";}

::before: 在选取的东西(段落)之前套用CSS。

::after: 在选取的东西后方套用CSS。

::first-letter: 对首字做CSS。

p::first-letter{font-size: 2rem;}

(2rem: 两倍大)

::selection: 选取，改变选取的样式。