青岛外贸网站推广,给企业做网站用什么程序,石家庄哪里能制作网站,推广包括哪些内容CSS基础笔记系列
《CSS基础笔记-01CSS概述》《CSS基础笔记-02动画》
前言
在前面两篇博客中#xff0c;我实际上已经使用过了选择器。但到底什么是选择器、有什么作用#xff0c;我反而不能表达出来。因此#xff0c;决定记录了我的学习和思考。
什么是选择器
selector…CSS基础笔记系列
《CSS基础笔记-01CSS概述》《CSS基础笔记-02动画》
前言
在前面两篇博客中我实际上已经使用过了选择器。但到底什么是选择器、有什么作用我反而不能表达出来。因此决定记录了我的学习和思考。
什么是选择器
selector是css rule的第一个部分用于匹配HTML元素并使用规则中的属性样式化对应元素。
/* CSS syntax */
selector{property: value;
}本文将结合具体的示例来展示
!DOCTYPE html
html langenheadmeta charsetutf-8 /titleTao Te Ching/titlelink relstylesheet href./style.css /
/headbodyh1第二章治国/h1p classspecialem天下皆知美之为美斯恶已/em皆知善之为善斯不善已。/pp有无相生难易相成长短相形高下相倾音声相和前后相随恒也。/pp是以圣人处无为之事行不言之教万物作而弗始生而弗有为而弗恃strong功成而弗居/strong。夫唯弗居是以不去。/p/body/html元素选择器
以HTML元素为作为selector。 也叫 标签选择器 或 类型选择器。
例如以
作为选择器那么所有的p标签都会应用这个样式。
h1 {color: blue;
}p {color: blueviolet;
}strong {color: red;
}em {color: gray;
}类选择器
类选择器以一个句点.开头会选择文档中应用了这个类的所有标签。例如使用.highlight将指定的p标签高亮。
类选择器的组合使用
ID选择器
ID选择器以一个句点#开头。在html中对指定的元素添加id属性然后在css中添加对应id的样式。 属性选择器
用属性选择器来选中带有特定属性的元素。属性名放在[]中。
接下来通过一个无需列表来演示属性选择器的使用
ulli第三章/lili classchapter4第四章/lili classchapter4 chapter5第五章/lili classchapter4chapter5第六章/li/ul/* 将所有使用了class属性的元素的字体大小设置为20% */
[class]{font-size: 20%;
}/* 将所有含有class属性的li标签的字体大小设置为200% */
li[class]{font-size: 200%;
}/* 匹配仅有chapter4属性值的li标签*/
li[classchapter4]{background-color: red;
}/* 匹配只要有chapter4属性值的li标签*/
/* 当class属性有多个值时每个值用空格分开 */
/* 说明这个样式会覆盖上面的因为本样式的权重值更大 */
li[class~chapter4]{background-color: yellow;
}
伪类选择器(pseudo-class)
用于选择处于特定状态的元素。
伪类就是开头为冒号的关键字:
selector:pseudo-class {property: value;
}例如我只想让article的第一个段落的文字字体加粗加大无论任何时候都可以在article的最开始动态插入p标签且保持设置的特定样式始终有效而不用再修改代码。
article p:first-child{font-size: 120%;font-weight: bold;
}像常规的类一样可以在选择器中将任意数量的伪类链在一起。
伪元素选择器(pseudo-elements)
伪元素是一个附加至选择器末的关键词允许你对被选择元素的特定部分修改样式
selector::pseudo-element {property: value;
}一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
/* 使用伪元素选择器使段落的第一行文字总是被应用样式 */
/* 而不管屏幕的大小如何变化 */
article p::first-line{font-size: 120%;font-weight: bold;
}/* 选择一个article元素里面的第一个p元素的第一行。 */
article p:first-child::first-line{font-size: 120%;font-weight: bold;
}/* 在box类 前插入一个伪元素 */
.box::before {content: hello;color: aqua;display: block;width: 100px;height: 100px;background-color: brown;border: 1px solid black;
}
/* 在box类 后插入一个伪元素 */
.box::after{content: after usage;color: blue;
}关系选择器(combinator)
后代选择器(descendant combinator)
用单个空格来组合两个或多个元素的选择器。
/* 匹配body中的article中的p标签 */
body article p子代选择器(child combinator)
子代选择器是个大于号只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
ulliUnordered item/liliUnordered itemolliItem 1/liliItem 2/li/ol/li/ululli {/* 非继承属性 */border: thick double #32a1ce;/* 继承属性 */color: red;
}紧邻兄弟选择器next-sibling combinator
紧邻兄弟选择器用来选中恰好处于另一个在继承关系上同级的元素旁边的元素。
articleh1一级标题/h1p第一段的内容/pp第二段的内容/p/articleh1 p {font-weight: bold;background-color: #333;color: #fff;padding: 2px;}兄弟选择器(subsequent-sibling combinator)
使用(~)来选择任意兄弟元素。
articleh1一级标题/h1p第一段的内容/pdiv无效内容/divp第二段的内容/p/articleh1 ~ p {font-weight: bold;background-color: #b03636;color: #fff;padding: 2px;
}总结
本文学习了10种选择器掌握它们的关键一是先理解二是多练多使用才会积累更多的经验多尝试不同的组合。单纯的去记我是记不住的另外关于这篇文章的内容等有空时录个视频看起来就会更直观啦关于cascading、specificity、 inheritanc还有点儿迷明天再学习下。
