[已收纳]CSS之选择器

15195775117 · 发表于 2019-11-8 11:38:32

登录后查看更多精彩内容~

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 15195775117 于 2021-2-13 20:05 编辑

CSS通过选择器你控制HTML元素，选择器分类：

CSS选择器
基本选择器	标签选择器
	类选择器
	ID选择器
	通配选择器
组合选择器
伪对象选择器
属性选择器
伪类选择器	动态伪类选择器
	目标伪类选择器
	语言伪类
	UI元素状态伪类选择器
	结构伪类选择器
	否定伪类选择器

15195775117 · 发表于 2019-11-8 14:59:13

本帖最后由 15195775117 于 2020-10-30 10:08 编辑

我的理解，标签选择器==内嵌样式

15195775117 · 发表于 2019-11-8 15:11:05

本帖最后由 15195775117 于 2020-10-30 10:09 编辑

类选择器应用

1：方法重写
应用场景：大部分段落使用默认格式，少数段落稍作修改，相当于方法重写
<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">

<head>
<meta charset="UTF-8">
<style type="text/css">
（默认段落样式：）
p{font-size:20px;color:red;}
（创建一个类选择器(以点开头)：）
.font30px{font-size:30px;color:#FF00FF}
</style>
</head>

<body>
<p>段落1</p>
（引用类选择器：）
<p class="font30px">大字玫红段落</p>
<p>段落3</p>
</body>
</html>
360截图20191108151017765.jpg

15195775117 · 发表于 2019-11-8 15:16:58

本帖最后由 15195775117 于 2020-10-30 10:10 编辑

再多试几个（head和body省略）：

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">

<style type="text/css">
p{font-size:20px;color:red;}
.font30px{font-size:30px}
.underline{text-decoration:underline}
.italic{font-style:italic}
</style>

<p class="underline">下划线</p>
<p class="font30px">大字段落</p>
<p class="italic">斜体</p>

</html>
360截图20191108151500316.jpg

15195775117 · 发表于 2019-11-8 15:29:46

本帖最后由 15195775117 于 2020-10-30 10:11 编辑

如果在类选择器前加标签，形成[结构体.元素]的形式，表示只在该标签中生效
<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
p{font-size:20px;color:black}
.addcolor{color:red}
p.addcolor{color:blue}
</style>
<h3 class="addcolor">标题红色</h3>
<p class="addcolor">段落蓝色</p>
</html>
默认黑色，<h3>用的是红色，<p>用的是蓝色
360截图20191108152547528.jpg

15195775117 · 发表于 2019-11-8 15:35:46

本帖最后由 15195775117 于 2020-10-30 10:11 编辑

总结：
以我的理解，类选择器类似“行内样式”，标签选择器类似“嵌入样式”，
以标签选择器做大范围的默认设置（父类属性），以类选择器微调（子类重写）

15195775117 · 发表于 2019-11-8 16:04:09

本帖最后由 15195775117 于 2020-10-30 10:13 编辑

【ID选择器】
命名以#开头，类似类【选择器】（以点开头）
<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
#box{background:url(meteo.jpg);center bottom;
height:100px;width:100px;
border:solid 2px red;
padding:100px}
.addcolor{color:yellow}
</style>
<div id="box" class="addcolor">哈哈哈哈</div>
</html>
360截图20191108155529583.jpg

【ID选择器】也有类似【类选择器】的操作：限定id选择器作用范围
<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
#addcolor{color:blue}
big#addcolor{color:red}
</style>
<p id="addcolor">段落蓝色</p>
<big id="addcolor">大字红色</big>
</html>
360截图20191108160015128.jpg

总结：【ID选择器】与【类选择器】类似，都类似行内样式，至于哪种更优，可能是ID

15195775117 · 发表于 2019-11-8 16:08:02

本帖最后由 15195775117 于 2020-10-30 10:13 编辑

通配选择器，一个星号代替所有标签
360截图20191108160634771.jpg

<!DOCTYPE html>
<html dir ="ltr" xml:lang="zh-CN">
<meta charset="UTF-8">
<style type="text/css">
*{color:red;background-color:green}
</style>
<p>段落</p>
<big>大字</big>
<i>斜体</i>
</html>

		自动登录	找回密码
密码			立即注册