2.8学习日志

今天主要学习了css的一些选择器的使用以及用所学的前端方面知识完成课后练习。

一.css基本选择器

css的基本选择器有四种，分别是标签选择器、类选择器、id选择器和通配符选择器；

1.标签选择器

css中最基础的选择器，用法是：标签名{属性名：属性值}

2.类选择器

使用前需要给需要为其设计样式的元素设置一个class类名，使用方法是：.类名{属性名：属性值}

3.id选择器

使用方法大致与类选择器相同，不同在于将“.”换成“#”，并且一个元素可有有多个类名，但是id名只能有一个

4.通配符选择器

选择html页面中所有的元素，用法为*{属性名：属性值}

基本选择器的优先级从小到大排序为：通配符选择器>标签选择器>类选择器>id选择器

二.css层次选择器

1.后代选择器

选择父元素内某类后代元素，用法：父元素_后代元素{属性名：属性值}

<style>

        ul li {

            color: red;

        }

</style>

---

<ul>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <div><li>hhh</li></div>

</ul>

运行后ul里的所有li都改变了颜色

2.子代选择器

选择父元素内某类子元素，用法：父元素>子元素{属性名：属性值}

<style>

        ul> li {

            color: red;

        }

</style>

和后代选择器相同的素材运行后只有ul的三个儿子li变了颜色，而div里的li没有改变颜色

3.兄弟选择器

1）选择元素a后面第一个相邻的兄弟元素b，元b素a+元素b{属性名：属性值}

<style>

        ul .first+li {

            color: red;

        }

</style>

---

<ul>

        <li class="first">哈哈哈</li>

        <!-- <a href="#">233</a> -->（元素a后有不同种类的标签则不行）

        <li>哈哈哈</li>

        <li>哈哈哈</li>

</ul>

如上所示第二个li哈哈哈变为红色

2）选择元素a后面所有的的兄弟元素b，元素a~元素b{属性名：属性值}

<style>

        ul .first~li {

            color: red;

        }

</style>

---

 <ul>

        <li class="first">哈哈哈</li>

        <a href="#">233</a>（不变色）

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <div><li>hhh</li></div>（不变色）

    </ul>

运行后发现第二三个哈哈哈li变色

三.结构选择器

根据文档的结构来选择元素，常用于根据父级【D】选择里面的子元素【E】，E可分为两大类

1）D_E:first-child、D_E:last-child、D_E:nth-child(n)；这三个用于选择匹配父元素D中的第一个、最后一个、指定第n个E元素，具体如下：

<style>

        ul li:nth-child(4){

            color: red;

        }

</style>

---

<ul>

        <!-- <a href="#">233</a> -->（如果有这句代码则第三个哈哈哈变色）

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

</ul>

如上所示，第四个哈哈哈li变色

2）D_E:first-of-type、D_E:last-of-type、D_E:nth-of-type(n)；这三个用于选择指定匹配父元素D中的第一个、最后一个、指定第n个E元素，具体如下：

<style>

        ul li:nth-of-type(4){

            color: red;

        }

</style>

---

<ul>

        <a href="#">233</a>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

        <li>哈哈哈</li>

</ul>

运行可以得出，即使ul中有第一个子元素为<a>，但还是正常选择第四个哈哈哈li使其变色

3）为每个并非<p>元素的元素设置背景颜色：

:not(p){
        background:#ff0000;
}