②CSS介绍及选择器的基本使用

最新推荐文章于 2022-09-18 15:25:16 发布

只爭朝夕不負韶華

最新推荐文章于 2022-09-18 15:25:16 发布

阅读量202

点赞数 1

分类专栏： # HTML和CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_45613931/article/details/105237651

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS选择器

CSS介绍
选择器
样式的继承
选择器的权重

本人是个新手，写下博客用于自我复习、自我总结。
如有错误之处，请各位大佬指出。
学习资料来源于：尚硅谷

CSS介绍

通过之前的文章，我们已经发现，如果只有标签结构，那么整体的内容就会显得十分空洞。现在通过CSS就能够对这些页面中元素的表现进行设计。CSS 的作用就是用来为网页创建样式表，通过样式表可以对网页进行装饰。

CSS 的样式表由一个一个的样式构成，一个样式又由选择器和声明块构成。基本语法：

选择器 {
    样式名: 样式值;
    样式名: 样式值; 
}

如果想让它起作用，我们需要将其写到<style>标签中。

简单使用例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例</title>
    <style>
      /*
        CSS中的注释，注释中的内容会自动被浏览器所忽略

        CSS的基本语法: 选择器 声明块

                选择器，通过选择器可以选中页面中的指定元素。
                比如 p的作用就是选中页面中所有的p元素。

                声明块，通过声明块来指定要为元素设置的样式
                声明块由一个一个的声明组成
                声明是一个名值对结构
                一个样式名对应一个样式值，名和值之间以:连接，以;结尾   
      */
      p{
          color: red;
          font-size: 40px;
      }
      h1{
          color: green;
      }
    </style>
</head>
<body>
    <h1>我是H1</h1>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
    <p>今天天气真不错！</p>
</body>
</html>

除此以外，CSS 代码还可以写在其它位置。

行内样式： 直接将样式写到标签内部的style属性中，这种样式不用填写选择器，直接编写声明即可。

<p style="color: red; font-size: 30px"></p>

这种方式和用 style 标签相比，编写简单，定位准确。但是由于直接将 css 代码写到了 html 标签的内部，导致结构与表现耦合，同时导致样式不能够复用（即该样式只能对这一个标签生效），所以这种方式通常不使用。

而对于第一种用 style 标签，这就是通常选择使用的方式，我们可以同时为多个元素设置样式，并且让 CSS 代码独立于 HTML 代码。但在项目中，我们可能会想让相同的 CSS 代码在多个页面中生效，这时我们可以使用 外部样式表，也就是将所有的样式保存到一个外部的 CSS 文件中，然后通过 <link> 标签将这个样式表引入到页面即可。

从外部引入这种方式就可以在多个页面中引入了。同时这种将样式编写到外部的CSS文件中的方式，还可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。这是在开发中使用最多的方式。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例</title>
    <!-- 
            第一种方式（内部样式表）
            - 将样式编写到head中的style标签里
                然后通过CSS的选择器来选中元素并为其设置各种样式
                可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
            - 内部样式表更加方便对样式进行复用
            - 问题：
                 内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
     -->
    <style>
        p{
            color: green;
            font-size: 50px;
        }
    </style> 
    <!-- 
            第三种方式 （外部样式表）
            - 可以将CSS样式编写到一个外部的CSS文件中,
                然后通过link标签来引入外部的CSS文件
            - 外部样式表需要通过link标签进行引入，
                意味着只要想使用这些样式的网页都可以对其进行引用
                这样样式就可以在不同页面之间进行复用
     -->
     <link rel="stylesheet" href="./style.css">
</head>
<body>
     <!-- 
            第二种方式(内联样式，行内样式)：
            - 在标签内部通过style属性来设置元素的样式
            - 问题：
                    使用内联样式，样式只能对一个标签生效，
                    如果希望影响到多个元素必须在每一个元素中都复制一遍
                    并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便
      -->

     <p style="color: red; font-size: 60px;">今天天气真不错！</p> 

     <p>落霞与孤鹜齐飞，秋水共长天一色</p>

     <p>少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>

style.css：

p{
    color: tomato;
    font-size: 50px;
}

在本文中，样式都是比较简单的，比如：color（颜色）、font-size（字体大小）。后续还会有很多用法，需要和HTML整体来看。因此本文中将先只对选择器进行介绍。其它用法将在之后的文章中介绍。

选择器

元素选择器

通过上面的使用例子，我们已经知道了，选择器会告诉浏览器网页上的哪些元素需要设置什么样的样式。p 这个选择器就表示选择页面中的所有的 p 元素，在选择器之后所设置的样式会应用到所有的p元素上。而这种选择器，叫做元素选择器（标签选择器）。

元素选择器：可以根据标签的名字来从页面中选取指定的元素。

语法：

标签名 {

}

类选择器

在第 ① 篇文章中提到了，每个标签都有 id 和 class 两个属性。现在这两个属性就可以使用了。

类选择器：根据元素的 class 属性值选取元素。

语法：

.className {

}

注意类名（class）前要加一个 .

比如 .hello 会选中页面所有class属性为hello的元素。

ID选择器

ID选择器，可以根据元素的 id 属性值选取元素。

语法：

#id {

}

注意 id 前要加一个 #

比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。

通用选择器

通用选择器，可以同时选中页面中的所有元素。

语法：

* {

}

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常用选择器</title>
    <style>
        /*元素选择器*/
        /* 
        p{
            color: red;
        }

        h1{
            color: green;
        } 
        */
        
        /* id选择器*/
        #red{
            color: red;
        }

        /* 类选择器*/
        .blue{
            color: blue;
        }

        .abc{
            font-size: 40px;
        }

        /*通配选择器*/
        /*
        *{
            color: red;
        } 
        */
    </style>
</head>
<body>
    <h1 class="blue abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- 
      class 是一个标签的属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
    -->
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>

复合选择器

复合选择器：可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素。

语法：

选择器1选择器2{

}

注意：选择器1和2之间没有空格。

例如：div.box1 会选中页面中具有box1这个class的div元素。

群组选择器

群组选择器：可以同时使用多个选择器，多个选择器将被同时应用指定的样式。

语法：

选择器1,选择器2,选择器3 {

}

比如：p,.hello,#box 会同时选中页面中p元素，class为hello的元素，id为box的元素。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        /* 将class为red的元素设置为红色（字体） */
        .red{
            color: red;
        }

        /* 将class为red的div字体大小设置为30px */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue
        }

        /*群组选择器*/
        h1, span{
            color: green
        }

    </style>
</head>
<body>
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
    <div class="red2 a b c">我是div2</div>
    <h1>标题</h1>
    <span>哈哈</span>
</body>
</html>

在第 ① 篇文章中提到了，标签之间存在着一些关系，现在对这些关系再做一些说明，这将有助于对 CSS 选择器用法的使用。

• 祖先元素

– 直接或间接包含后代元素的元素。

• 后代元素

– 直接或间接被祖先元素包含的元素。

• 父元素

– 直接包含子元素的元素。

• 子元素

– 直接被父元素包含的元素。

• 兄弟元素

– 拥有相同父元素的元素。

后代选择器

后代选择器：根据标签的关系，为处在元素内部的后代元素设置样式。

语法：

祖先元素 后代元素 后代元素 {

}

注意：元素名之间有空格。

比如：p strong 会选中页面中所有的p元素内的strong元素。

子元素选择器

子元素选择器：给一个元素的子元素设置样式。

语法：

父元素 > 子元素{

}

比如：body > h1 将选择body子标签中的所有h1标签。

兄弟选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

查找后边一个兄弟元素

兄弟元素 + 兄弟元素{

}

查找后边所有的兄弟元素

兄弟元素 ~ 兄弟元素{

}

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>关系选择器</title>
    <style>
        /*子元素选择器*/
        /* 
        div.box > span{
            color: orange;
        } 
        */
        div > p > span{
             color: red;
        }

        /*后代选择器*/
        /* 
        div span{
             color: skyblue
        }  
        */
        
		/*兄弟选择器*/
          p + span{
              color: red;
          }

          p ~ span{
              color: red;
          }
    </style>
</head>
<body>
    <div class="box">
        我是一个div
        <p>
                我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <div></div>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
    </div>
    <br>
    <span>
        我是div外的span
    </span>
</body>
</html>

属性选择器

属性选择器可以挑选带有特殊属性的标签。

语法:

[属性名] 选择含有指定属性的元素

[属性名=属性值] 选择含有指定属性和属性值的元素

[属性名^=属性值] 选择属性值以指定值开头的元素

[属性名$=属性值] 选择属性值以指定值结尾的元素

[属性名*=属性值] 选择属性值中含有某值的元素的元素

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
        /* p[title] */
        /* p[title=abc] */
        /* p[title^=abc] */
        /* p[title$=abc] */
        p[title*=e]{
            color: orange;
        }
    </style>
</head>
<body>
        <p title="abc">少小离家老大回</p>
        <p title="abcdef">乡音无改鬓毛衰</p>
        <p title="helloabc">儿童相见不相识</p>
        <p>笑问客从何处来</p>
        <p>秋水共长天一色</p>
        <p>落霞与孤鹜齐飞</p>
</body>
</html>

伪类和伪元素

有时候，你需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

• 正常链接a:link

• 访问过的链接a:visited（只能定义字体颜色）

• 鼠标滑过的链接a:hover

• 正在点击的链接a:active

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）。伪元素使用 :: 开头，比如：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

（before 和 after 必须结合content属性来使用）

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>a元素的伪类</title>
    <style>
        /* 
            :link 用来表示没访问过的链接（正常的链接）
         */
        a:link{
            color: red;
        }

        /* 
            :visited 用来表示访问过的链接
           	 由于隐私的原因，所以visited这个伪类只能修改链接的颜色
        */
        a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }

        /* 
            :hover 用来表示鼠标移入的状态
         */
         a:hover{
             color: aqua;
             font-size: 50px;
         }

         /*
            :active 用来表示鼠标点击
         */
         a:active{
             color: yellowgreen;
         }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪元素选择器</title>
    <style>
        p{
            font-size: 20px;
        }

       /* 
                伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
                伪元素使用 :: 开头

                ::first-letter 表示第一个字母
                ::first-line 表示第一行
                ::selection 表示选中的内容
                ::before 元素的开始 
                ::after 元素的最后
                    - before 和 after 必须结合content属性来使用
        */
        p::first-letter{
            font-size: 50px;
        }

        p::first-line{
            background-color: yellow; 
        }

        p::selection{
            background-color: greenyellow;
        }

        div::before{
            content: '『';
            color: red;
         }

        div::after{
            content: '』';
            color: blue;
        }

    </style>
</head>
<body>
    <div>Hello Hello How are you</div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio. Id odit consequatur mollitia excepturi, minus saepe nostrum vel porro.
    </p>
</body>
</html>

其他子元素选择器

:first-child 选择第一个子标签

:last-child 选择最后一个子标签

:nth-child 选择指定位置的子元素`

:first-of-type :last-of-type :nth-of-type 选择指定类型的子元素

否定伪类

否定伪类可以帮助我们选择不是其他东西的某件东西。

语法:

:not(选择器){

}

比如：p:not(.hello)表示选择所有的p元素但是class为hello的除外。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>伪类选择器</title>
    <style>
	  /* 
                伪类（不存在的类，特殊的类）
            - 伪类用来描述一个元素的特殊状态
                比如：第一个子元素、被点击的元素、鼠标移入的元素...
            - 伪类一般情况下都是使用:开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
                       特殊值：
                n 第n个 n的范围0到正无穷
                2n 或 even 表示选中偶数位的元素
                2n+1 或 odd 表示选中奇数位的元素

                以上这些伪类都是根据所有的子元素进行排序

                :first-of-type
                :last-of-type
                :nth-of-type()
                - 这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序

             :not() 否定伪类
                - 将符合条件的元素从选择器中去除
      */
        /* ul > li:first-child{
            color: red;
        } */
    
        /* ul > li:last-child{
            color: red;
        } */

        /* ul > li:nth-child(2n+1){
            color: red;
        } */

        /* ul > li:nth-child(even){
            color: red;
        } */

        /* ul > li:first-of-type{
            color: red;
        } */

        ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

样式的继承

在 CSS 中祖先元素的样式会被子元素继承。继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。

比如：为父元素设置了字体颜色，子元素也会应用上相同的颜色。但并不是所有的样式都会被继承，比如和背景相关的，布局相关等的这些样式都不会被继承。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式的继承</title>
    <style>
        /* body{
            font-size: 12px;
        } */

        /* 
            样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

            继承是发生在祖先和后代之间的

            继承的设计是为了方便我们的开发，
            利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
            这样只需设置一次即可让所有的元素都具有该样式

            注意：并不是所有的样式都会被继承。
         */
        
        p{
            color: red;
            background-color: orange;
        }

        div{
            color: yellowgreen
        }
    
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是p元素外的span</span>
    <div>
        我是div
        <span>
            我是div中的span
            <em>我是span中的em</em>
        </span>
    </div>
</body>
</html>

选择器的权重

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

比如：

– body h1
– h1

上边的两个选择器都会选择 h1 元素，如果两个选择器设置的样式无关，那就不会产生冲突。但是如果两个选择器设置的是同一个样式，这样 h1 到底要应用那个样式呢？CSS中会默认使用权重较大的样式，权重又是如何计算的呢？

不同的选择器有不同的权重值：

– 内联样式：权重是 1000

– id选择器：权重是 100

– 类、属性、伪类选择器：权重是 10

– 元素选择器：权重是 1

– 通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，比如上边的body h1的权重是20，h1的权重是10，所以第一个选择器设置的样式会优先显示。

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器的权重</title>
    <style>
        #box1{
            background-color: orange;
        }

        div#box1{
            background-color: yellow;
        } 

        .d1{
            background-color: purple !important;
        }
        .red{
            background-color: red;
            /* font-size: 20px; */
        }

        div,p,span{
            background-color:yellowgreen;
        }

        /* 
                选择器的权重
                内联样式        1,0,0,0
                id选择器        0,1,0,0
                类和伪类选择器   0,0,1,0
                元素选择器       0,0,0,1
                通配选择器       0,0,0,0
                继承的样式       没有优先级

                比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，
                则越优先显示（分组选择器是单独计算的）
                
                选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
                如果优先级计算后相同，此时则优先使用靠下的样式

                可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，
                甚至超过内联样式。
                注意：在开发中这个操作要慎用！
         */

         *{
             font-size: 50px;
         }

         div{
             font-size: 20px;
         }
    </style>

</head>
<body>
    <div id="box1" class="red d1 d2 d3 d4" style="background-color: chocolate;">
         我是一个div 
         <span>我是div中的span</span>
    </div>
</body>
</html>