企业官网建设流程全解析

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器

#test{text-indent:2emline-height:2;}<P id="test">lorem ipuse dolor</p>

2. 元素选择器

直接选定某类元素

a { color: blue; }

3. 类选择器

使用class属性（仅为类选择器服务），每一类均有不一样的名称，在style中，以.+名称表示那个选择器，如果同时使用两个类选择器，只需要在class的""里面用空格隔开

<p class="red"> Lorem ipsum dolor sit amet co. </p>

.red { color:red;}

4. 通配符选择器

表示选中所有元素

5. 属性选择器

根据属性名和属性值选中元素
选中所有具有某个属性的元素

[href]{color:brown;}

单独选中:

[href="https://sina.com"]{color:crimson;}

6. 伪类选择器（一般和a元素有关）

选中某些元素的某种状态

1):link：超链接未访问时的状态
2):visited：超链接访问过后的状态
3):hover：鼠标悬停状态，表示鼠标移动上去的状态，一般与其他选择器连用,表示选中鼠标悬停时的a元素变色
4):active：激活状态，表示鼠标按下点击时的状态
书写顺序是爱恨法则， love hate

a:hover{color:red;}

7. 伪元素选择器

通常生成并选中某个元素内部的第一个子元素或者最后一个子元素
使用时要有两个==::==
before，after使用时相当于在元素前面和后面加了一个新的子元素，存在他们独有的属性content，该属性表示子元素的文本内容

我想吃<span>芒果和草莓</span> span::before{color:firebrick;content:"《";}span::after{color:greenyellow;content:"》"}

选择器的组合

1. 并且
2. 后代元素——两个选择器之间加空格

.abc .bcd{color:lightgreen;}

<div class="red"> <ul> <li>Cumque.</li> <li class="ax">Suscipit.</li> <li>Magni.</li> <li>Assumenda!</li> <li>Nostrum.</li> </ul> </div>

3. 子元素—— >
   只能选中子元素

4. 相邻兄弟元素—— +
   选中前面元素的后一个元素，只能选中后面的，不能选中前面的

.special+li{color:darkgreen;}表示选中special这个元素的下一个元素li

5. 兄弟元素—— ~
   选中前面元素后面出现的所有的兄弟元素

选择器的并列

使用多个选择器，用逗号分隔。本质上就是分开书写，仅仅为了方便书写