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

本是古典何须时尚 2023-07-20 10:41 4阅读 0赞

### CSS选择器 ###

*  CSS介绍
 *  选择器
 *   *  元素选择器
     *  类选择器
     *  ID选择器
     *  通用选择器
     *  复合选择器
     *  群组选择器
     *  后代选择器
     *  子元素选择器
     *  兄弟选择器
     *  属性选择器
     *  伪类和伪元素
     *  其他子元素选择器
     *  否定伪类
 *  样式的继承
 *  选择器的权重

--------------------

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

--------------------

# 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属性中，这种样式不用填写选择器，直接编写声明即可。

这种方式和用 `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>
        
        <style> p{ color: green; font-size: 50px; } </style> 
        
         <link rel="stylesheet" href="./style.css">
    </head>
    <body>
         
    
         <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>
        
        <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>