H5基础阶段三（css选择器）
HTML5基础阶段--css选择器
⼀. css选择器
使⽤css选择器基本流程：
① 制作所需的选择器，并在其中写⼊样式
② 将选择器绑定到 指定的html标签上
1. 标签选择器
写法：⽤ 标签名 来定义的
作⽤：当前页⾯中，所有叫这个名字的标签，全部都绑定上样式
代码⽰例 ：给 body ⾥⾯的所有 div 标签设置属性
div{
width: 200px;
height: 200px;
background-color: yellow;
}
2. class选择器（.）
写法： ⽤ . 来标⽰⾃⾝，. 后跟类名，
命名：⾃定义名称，名字符合见名知意即可。可以包含字母数字下划线，但不能以数字开头
属性：具有重⽤性，可以给多个标签使⽤
使⽤⽅法： 使⽤给对应的标签进⾏绑定，例如 < div class=".box">< /div>
优先级：class 选择器 > 标签选择器
代码⽰例 ：
.
box{
width: 500px;
css选择器分为哪几类color: red;
}
3. id选择器（#）
写法： ⽤ # 来标⽰， # 后跟 ID名
命名：⾃定义名称，名字符合见名知意即可。可以包含字母数字下划线，但不能以数字开头
属性：不具有重⽤性，具有唯⼀性（指的是名字的唯⼀性），如果多个标签同时使⽤，会造成不可预知的错误使⽤⽅法： 使⽤给对应的标签进⾏绑定，例如 < div id=“div1”>< /div>
优先级： id选择器 > class选择器
代码⽰例 ：
#div1{
width: 100px;
height: 100px;
background-color: pink;
font-size: 30px;
}
4. 组选择器（,）
定义：组选择器是多个选择器通过逗号连接⽽成的．在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时便可以利⽤并集选择器同时声明风格相同的CSS选择器。
使⽤⽅法： 只能⽤于⼤批量的样式，如果需要给个别标签去写样式，使⽤class或id
代码⽰例 ：
p,span,div,li{
color: blue;
}
5. 后代选择器（空格）
在CSS选择器中，还可以通过嵌套的⽅式，对特殊位置的html元素进⾏控制
后代选择器，对指定的⽗级下所有的层级 寻⽬标。对应⽤对象内的所有相应⼦节点都有效。
写法：是把外层的标记写在前⾯，内层的标记写在后⾯，之间⽤空格隔开。
空格 前 是指定的⽗级
空格 后 是指定的⼦级
例如：div p{background:red;color:white;}
代码⽰例 ：
.list2 li{
color: #ccc;
}
6. ⼦代选择器（>）
⼦代选择器，只对指定的⽗级 向下⼀层寻⽬标。只对应⽤对象的直接相应⼦节点有效。
写法：⽗元素 > ⼦元素
" > "前 是指定的⽗级
" > "后 是指定的⼦级
代码⽰例 ：
.list2>li{
color: red;
}
⼦代选择器 与 后代选择器 的 区别：
后代选择器：就是对象当中所有的⼦元素，孙⼦元素以及最底层的元素
⼦选择器：就单单是⼦元素，⼦元素的⼦元素就不算了
7. 通⽤选择器（*）
写法：*{ }
“ * ”作为通⽤的选择器它的优先级是最低的，所以如果有 css 定义了指定的元素的样式的时候，那么它就会失去对于指定了 css 样式的元素的样式的控制了。
代码⽰例 ：
* {
color: green;
}
8. 特殊的选择器–交叉选择器（p.p1）
定义：“交叉”复合选择器是由两个选择器直接连接构成，其结果是选中⼆者各⾃元素范围的交集。
其中第⼀个必须是标记选择器，第⼆个必须是类别选择器或者ID选择器。如p.class1，但有时候会看到.class1.class2，即2个都是类选择器，在其他浏览器中是允许出现这种情况的，但IE6不兼容。
如：div.box{width:200px;}
两个条件必须同时满⾜，才可以绑定样式
条件1: p
条件2: .p1
注意： 两个条件之间 没有特殊字符 也没有空格，⽆缝连接
代码⽰例 ：
p.p1{
color: red;
}
9. 伪类选择器（:）
利⽤CSS的伪类别属性制作特效：
:hover ⿏标经过超链接时的样式
:active ⿏标在超链接上点击时的样式
cursor：pointer ⼩⼿
hover: ⿏标伪类
作⽤： ⿏标移⼊移出的时候触发指定样式
⿏标移⼊时； 触发 hover的样式
⿏标移出时： 回到 初始样式。 整个hover中的代码，都不会被加载
: hover 是固定的写法
: 前⾯是要添加hover伪类的 ⽬标 ，⽬标尽量不要写成标签选择器
指定的⽬标： 最好是单⼀的
⽬标：hover
使⽤hover伪类时，将 ⼦代(后代)选择器 写在hover之后会表⽰
: 前⾯是触发者，hover之后的是 显⽰者
代码⽰例 ：
.box:hover{
width: 500px;
border-radius: 20%;
background-color: yellow;
}
.box:hover>p{
width: 500px;
border-radius: 20%;
background-color: yellow;
}
⼆. css样式的继承性
1. ⽗级的样式会继承给⼦级
2. 如果⼦级不需要，单独调整⼦级即可
CSS的某些样式是具有继承性的，那么什么是继承呢？
继承是⼀种规则，它允许样式不仅应⽤于某个特定 html 标签元素，⽽且应⽤于其后代。所有的css语句都是基于各个标签的继承关系的。但是并不是所有的属性都能被继承，⼀般的字体属性都是能继承的，如下：
可见，字体⼤⼩颜⾊都继承了，但是边框属性没有继承。
三. css引⼊⽅式
1. ⾏间样式
写法：标签内引⼊，直接在标签⾥⾯加 style 样式
使⽤场景：修改少数样式时，在这⾥书写
优先级：在三种引⽤⽅式中，最⾼
<div ></div> 2. 内联样式
写法：内嵌式引⼊，在head部分加⼊< style >标签
使⽤场景：开发极⼩型项⽬ 和 课堂练习时， 可以使⽤
优先级：在三种引⽤⽅式中，第⼆名
<style type="text/css">
.box{
background-color: blue;
}
3. 外联样式
写法：在head部分加⼊link标签，引⼊外部css⽂件。
link标签： 引⼊外部资源
<link rel="stylesheet" type="text/css" href="外部样式.css">
设置⽹页⼩图标
icon：⽹页图标
<link rel="icon"  href="../../4.jpg">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。