前端基础-02-CSS选择器

前端基础-CSS样式

1. CSS样式常用的三种引用方式：

#CSS样式分为3种:#优先级：行内样式>内嵌样式>外部样式1.行内样式：<div style="width: 300px;height: 300px;background: green"></div>2.内嵌样式head中间添加样式：<style>        div{            width: 200px;            height: 200px;            background: green;        }</style>3.外部样式lesson.css样式文件：div {    width: 200px;    height: 200px;    background: green;}#引用方式：<link rel="stylesheet" href="lesson.css">扩展：修改页面页签的图标：<link rel="shortcut icon" href="image/test1.ico">

2.选择器

#1.通配符选择器* {    margin: 0;}#2.标签（tagName）选择器div {   width: 100px;   height: 100px;   background: red;}#3.class选择器，一般给具有相同属性的元素设置同一个class.box {     background: blue;}#4.id选择器，id具有唯一性#box{     background: gray;}#5. +是相邻选择器，操作的对象是该元素后的同级元素，只会针对一个元素 div + p+p {    background: blue;}#6.群组选择器，对几个相同熟悉的选择器进行样式设置，div和p都生效        div, p {            width: 100px;            height: 100px;            background: red;        }#7. ~ 是兄弟选择器：div后所有同级p元素生效        div ~ p {            background: green;        }#8.>子代选择器 :div所有子元素p生效，变成蓝色        div > p {            background: blue;        }#9.后代选择器：可以指定某一层级子元素生效，div的下面所有li元素样式生效        div li {            width: 50px;            height: 50px;            background: red;        }#10.伪选择器       #a标签：        a:link { /*未被点击的链接*/            color: red;        }        a:visited { /*已被点击的链接*/            color: green;        }        a:hover { /*鼠标悬浮的颜色*/            color: aqua;        }        a:active { /*鼠标按下的颜色*/            color: black;        }       #div标签：        div {            width: 100px;            height: 100px;            background: red;        }        div:hover { /*改变元素本身*/            /*                default 默认箭头                pointer 手指                wait 显示正忙                help 显示帮助            */            cursor: pointer;            background: blue;        }        div:hover p { /*改变元素下面的p标签*/            width: 100px;            height: 20px;            background: green;        }#11.通用选择器的优先级：选择器优先级：(*)<tagName<(.)class类选择器<（#）id选择器级别相同的选择器，后面的样式会覆盖前面的复杂后代选择器：1.先比id 再比class 再比tagName2.id选择器个数不相等，id越多，优先级越高3.id选择器相同，则比class，在比tagName# 快捷键：ul>li*5   + TABL  快捷输出5个li标签