CSS第二天总结 更多的选择符

CSS的选择符非常多，今天继续总结后面的选择符

1.id和class选择符
某些情况下我们用关系选择符或者伪类选择符无法选中一些元素时，我们可以给这些元素起
个名字或者分类，这就是id和class属性。
下面给出一个id为xxx，class为yyy的a链接：

<a href="" id="xxx" class="yyy">链接</a>

CSS代码：

#xxx{color: red} /*用#选择id（井号）*/
.yyy{text-decoration: none;} /*用.选择类（小数点）*/

　　

**id是唯一的，而class可以重复，虽然这是软性规定

2.关系选择符
关系选中符又可以分为4类，强调父子和兄弟元素的运用

包含选择符：E F / 子选择符:E>F

为什么这两个要一起说？以为这两个选择符功能非常相似
包含选择符：选中E元素包含在内的一切F元素，包括子元素和子元素的子元素(所有后代)
子选择符：只选中E元素的子元素F，无法作用于子元素的子元素（仅儿子）
例如span包含div和a元素，div元素又包含a元素：

<span>
<a>链接1</a>
<div> <a>链接2</a> </div>
</span>

　　

当使用包含选择符时,链接1和链接2都会变成红色字体:

span a{color: red}

　　

若使用子选择符，则只有链接1变成红色字体：

span>a{color:red}

　　

相邻选择符：（E+F) /兄弟选择符（E~F）

相邻选择符：忽略E元素的一切子元素，选中紧跟在E元素下面的F元素(E和F是同级元素)
兄弟选择符：同样，选中E元素所在级的所有F元素(即E和F是同级元素)

例如，div包含a和p元素，外面跟着内容为a3的a元素：

<div>
　　<a>a1</a>
　　<a>a2</a>
　　<p>p1</p>
　　<p>p2</p>
　　<p>p3</p>
</div>
　　<a>a3</a>

　　

CSS代码:

div+a{color: green;} /*div里面的第一个a元素不受影响，同级元素a3变成绿色*/
a~p{color: red;} /*a元素的所有兄弟元素p变成红色（p1,p2,p3）*/

　　

3.伪类选择符

E:link/E:visited/E:hover/E:active

这四个选择符关系紧密，旧版浏览器仅兼容超链接，而新版浏览器对hover没有太大限制
E:link为链接未激活的样式
E:visited为链接访问过的样式
E：hover为鼠标悬停的样式(不仅限于链接)
E:active为链接点击时的样式(鼠标按下，未松开的时候)

例如，下面给a链接定义未访问时为黑色且没下划线，访问后为蓝色，鼠标悬停为绿色，点击
时为红色的样式：

a:link{text-decoration: none;color: black;}
a:visited{color: blue;}
a:hover{color: green;}
a:active{color: red;}

　　

E:first-of-type/E:last-of-type/E:nth-of-type(n)/E:nth-last-of-type(n)
我把它理解成兄弟队列选择，意思分别是选中第一个，选中最后一个，选中第N个，选中倒数
第N个

例如给出一个列表：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

　　

若要第一个li为加粗字体，最后一个为蓝色字体，第二和倒数第二个为红色字体，则CSS代码如下：

li:first-of-type{font-weight: bold;}
li:last-of-type{color: blue;}
li:nth-of-type(2){color: red;}
li:nth-last-of-type(2){color: red;}

　　

拓展：E:only-of-type 选中另外一个唯一的同类E元素

E:empty
选中没有任何子元素包括文本的E元素
例如：

<div><a></a></div>
<div>23</div>
<div></div>

　　

CSS:

div:empty{border: 1px solid green;}

　　

效果：只是第三个div加了边框效果