HTML快速入门--第二节--css选择器
一、基本概念
CSS:层叠样式表
样式：外观属性
层叠：一个标签对象，最终呈现出来的样子，多个样式共同作用
表：.css后缀文件
tr是列 td是行
div :能整齐装东西
空格td :后代 >td:子代
选择器-->筛选条件
选择器 3种表现形式
js---vue
---鸿蒙
二、样式表（3种）
1.行内样式表
缺点：1.扩展性不好2.可读性不好3.可维护性不好4.重用性不好
<body style="background-color: pink;
color: yellow;
font-size: 100px;
background-image: url(img/cake.jpg);">
6666666
</body>2.内部样式表:样式表通过选择器作用到标签上
缺点：只限于当前页面里的标签 重用性不好
(body和div都是这个样式)
<style type="text/css"></style>
body,div{background-color: pink;（选择器）
color: yellow;
font-size: 100px;
background-image: url(img/cake.jpg);
}3.外部样式表:样式表 通过选择器 作用到标签上 重用性 ---当前项目内的所有页面里的标签
三、选择器
a.作用：通过选择器作用在标签上
b.分类：
1.基本选择器：
a.标签选择器： div{ }
b.类选择器： .aaa==作用在拥有class="aaa"的标签上
c.id选择器：#aaa==作用在拥有id="aaa"的标签上，==>标签数量是上1个
d.通配符选择器：*{} 作用在当前页面的所有标签
2.复合选择器（2种）
a.交集选择器：div#aaa{} 作用在拥有id值是"aaa"的标签上 div#aaa;div.aaa
b.并集选择器：div,#aaa{} 作用在div标签上，或者作用在id值等于“aaa”的标签上
3.关系选择器
1.父亲 > 儿子 ：div>#aaa{}作用在div标签里id=“aaa”的子标签
2. 祖先 后代 : div #aaa{} 作用在div标签里id=“aaa”的后代标签
3.兄+弟 : div+#aaa{} 作用在div标签同辈的，相邻其后的标签
4.兄~弟 : div ~ #aaa{} 作用在div标签的同辈标签
4.属性选择器
1、[属性] [src]{}:作用在拥有src属性的标签上
2、[属性=属性值] [src='']{}
3、[属性^=属性值] [src^=' ']{} 以谁开头
4、[属性$=属性值] 以谁结尾
5、[属性*=属性值] 包含
每个选择器的例子参考下方链接：
css选择器实例
原文地址：https://blog.csdn.net/PangQinghua/article/details/142904213
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！