【学习笔记】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: 选取，改变选取的样式。