CSS选择器

@动感超人

于 2024-10-09 12:48:39 发布

阅读量629

点赞数 16

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_82005922/article/details/142746056

版权

上一期我们学习了如何编写一个基本的网页，但要如何把我们网页装饰的更加美观呢？我们就要用到CSS。CSS是一种格式化网页的方式，让我们能够用更有效，更易维护的方式设置网页格式。

1.网页中引用CSS的方法

1.1行内式

通过用style属性来设置各个元素从而达到设置样式的目的，格式为：

<标签 style="属性：属性值；属性：属性值；...">

<h2 style="color: brown; font-size: 30px; font-family: 正楷;">测试css引入方式：行内式</h2>

此代码运用了行内式来给字体设置了文字的颜色，文字的大小和字体

1.2 内嵌式

与行内式不同，将css代码放置于页面的<head>与</head>之间，格式为：

选择符1{属性：属性值；属性：属性值；...}

选择符2{属性：属性值；属性：属性值；...}

...

选择符n{属性：属性值；属性：属性值；...}

</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内嵌式</title>
    <style>
        h3{
            color: chocolate;
            font-size: 30px;
            font-family: 宋体;
        }
    </style>
</head>
<body>
    <h3>测试css引入方式：内嵌式</h3>
</body>
</html>

这里先在body写好想要改变样式的字体，然后在head部分通过style属性来对文本进行一个样式的改变。

1.3 外链式

通过<link>标签将定义了样式的一个或多个css文件链接到HTML文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外链式</title>
    <!-- css外链最好使用相对路径，以提高代码移植性 -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h4>测试css引入方式：外链式</h4>
</body>
</html>

rel:定义文档与被链接文档之间的关系，在这里指定为stylesheet表被链接文档是一个样式文档。

href：定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路径。

注：这里使用了一个外链接植入的方法来对文字进行了一个样式的改变，首先你可以在你想要的文件夹内单独放置一个style属性的样式设置文件，然后通过link的href来进行一个植入。

本代码中植入的是这个：

2 基本选择器

2.1 类选择器

格式为：

<style>
.类{

属性设置

}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .book-name{color: rgb(199, 29, 29);}
    </style>
</head>
<body>
    <!-- 类选择器 优先级中间-->
    <h1 class="book-name" id="网易">第五人格</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

这里通过给标签内设置类名的方式来进行一个样式的改变，本代码中通过给h1的一个类名设置，然后在head标签内通过style属性来对指定的类进行样式改变

注：类名不可重复

2.2 id 选择器

格式为：

<style>
#id名{

属性设置

}
</style>

id 选择器和类选择器基本差不多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #木瓜黄{color: rgba(255, 255, 0, 0.749);}
    </style>
</head>
<body>
    <!-- id选择器 优先级最高-->
    <h1 id="木瓜黄">撒野</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2.3 标签选择器

<style>

标签选择符1{属性：属性值；属性：属性值；...}

标签选择符2{属性：属性值；属性：属性值；...}

...

标签选择符n{属性：属性值；属性：属性值；...}

</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{color: rgb(241, 203, 50);}
    </style>
</head>
<body>
     <!-- 标签选择器 优先级最低-->
     <h2 class="book1" id="墨香">天官赐福</h2>
     <ul>
         <li></li>
         <li></li>
         <li></li>
     </ul>
</body>
</html>

此代码中文本用了h2标签来设置文本，所以我们可以通过h2标签来对文本进行样式设置。

3 复合选择器

3.1 交集选择器

1.选择的元素要同时满足多个条件
2.选择器间紧紧相连
3.标签选择器放在前，类选择器在后

格式为：

p.class/id { color:red; }

"p"为标签，任何标签都可以。“class/id”二选一即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器 */
        /* 选择id名为木瓜黄的h1标签 */
    h1#木瓜黄{color: rgb(255, 0, 183);}
    /* 选择类名为章节的ul标签 */
    ul.章节{color: brown;}
    </style>
</head>
<body>
    <h1 class="book" id="木瓜黄">撒野</h1>
    <ul class="章节">
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
    </ul>
    
</body>
</html>

3.2 并集选择器

选中多个基本选择符，集中设置样式。其结果是所有选中的基本选择符的样式改变一致。

如下图，这里选择了基本选择符 h1,h1,h3，那么最后的结果是 h1,h1,h3的文本样式均改变一致。

<style>
        h1,h2,h3{color: aqua;}
    </style>



    <h1>第五人格</h1>
    <h2>撒野</h2>
    <h3>天官赐福</h3>

当然任何形式的基本选择符都可以作为并集的一部分，如下图，并集选择符使用了id 选择符作为并集选择符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
/* 并集选择器 */
    #网易,#木瓜黄,#墨香{color: blue;}

</style>
 </head>
<body>
    <h1 class="book-name" id="网易">第五人格</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    <h1 class="book" id="木瓜黄">撒野</h1>
    <ul class="章节">
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
    </ul>
    <h1 class="book1" id="墨香">天官赐福</h1>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
</body>
</html>

4.关系选择器

4.1 后代选择器

后代选择器，包含在父代里面的所有子代，中间要用空格隔开。这个只作用于后代，不会作用于父代

格式：父代子代 {}

代码演示：

.box li{
    color: deeppink;
    }
 
    <ul class="box">
                <li>儿子1</li>
                <li>儿子2</li>
                <li>儿子3</li>
                <li>儿子4</li>
                <li>儿子5</li>
      </ul>

ul里面包含了li，为父子关系,而class作为ul的类，所以也可以作为父代使用，在父代下面的li为子代，因此在ul之下的li样式均被改变。

4.2子代选择器

格式：父代>子代{}

只是子代生效，但不往下递归

<style>
        ul>#one{
    color: deeppink;
    }
    </style>




<ul>
        <li id="one">儿子1</li>
        <li id="two">儿子2</li>
        <li>儿子3</li>
        <li>儿子4</li>
        <li>儿子5</li>
</ul>

这里只有儿子1的样式被改变，其他均不变。

4.3相邻兄弟选择器

格式：大哥+二哥{}

但仅有二哥生效大哥不生效后面的平级也不生效

 <style>
     .t3+h1{
        color: #fa4d15;
      }
    </style>
 
 
 
<p class="t3">大哥</p>
<h1>二哥</h1>
<h1>三哥</h1>

这个代码中只有二哥字体颜色变了，无论是大哥还是二哥后面的均没有改变。

4.4 通用兄弟选择器

在平级中所有兄弟都生效，但除了大哥

.t1 ~ p{
      color: yellow;}
 
 
 
 
<h2 class="t1">大哥</h2>
<p>二哥</p>
<p>三哥</p>

这里除了大哥以外，二哥和三哥均变黄色。

@动感超人

关注

16
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫