【前端学习笔记】CSS之选择器
CSS之选择器
文章目录
- CSS之选择器
- 元素选择器
- 语法
- 代码示例
- 类选择器
- 语法
- id选择器
- 语法
- 通配符/ 通配选择器
- 语法
- 群组和后代选择器
- 群组选择器
- 包含选择器 / 后代选择器
- 伪类选择器
- 选择器的权重
元素选择器
语法
语法：元素名称{属性：属性值;}
如：div,p,h1,img…等
说明：1. 元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如：body、div、p、img…等。
2. 所有的页面元素都可以作为选择符
用法：1. 如果向改变某个元素的默认样式时，可以使用类型选择符；
2. 当统一文档的某个元素的显示效果时，可以使用类型
代码示例
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div{background-color: yellow;color: red;}h1{color: blue;}style>
head>
<body><div>1111111div><div>2222222div><h1>1111h1><p>wfwefwep>
body>
html>
类选择器
语法
语法: class名{属性：属性值}
说明：
- 当使用class选择器时，应先为每个元素定义一个class名称
- class选择器语法格式是：
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>.ibm{background-color: blue;}.qianfeng{color: red;}style>
head>
<body><div>1111div><div class="ibm qianfeng">2222div><div class="ibm">3333div><div class="ibm">4444div><div class="ibm">5555div><div>6666div>
body>
html>
id选择器
语法
语法：#id名{属性：属性值;}
说明：
- 当我们使用id选择器时，应为每个圆度定义一个id属性
- id选择器的语法格式是“#”加上自定义的id名
- 起名时要取英文名，不能使用关键字（所有的标记和属性都是关键字）
- 一个id名称只能对应文档中一个具体的元素对象（唯一性）
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>#box1{background-color: yellow;}#box2{background-color: red;}#box3{background-color: blue;}style>
head>
<body><div id="box1">11111111111div><div id="box2">22222222222div><div id="box3">33333333333div>
body>
html>
通配符/ 通配选择器
语法
语法：{属性：属性值；}
说明：通配选择器的写法是 "",其含义就是所有元素
- { margin: 0; padding:0;} 代表清除所有元素的默认边距值和填充值
代码示例：
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>*{margin: 0;padding: 0;}style>
head>
<body><h1>标题h1><div>1111111div><ul><li>111111111li><li>222222222li><li>333333333li>ul>
body>
html>
群组和后代选择器
群组选择器
语法：选择器1，选择器2，选择器3… {属性：属性值} 例 ：#top1，#nav1， h1{width：960px;}
说明：当有多个选择器应用相同的声明时，可以将选择符用","分隔的方式，合并为一组。
margin: 0 auto; 实现盒子的水平居中
群组选择器：提出公共代码，节约代码量
代码示例：
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div,p,h1{background-color: yellow;}style>
head>
<body><div>1111111111div><p>111111111111p><h1>1111111111h1>
body>
html>
包含选择器 / 后代选择器
语法：选择器1 选择器2… {属性：属性值}
说明：含义就是选择器1中包含的所有选择器2；
用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择器，直接用包含选择器的方式解决
代码示例：
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div p {background-color: yellow;}style>
head>
<body><div><p>11111111p>div><p>2222222p>
body>
html>
伪类选择器
语法：
a: link{属性：属性值；} 超链接的初始状态
a: visited {属性：属性值；} 超链接被访问后的状态
a: hover{属性：属性值；} 鼠标悬停，即鼠标划过超链接时的状态
a: active{属性：属性值；} 超链接被激活时的状态，即鼠标按下时超链接的状态
link–visited --hover–active
说明：
A: 当这4个超链接伪类选择器联合使用时，应注意他们的顺序，正常顺序为：
a: link, a: visited, a: hover,a: active, 错误的顺序有时会使超链接的样式失效；
B：为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color ：red} a：hover{color：green；}表示超链接的除湿盒放翁后的状态一样，鼠标划过的状态和点击时的状态一样。
代码示例：
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>a:link{color: yellow;}a:visited{color: red;}a:hover{color: orangered;}a:active{color: green;}style>
head>
<body><a href="http://www.baidu.com">百度a>
body>
html>
选择器的权重
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生了冲突，会选择权重高的来执行
id > class > 类
| 选择器 | 权重 |
|---|---|
| 元素选择器 | 0001 |
| 类选择器 | 0010 |
| id选择器 | 0100 |
| 包含选择器 | 为包含选择器的权重之和 |
| 内联样式 | 1000 |
| !important | 10000 |
选择器解析规则1：当不同选择器的样式设置有冲突的时候，高权重选择器的样式会覆盖低权重选择器的样式
选择器解析规则2：相同权重的选择器，样式遵循就近原则，哪个选择器最后定义，就采用哪个选择器样式
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！