前端——CSS选择器

目录

• 前端CSS
• CSS三种引入方式
• CSS标签选择器
• 基本选择器
  • 1.元素选择器
  • 2.类选择器
  • 3.id选择器
  • 4.通用选择器
• 组合选择器
  • 1.后代选择器 空格
  • 2.儿子选择器 >
  • 3.毗邻选择器 +
  • 4.弟弟选择器 ~
• 属性选择器 中括号[ ]
  • 1.精确属性查找
  • 2.更精确属性查找
  • 3.精确度再提高查找
• 组合选择器
  • 1.标签组合选择
• 伪类选择器
  • 1.日常状态
  • 2.鼠标悬浮时
  • 3.鼠标按下时
  • 4.鼠标送开时
  • 5.鼠标聚焦之后触发
• 伪元素选择器
  • 1.选择首字
  • 2.再标签之前添加文本
  • 3.在标签之后添加文本

前端CSS

CSS三种引入方式

	1.外部css文件(最正规的书写方式)
	2.head内style标签内部直接书写css代码(为了教学方便可以使用这种)
	3.标签内部通过style属性直接书写对应的样式(不推荐)

CSS标签选择器

基本选择器

1.元素选择器

 /*标签选择器 元素选择器*/
div {  /*将页面上所有的div标签内部的文本变成红色*/
            color: red;
        }

2.类选择器

        /*类选择器     点号*/
        .c1 {  /*让所有具有c1类属性值的标签内部文本变成蓝色*/
            color:blue;
        }

3.id选择器

        /*id选择器     #号*/
        #d1 {  /*将id为d1的标签内部文本内容改成绿色*/
            color: green;
        }

4.通用选择器

        /*通用选择器   *号*/
        * {  /*页面上所有的标签统一修改样式*/
            color: aqua;
        }

组合选择器

1.后代选择器 空格

//div下的所有a,包括儿子，孙子。。。。

div   a

{

}

2.儿子选择器 >

//只有div下的儿子才能被作用

div > a

{

}

3.毗邻选择器 +

//div下紧挨着的下一个标签

div + a

{

}

4.弟弟选择器 ~

//div 同级别下面所有的标签。div标签下面的所有a标签

div ~ a

{

}

属性选择器 中括号[ ]

精确度又称为：粒度

1.精确属性查找

        /*属性选择器 [] */
        [username] {    /*找到页面上所有具有username属性名的标签*/
            background-color: deeppink;
        }

2.更精确属性查找

        [username='jason'] {  /*找到页面上属性名是username并且属性值叫jason的标签*/
            background-color: black;
        }

3.精确度再提高查找

        input[username="jason"] {  /*找到页面上属性名是username并且属性值叫jason的input标签*/
            background-color: aqua;
        }

组合选择器

1.标签组合选择

没有组合之前：代码冗余，陋

        div {
            color: red;
        }
        p {
            color: red;
        }
        span {
            color: red;
        }

组合之后：

        div ,p, span {
            color: red;
        }

伪类选择器

1.日常状态

        a:link {
            color: aqua;
        }

2.鼠标悬浮时

        a:hover {  /*鼠标悬浮*/
            color: black;
        }

3.鼠标按下时

        a:active {
            color: green;
        }

4.鼠标送开时

        a:visited {
            color: gray;
        }

5.鼠标聚焦之后触发

        input:focus {
            background-color: red;
        }

伪元素选择器

1.选择首字

        p:first-letter {
            color: red;
            font-size: 48px;
        }

2.再标签之前添加文本

        p:before {
            content: '添加的内容';           # 在p标签之前添加内容
            color: red;
        }

3.在标签之后添加文本

        p:after {
            content: 'jeff';         # 在p标签之后添加文本
            color: blue;
        }