css-选择器

文章目录

• css-选择器
• css三种引入方式
• 选择器
• 基本选择器
• 组合选择器
• 属性选择器
• 分组与嵌套选择器
• 伪类选择器
• 伪元素选择器

css-选择器

css应该是一个独立的文件,便于调试修改

1. css注释

   单行注释:/*注释*/
   
   多行注释:
       /*
       注释
       注释
       */
   

2. 语法结构

   选择器{属性名:属性值;属性名1:属性值1;属性名2:属性值:}
   

css三种引入方式

1. 外部css文件(最正规的书写方式,推荐使用);

2. head内style标签内部直接书写css代码;

3. 标签内部通过style属性直接书写对应的样式(不推荐);

选择器

基本选择器

1. 标签选择器,元素选择器---->将页面上所有的div标签内部的文本变成红色
2. 类选择器,点号---->让所有具有C1类属性的标签内部文本变成色
3. id选择器 #号---->将id为D1的标签内部文本内容改成色
4. 通用选择器 *号----将页面所有标签统一修改

组合选择器

1. 后代选择器---->空格表示div内部的span没有层级限制(只要在里面都会被改变)
2. 儿子选择器---->表示div内部的儿子(仅儿子,不包括后代)
3. 毗邻选择器---->紧挨着div下的第一个标签
4. 弟弟选择器---->同级别下【规定】的所有标签

属性选择器

1. 找到页面上所有具备username的属性名的标签修改
2. 找到页面上所有具备username的属性名并且属性值是tank的标签修改

分组与嵌套选择器

1. 分组前(代码比较冗余)
2. 组合后(减少代码冗余)
3. 嵌套(标签和属性值参杂在一起)
4. 找具有c1属性值的标签的后代h1

伪类选择器

1. 没被点击过的网页显示颜色;
2. 鼠标悬浮在标签上显示颜色
3. 点击网页标签反应的颜色

伪元素选择器

1. 标签内容第一个字变色，放大（可调）
2. 标签内容开头加上自定义内容，和变色
3. 标签内容结尾加上自定义内容，和变色