CSS层叠样式表介绍和选择器的使用

作者: moutory | 来源:发表于2020-12-19 15:33 被阅读0次

前言

对于后端开发人员来说，掌握css的基本用法还是很有必要的，话不多说，本篇文章将会主要介绍CSS在工作中常用的知识点，特别是选择器。也希望能够对CSS不熟悉的后台人员一些参考。

一、CSS简介及语法

CSS的全称是Cascading Style Sheets，主要是负责标签的样式，美化页面
CSS语法十分简单

  选择器 {
    属性：属性值 ;
 }
// 选择器中用大括号包含要定义的样式属性，多个属性间用 ; 号隔开

二、使用CSS的三种方式

1. 行内样式（在html标签中使用style属性）

<h1 style="color: yellow">这段文字会变色</h1>

image.png

2. 内部样式表（在页面中使用style标签进行定义）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1 style="color: yellow">这段文字会变色</h1>
<h1>这段文字会变色</h1>
</body>
</html>

image.png

3. 外部样式表（就是css独立成一个文件出来，再通过link标签引入）

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            color: red;
        }
    </style>
    <link href="demo.css" rel="stylesheet">
</head>
<body>
<h1 style="color: yellow">这段文字会变色</h1>
<h1>这段文字会变色</h1>
<h2>这段文字会变色</h2>

</body>
</html>

image.png

那么，这三者谁的优先级更高呢？
答案是行内样式表 > 内部样式表 > 外部样式表
虽然行内样式表优先级更高，但是如果样式都写在具体的每一个标签中的话，有两个明显的缺点，一个是样式的不可复用性带来的大量无谓劳动，另一个是代码的臃肿和冗余。所以日常工作中我们还是使用外部样式或者内部样式表来定义多一些。

三、CSS的选择器（重要）

CSS选择器顾名思义就是帮我们在页面中选定我们要修改样式的元素，一个复杂的页面往往包含嵌套着各种各样的元素，要想高效的实现元素定位就要熟练地掌握常用的选择器

（一）基本选择器

1、id选择器（也就是根据id定位元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #duanduanduan{
            color: darkcyan;
        }
    </style>
</head>
<body>
<h1 id="duanduanduan">这段文字会变色</h1>
</body>
</html>

image.png

注意，id选择器以 # 号开头，且id唯一

2、类选择器（根据class定位元素，语法以 . 开头）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .duanduanduan{
            color: darkcyan;
        }
    </style>
</head>
<body>
<h1 class="duanduanduan">这段文字会变色</h1>
<h1 class="duanduanduan">这段文字会变色</h1>
<h1 class="duanduanduan">这段文字会变色</h1>
</body>
</html>

image.png

我们可以看到class选择器和id选择器最大的不同就是class选择器有更为强大的复用性，也是我们经常使用的选择器之一。

3、标签选择器（针对html标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: greenyellow;
        }
    </style>
</head>
<body>
<h1 class="duanduanduan">这段文字会变色</h1>
<h2 class="duanduanduan">这段文字会变色</h2>
<h3 class="duanduanduan">这段文字会变色</h3>
</body>
</html>

image.png

很容易可以看出，标签选择器的特点十分明显，可以针对html标签直接选择，但缺点也很明显，当一个复杂的页面涉及到的元素十分的多，标签选择器选择条件单一、不支持复杂条件的缺点就暴露出来了。

那么，如果三个基本选择器同时对一个元素的同一属性操作，哪个优先级更高呢？
答案是id选择器 > 类选择器 > 标签选择器

（二）高级选择器

1、层次选择器

先说说场景，一个复杂的页面往往会出现这样一个场景，一个元素中嵌套了多个子元素，而子元素中又嵌套了其他子元素，那么对于这类具有层次性的元素来说，使用层次选择器来确定对象会是一个好方法。
再说说使用，层次选择器本质上通过父...父选择器 ... 父父选择器父选择器子选择器的方式一步步地逼近和定位我们想要选择的元素，层次选择器共有如下4种：

1.后代选择器
选中parent元素内部后代所有 n 元素。
parent n{ }
2.子代选择器
选中 parent 元素内部的子元素 n
parent>n{}
3.兄弟选择器
选中 brother 元素后面的所有某一类兄弟元素 n。
brother~n{}
4.相邻选择器
选中brother元素后面的某一个相邻的兄弟元素n。
brother+n{}

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1 div{
            color: darkred;
            font-size: xx-large;
        }
        div #id2 .class2 {
            color: blue;
            font-size: xx-large;
        }
 /*
   等价于
      div .class2 {
                  color: blue;
                  font-size: xx-large;
                    }
*/
    </style>
</head>
<body><div id="id1">
    <div>12444</div>
</div>
<div>
    <div id="id2">
        <div class="class2">
            <div>13343444</div>
            <div>13343444</div>
            <div>13343444</div>
            <p>121322345</p>
        </div>
    </div>
</div>
</body>
</html>

image.png

效果很明显，被选中的所有相关子元素都被渲染到了。

子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #id1 div{
            color: darkred;
            font-size: xx-large;
        }
        #fafa>#fa>.class2 {
            color: blue;
            font-size: xx-large;
        }
    </style>
</head>
<body><div id="id1">
    <div>12444</div>
</div>
<div id="fafa">
    <div id="fa">
        <div class="class2">
            aaa
            <div>
                <div class="hehe">123331</div>
            </div>
            <div>13343444</div>
            <div>13343444</div>
            <p>121322345</p>
        </div>
    </div>
</div>
</body>
</html>

image.png

后代选择器和子代选择器在使用起来到底有什么不同呢
其实是有的，二者最大的不同在于范围，后代选择器中的所有子级包含的元素都属于该元素的后代，可以“跳级”使用。
以下面的代码为例，对于id为fafa的元素来说，里面其他元素都是它的后代，可是属于子类的就只有id为fa的元素。假如现在想要定为class2的元素，用后代选择器可以写为#fafa class2，但是用子类选择器就要写成#fafa>#fa>.class2(当然，更简单的写法是#fa>class2)

<div id="fafa">
    <div id="fa">
        <div class="class2">
            aaa
            <div>
                <div class="hehe">123331</div>
            </div>
            <div>13343444</div>
            <div>13343444</div>
            <p>121322345</p>
        </div>
    </div>
</div>

相邻选择器（也就是先定位到某一层次的元素后，再定位它的一个兄弟元素）

image.png
（相邻）兄弟选择器
其实兄弟选择器和相邻选择器差不多，只是说所选的个数不同而已

image.png

（二）属性选择器（常用）

相对于层次选择器来说，如果元素中没有id和class属性的话，属性选择器会是更好的选择，对带有指定属性的 HTML 元素设置样式,属性选择器更加擅长定位到具备某些属性的元素。属性选择器的语法如下：

 标签 [attribute = 'xxx']{
       样式...
   }
[attribute=value]   用于选取带有指定属性和值的元素。
[attribute~=value]  用于选取属性值中包含指定词汇的元素。
[attribute|=value]  用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]  匹配属性值以指定值开头的每个元素。
[attribute$=value]  匹配属性值以指定值结尾的每个元素。
[attribute*=value]  匹配属性值中包含指定值的每个元素。

image.png

（三）结构伪类选择器

结构伪类选择器可以理解为是在选择范围的基础上，加上了特定的条件对选择项进行过滤，通常来说，过滤的条件会是具体的排列序号。（比如选择多个同级li中的第二个li标签）。
结构伪类选择器和层次选择器一样，都比较适合用在没有id和class条件下进行选择的场景。
结构伪类选择器使用的情况比较少，这里的话只举例常用的几个

E:first-child 选择所有p元素的第一个元素
E:last-child   选择所有p元素的最后一个子元素
E:nth-child(n)  选择所有p元素的第n个元素

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li:first-child{
            background: red;
        }
        ul li:last-child{
            background: greenyellow;
        }
        ul li:nth-child(3){
            background: blue;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第1行</li>
        <li>第2行</li>
        <li>第3行</li>
        <li>第4行</li>
        <li>第5行</li>
        <li>第6行</li>
    </ul>
</div>
</body>
</html>

image.png

四、伪类和伪元素
在一些特殊的场景上，上面的选择器可能无法满足我们的需要，比如样式是根据用户的动作发生改变的，这种场景下我们是无法确定到底给哪些元素进行样式的，还有就是在一些特殊的位置（比如首字母）加样式，这种也是使用其他选择器不好解决的场景。
（一）伪类
伪类一般用于帮助我们定位根据用户行为而产生的元素以及一些特殊位置的元素

伪类	作用
:hover	定位当前鼠标悬浮到的元素
:active	定位当前鼠标点击的元素
:visited	已经访问过的链接（只适用于a标签，且只能设置颜色）
:link	未访问过的链接（只适用于a标签，且只能设置颜色）
:first-child	未访问过的链接（只适用于a标签，且只能设置颜色）

<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a:hover{
            font-size: 30px;
        }
        a:active{
            color: skyblue;
        }
         a:visited{
            color: orange
        } 
        a:link{
            color:purple
        }
        a:first-child{
            background-color: rgb(207, 250, 207);
        }
    </style>
</head>


<body>
    <div>
            <a href="https://www.baidu.com">这是第一个标签</a>
            <br/><br/>
            <a href="http://localhost:3010">这是第二个标签</a>
    </div>
</body>

需要注意的是，如果已经定义了:visited、:link的元素的颜色的话，此时其他伪类对于a标签再定义文本颜色的话是不生效的。

（二）伪元素
伪元素支持我们在特殊的位置加入样式，假如说页面上有一个<p>标签，我想要实现无论标签内文本是什么，第一个字母的文本大小必须是30px。这个可以怎么实现呢？
如果文本是固定的，我们自然想到可以自己手动定位首个字母后，对它包裹一个标签，这样就可以定位到了。但如果文本不是固定的，此时我们就不好处理了。伪元素其实实现原理就是跟这个很相似，它所实现的效果相当于是帮助我们在对应的文本中的某个元素上加了一个不存在的标签。需要注意的是，虽然伪元素可以和伪类一样，只用一个:来表示，但是CSS3的规范还是建议我们使用::。

伪元素	作用
::first-letter	定位元素中的第一个字母
::first-line	定位元素中的第一行
::before	在某元素之前插入某些内容
::after	在某元素之后插入某些内容

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p::first-letter {
            font-size: 30px;
        }
        p::first-line {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore, quibusdam eius quasi debitis voluptatum vero
        suscipit aperiam saepe consequuntur enim mollitia possimus impedit provident autem. Aliquid adipisci culpa
        pariatur dignissimos.</p>
</body>

image.png

::before和::after在某些情况下也十分地好用，比如下面的在元素前后加入【和】

<head>
    <style>
        p::before{
            content: '【';
        }
        p::after{
            content: '】';
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</body>

image.png

说在最后

在学习CSS的时候，发现GitHub上有一个CSS的练习游戏，有兴趣的同学也可以自己下载下来练习：
https://github.com/yizhou19/select_css_practice

CSS层叠样式表介绍和选择器的使用

前言

一、CSS简介及语法

二、使用CSS的三种方式

1. 行内样式（在html标签中使用style属性）

2. 内部样式表（在页面中使用style标签进行定义）

3. 外部样式表（就是css独立成一个文件出来，再通过link标签引入）

三、CSS的选择器（重要）

（一）基本选择器

1、id选择器（也就是根据id定位元素）

2、类选择器（根据class定位元素，语法以 . 开头）

3、标签选择器（针对html标签）

（二）高级选择器

1、层次选择器

（二）属性选择器（常用）

（三）结构伪类选择器

说在最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

CSS层叠样式表介绍和选择器的使用

前言

一、CSS简介及语法

二、使用CSS的三种方式

1. 行内样式 （在html标签中使用style属性）

2. 内部样式表（在页面中使用style标签进行定义）

3. 外部样式表（就是css独立成一个文件出来，再通过link标签引入）

三、CSS的选择器（重要）

（一）基本选择器

1、id选择器（也就是根据id定位元素）

2、类选择器（根据class定位元素，语法以 . 开头）

3、标签选择器（针对html标签）

（二）高级选择器

1、层次选择器

（二）属性选择器（常用）

（三）结构伪类选择器

说在最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

1. 行内样式（在html标签中使用style属性）