企业网站开发课程设计报告,成立公司注意事项,在线文字生成图片,网站免费推广方案目录 前言
基本选择器
1.1 标签选择器
1.2 ID选择器
1.3 类选择器
高级选择器
2.1 并集选择器
2.2 交集选择器
2.3 后代选择器
2.4 子元素选择器
2.5 属性选择器 前言 1W#xff1a;什么是CSS选择器#xff1f; CSS选择器由HTML元素的id、class属性或元素名本身以及…目录 前言
基本选择器
1.1 标签选择器
1.2 ID选择器
1.3 类选择器
高级选择器
2.1 并集选择器
2.2 交集选择器
2.3 后代选择器
2.4 子元素选择器
2.5 属性选择器 前言 1W什么是CSS选择器 CSS选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成 2W为什么使用CSS选择器 用于指定要为哪个HTML元素定义样式 3W如何使用CSS选择器 行内样式在标签内添加style书写将样式放在HTML标签中实现繁琐推荐学习使用内部样式将CSS写在/head和body之间使用HTML标签style将其包围特点是该样式只能在此页使用解决行内样式多次书写的弊端外部样式通过HTML的link标签将外部样式表链接到HTML文档中也是网络上网站应用最多的方式同时也是最使用的方式。将HTML文档和CSS文件完全分离增强网页结构的扩展性和CSS样式的可维护性 基本选择器
1.1 标签选择器
通过具体的标签名称来匹配文档内所有同名的标签如下所示
P{color:blue;
}
p 选择器能够匹配文档中所有的p标签 1.2 ID选择器
用来匹配HTML文档中具有指定ID属性的标签ID选择器的定义需要用到 # 后面紧跟ID属性的值如下所示
注id属性不能重复如果某个元素使用id则这个id是这个元素的唯一标识
#nav{color:aqua;}
#nav 选择器能够匹配文档中具有 idnav 属性的标签 1.3 类选择器
根据标签的class 属性匹配具体的HTML标签所有符合条件的标签都会根据选择器内的样式进行格式化
类选择器的定义需要用到一个英文的句号 . 后面紧跟 class 属性的值,如下所示
.list{color:darksalmon;
}
.list 选择器能够匹配文档中所有具有 classlist属性的标签
类选择器相较于ID选择器不同的是类选择器可以重复使用class属性不是唯一的可应用于不同的标签如下所示
p.list{color:darksalmon;
}
p.list 选择器仅会将其中的样式应用到所有具有 classlist 属性的p标签中对于其他的具有 classlist属性的标签则没有影响。
一个HTML标签中的class属性可以不止一个如
p classinfo selected/p
p classinfo/P
我们可以将所有class属性包含info的元素设置粗体为所有class 属性包含selected的元素设置红色字体为class属性中既包含info又包含selected的元素设置蓝色背景如下所示:
.info{font-weight: bold;}.selected{color: red;}.info.selected{background: blue;}这种由多个 class 属性值 所组成的类选择器我们可以称之为“ 多类选择器 ”由单个class属性值 定义的类选择器可以称为“ 单类选择器 ”
注多类选择器中多个class属性之间是紧挨着的如info.selected不需要使用空格分开 高级选择器
2.1 并集选择器
并集选择器是由多个选择器通过逗号 , 连接而成如下所示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style/* 并集选择器 */p,.yangshi{color: red;}
/style
bodyp爱你孤身走暗巷/pp爱你不跪的模样/pdiv爱你对峙过绝望/divdiv classyangshi不肯哭一场/div
/body
/html 并集选择器效果图 2.2 交集选择器
交集选择器是由两个选择器连接构成选中二者范围的交集如下所示
注两个选择器之间不能有空格第⼀个必须是标签选择器 第⼆个必须是 类选择器或 id 选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title交集选择器/title
/head
style/* 交集选择器 */div.one{color: red;}div#two{color: darkorchid;}
/style
bodyh1孤勇者/h1small陈奕迅/smalldiv classone爱你孤身走暗巷/divdiv idtwo爱你不跪的模样/divdiv爱你对峙过绝望/divp classone不肯哭一场/p
/body
/html 交集选择器效果图 2.3 后代选择器
当⼀个标签嵌套在⼀个标签内部的时候就可以将这个标签看作是标签的后代。当我们需要选择⼀个标签的任何⼀个后代标签时就可以使⽤后代选择器。
后代选择器的定义方式就是将 标签名 、 class 属性 或 id 属性等按照标签的嵌套关系由外到内罗列中间使用 空格 分开。
如下所示
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title后代选择器/title/headstylea{text-decoration: none;}/* 后代选择器 */ul a{color: gray;line-height: 30px;}/stylebodydivh2a href#孤勇者/a/h2ullia href#爱你孤身走暗巷/a/lilia href#爱你不跪的模样/a/lilia href#爱你对峙过绝望/a/lilia href#不肯哭一场/a/li/ul/div/body
/html后代选择器效果图 ul a 选择器只会匹配⽆序列表ul标签的所有后代标签a和h2标签中的a标签无关 2.4 子元素选择器
子元素选择器与后代选择器类似不过子元素选择器只会匹配某个元素的直接后代元素与其⼦元 素之间只有⼀层嵌套关系子元素选择器由两个或多个选择器组成选择器之间用大于号 分隔开。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv{text-align: center;}/* ⼦元素选择器 */divpem{font-size: 22px;}divp.uname{color: red;font-weight: 600;}/style
bodydivh2李小龙语录/h2p
清空你的思想像水一样无形。你将水倒入水杯水就是水杯的形状。
em你将水倒入茶壶水就是茶壶的形状。/em你看水会流动也会冲击。请像水一样吧我的朋友
em classuname武术宗师李小龙/em/p/div
/body
/html 子元素选择器效果图 2.5 属性选择器
属性选择器 是指选取带有属性的元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style/* 属性选择器 */input{background-color: pink;}input[type]{background-color: aqua;}input[name]{background-color: yellow;}input[nameuserpwd]{background-color: greenyellow;}
/style
bodyinput brinput typetextbrinput typetext nameusernamebrinput typetext nameuserpwd
/body
/html属性选择器效果图
