HTML快速入门--第二节--css选择器

Gami.2024-10-14 17:30

一、基本概念

CSS:层叠样式表

样式：外观属性

层叠：一个标签对象，最终呈现出来的样子，多个样式共同作用

表：.css后缀文件

tr是列 td是行

div :能整齐装东西

空格td :后代 >td:子代

选择器-->筛选条件

选择器 3种表现形式

js---vue

---鸿蒙

二、样式表（3种）

1.行内样式表

缺点：1.扩展性不好2.可读性不好3.可维护性不好4.重用性不好

html 复制代码

<body style="background-color: pink;
color: yellow;
font-size: 100px;
background-image: url(img/cake.jpg);">
6666666
</body>

**2.内部样式表:**样式表通过选择器作用到标签上

缺点：只限于当前页面里的标签重用性不好

(body和div都是这个样式)

html 复制代码

       <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"的子标签

祖先后代 : div #aaa{} 作用在div标签里id="aaa"的后代标签

3.兄+弟 : div+#aaa{} 作用在div标签同辈的，相邻其后的标签

4.兄~弟 : div ~ #aaa{} 作用在div标签的同辈标签

4.属性选择器

1、 $属性$ $src$ {}:作用在拥有src属性的标签上

2、 $属性=属性值$ $src=''$ {}

3、 $属性\^=属性值$ $src\^=' '$ {} 以谁开头

4、 $属性$=属性值$ 以谁结尾

5、 $属性\*=属性值$ 包含

每个选择器的例子参考下方链接：
css选择器实例