CSS选择器

CSS介绍及选择器

第1节 CSS介绍层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看第2节 CSS选择器2.1 基本选择器2.2 嵌套关系选择器2.3 属性选择器2.4 伪类选择器2.5 伪元素选择器2.5.1 first-letter2.5.2 before2.5.3 after注：第3节 分组与嵌套3.1 分组3.2 嵌套第4节 选择器的优先级

第1节 CSS介绍

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...


# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

# css的三种引入方式
    1.style标签内部直接书写(为了教学演示方便我们用第一种)
      <style>
        h1  {
            color: burlywood;
        }
    </style>
  2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">
    3.行内式(一般不用)
          <h1 style="color: green">老板好 要上课吗?</h1>
"""
css的学习流程
    1.先学如何查找标签
        css查找标签的方式你一定要学会
        因为后面所有的框架封装的查找语句都是基于css来的
        css选择器很简单很好学不要有压力!!!

    2.之后再学如何添加样式
"""

第2节 CSS选择器

2.1 基本选择器

# id选择器：#

# 类选择器：.

# 元素/标签选择器:标签名

# 通用选择器：*

案例：
<style>
        /*id选择器*/
        #d1 {  /*找到id是d1的标签 将文本颜色变成绿黄色*/
            color: greenyellow;
        }
        /*类选择器*/
        .c1 {  /*找到class值里面包含c1的标签*/
            color: red;
        }
        /*元素(标签)选择器*/
        span {  /*找到所有的span标签*/
            color: red;
        }
        /*通用选择器*/    
        * {  /*将html页面上所有的标签全部找到*/
            color: green;
        }
</style>

2.2 嵌套关系选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""

# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器

<style>
    /*后代选择器*/
    div span {
        color: red;
    }

    /*儿子选择器*/
    div>span {
        color: red;
    }

    /*毗邻选择器*/
    div+span {  /*同级别紧挨着的下面的第一个*/
        color: aqua;
    }

    /*弟弟选择器*/
    div~span {  /*同级别下面所有的spa*/
        color: red;
    }
</style>

2.3 属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

<style>
    /*将所有含有属性名是username的标签背景色改为红色*/
    [username] {  
        background-color: red;
    }

    /*找到所有属性名是username并且属性值是yly的标签*/
    [username='yly'] {  
        background-color: orange;
    }

    /*找到所有属性名是username并且属性值是yly的input标签*/
    input[username='yly'] {  
        background-color: wheat;
    }
</style>

2.4 伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

2.5 伪元素选择器

2.5.1 first-letter

常用的给首字母设置特殊样式：

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

2.5.2 before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

2.5.3 after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

注：

before和after多用于清除浮动。

第3节 分组与嵌套

3.1 分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 例如：div, p {  color: red;}上面的代码为div标签和p标签统一设置字体为红色。通常，我们会分两行来写，更清晰:div,p {  color: red;}

3.2 嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。.c1 p {  color: red;}

第4节 选择器的优先级

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

img

除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。

万不得已可以使用!important