二、选择器
1.基础选择器
【注意】相同的选择器不同的属性声明，不会被覆盖而是共同应用。
（1）通用选择器
- `*`号，选择 html 文件内所有的元素 `* {样式声明}`
- 最常用的用法是`*{margin:0;padding:0}` 清除浏览器的内外边距。但它的缺陷是性能太低，所有的元素不论是否有内外边距都会渲染，但可以做练习时使用。
（2）元素选择器（标签选择器）
- 通过标签的名字来选择 html 元素，权重值为 1，比如：`div {样式声明}`
- 弊端是当很多相同标签并存的时候，就会出现没办法精准定位的情况
（3）id 选择器
- 给标签的前半部分增加一个属性 id 这个属性可以指定一个唯一的不重复的值，权重值 100
- `<div id="abc">一个标签</div>`
- `#abc {样式声明}`
- id 名不能以数字开头，不建议使用中文命名，尽量见名知意
- 多个单词连接可以用- 、\_、驼峰
- 每个都有和其他重复的样式，使用 id 有几个弊端，过于订制化导致每一个元素都要有自己的 id 有一套自己的样式，代码量过大重复性过大。明明有重复的内容，但通过 id 选择器只能是一个一个的书写其样式，又不是很智能
（4）类选择器【重要】
- 类选择器先要使用标签的`class`属性赋值，类选择器的权重值 10
- `<div class="abc">一个标签</div>`
- `.xxx {样式声明}`
- 类名不能以数字开头，不建议使用中文命名，尽量见名知意，多个单词连接可以用- 、\_、驼峰
- 一个元素可以创建多个类名，每个类名之间用空格分开`<div class="abc zyx">一个标签</div>`
- 易错点：
- 忘记给元素增加 id 或者 class 属性就直接开始写 css 样式
- class 的点，很容易忽略那个点
- 先写类名还是先定义 class 属
<style>
.color-r {color: red;}
.color-b {color: blue;}
.font-20 {font-size: 20px;}
.font-30 {font-size: 30px;}
</style>
<body>
<p class="color-r font-20">p我想20号字红色</p>
<p class="color-g font-20">p我想20号字绿色</p>
<p class="color-r font-30">p我想30号字红色</p>
</body>（5）群组选择器
- 多个选择器名用逗号连接，可以一起完成共同样式的指定`div,p,span {color: red;}`
- 群组选择器并不是只能使用相同类型的选择器，可以是各种选择器一起参与`#mydiv.b,h4 {color: blue;}`
2.关系选择器
在 html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系”
（1）后代选择器
- 先代元素（祖先）选择器写在前面，之后写一个空格，空格后写后代元素选择器。
- `祖先元素 后代元素 {样式声明}`
- 需要注意的是空格不要忘记，祖先元素不一定是父级和祖父级还可以再往上的级别都可以
- 但有弊端就是级别不同的相同选择器名称，容易造成不想要的结果，因此当你需要更深的层次时，可以继续用空格加入更深层的后代。
（2）子代选择器
- 可以选中某个元素的直接子元素，与后代不同的是子代选择器的范围更小。
- `父级元素 > 子级元素 {样式声明}`
- 层级可以向后代选择器一样延申,区别就是子代是>连接,后代是空格连接`.baba > div > div {字体颜色;}`
（3）兄弟选择器
- 同一层的关系选择器，可以选中该元素后面的兄弟元素。
- `某元素选择器 ~ 该元素后面的所有兄弟 {样式声明}`
- 需要注意的是兄弟选择器可以选到该元素后面的兄弟，而选不到之前的。
（4）相邻选择器
- 同一层的关系选择器，可以选中参照的元素后面紧挨着被参照元素的选择器。
- `某元素选择器 + 该元素后面的唯一相邻的兄弟 {样式声明}`
- 需要注意的是，相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟
3.伪类选择器
- 伪类选择器的作用是匹配同一个元素，不同状态下的样式
- `选择器:伪类 {样式声明}`
- `a:link {样式声明}` 没有被打开之前，或者没被打开过（`a:link`特有）
- `a:visited {样式声明}` 访问过后（`a:visited`特有）
- `div:hover {样式声明}` 鼠标悬停
- `p:active {样式声明}` 点击激活
- `input:focus {}`属性代表 input 标签获取焦点的样式(`<input/>`标签的属性)
- `input:cheaked {}`属性代表 input 单选、复选等 type 类型被选中后的样式(`<input/>`标签的属性)
a:link {
/* 没有被打开之前，或者没被打开过 */
color: green;
}
a:visited {
/* 访问过后 */
color: green;
}
div:hover {
/* 鼠标移入标签后展现 */
background-color: aqua;
}
p:active {
/* 鼠标按住元素不松手 */
background-color: blueviolet;
}4.伪元素选择器
- CSS 伪元素用于设置元素的“指定部分”的样式
- :before 表示元素最前边的部分，紧随着标签的部分
- :after 表示元素的最后边的部分，紧随着标签的部分
- :before{content:""}:after{content:""} content 必须写
- 两个冒号 (`::`) 而不是一个冒号 (`:`)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示方式。
| /* 在元素前面的部分 */ div::before { content: "你好，"; color: red; } /* 在元素后面的部分 */ p::after { content: "❤"; color: green; } |
5.css 优先级
（1）优先级的原则
- 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先
- 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)
- 继承的优先级：制定样式的优先级大于继承样式的优先级
- 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级
- 最高优先级：!important，直接获取最高优先级，内联样式不能加!important
（2）优先级的比重大小
按 CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="./1.css" />
<style>
div {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div style="width: 50px;height: 50px;background:green;"></div>
</body>
</html>按元素分:`id选择器（100） > 类选择器（10） > 元素选择器（1）`
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.mydiv {
width: 100px;
height: 100px;
background-color: blue;
}
#odiv {
width: 50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="mydiv" id="odiv"></div>
</body>
</html>【练习】
> 要求：做一个简易的导航列表，使用 a 标签
> 鼠标移入 a 标签的时候背景颜色变红色背景
> 默认首页文字有背景颜色红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a {
color: #000;
}
.active {
background-color: red;
}
a:hover {
background-color: red;
}
</style>
</head>
<body>
<div>
<a href="#" class="active">首页</a>
<a href="#">新闻中心</a>
<a href="#">产品列表</a>
<a href="#">联系我们</a>
<a href="#">招商引资</a>
</div>
</body>
</html>
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
