day27－认识一些不太熟的伪类选择器（上）

安安，今天来讲点伪类选择器，之前的Jquery里面与前几日文章有写了一小部分，不过希望能把一些集中统整下来～
这次资源是阅读金鱼选择器所笔记的，自己笔记写的部分为未来比较有机会出现的选择器，有省略过一些，有兴趣的可以再去翻翻看这本书:)在新手时期算是帮助了不少～

伪类选择器？ 由单一个「：」作为开头，接着伪类选取器的名称，如:hover、:active

伪类的子分类。

注意：优先权与class相同欧！

▶超连结动态

a:hover（当滑鼠滑动到上面）

a:active点击当下

a:focus取得焦点

a:visited点击过後

▶表单状态选选器 :checked

当表单被勾选的状态，可应用情境：手机网页的选单、清单开关、清单选取效果等等。

下面范例为，可让checkbox被勾选时变大：

<input type="checkbox" class="checkbox" id="box1">
<label for="box1">ＡＡＡＡＡ</label>

#box1:checked{
  transform: scale(2);
}

▶首字选取器 :first-letter

字面上的意思来说就是首字（啊喂有讲跟没讲一样

▶空值选取器 :empty

专门选取内容是空的物件（完全的没有内容）

:empty{
.....}

div:empty{
....}

▶否定选取器:not()

选取条件内以外的

<form>
  <input type="text">
  <input type="button">
  <input type="submit">
</form>

当text与button都没有class但想选取他们的时候可以利用:not()

//要选取的物件:不要选取到的(排除条件){....}
input:not([type="submit"]){ ..... }

▶:first-child & :last-child（重点在顺序）

:first-child 选第一个子物件

:last-child 选最後一个子物件

<div class="group">
  <h1>A</h1>
  <h2>B</h2>
  <h3>C</h3>
  <h2>B</h2>
  <h3>C</h3>
</div>

.group h2:first-child{
  color: red;
}

可以想想看这会不会让.group里第一个h2文字变颜色？

答案是不会！

why? why? why?

因为:first-child是选取第一个子物件，在.group的第一个子物件是h1，接着往下看，h2是第二个子物件非第一个，所以会抓取失败。（之前新手时期常想说为何没效果，才知道原因是这样）

所以，改成下面这个程序码才会产生作用：

记得左侧要有空格，代表为了要选取.group里面的第一个子物件。

.group :first-child{
  color: red;
}

▶:first-of-type & :last-of-type（先看分类再看顺序）

选取"同类"元素中的第一个物件与最後一个物件。

那与:first-child & :last-child 不同之处？

first-child & :last-child 不管分类只管"顺序"

承刚刚上述的html，如果我想选取h2里面的第一个变成红色字，就能使用下列：

.group h2:first-of-type{
  color: red;
}

意思是，:first-of-type为我要选取分类为h2类型，里面第一个物件。

＊但万一没有指定类型会怎样呢？

.group :first-of-type{
  color: red;
}

结果会发现前三个物件都被选取到，没指定分类情况下，浏览器会把每一个类型元素的第一个选起来了。

▶独子选取器:only-child

单纯只看数量的一个选取器。

▶类型独子选取器:only-of-type

选取唯一一个该类型的物件，一个区块内有一个div与一个p的话，会被同时选；一个区块内有两个div与一个p的话，只会选到一个的p。

那明天会再写关於剩下的伪类选择器唷！
敬请期待:P