HTML学习笔记（三）CSS引入方式及基本选择器、组合选择器、属性选择器

2021/12/23 6:37:48

编程Tag： 选择器标签 title css html div color span

本文主要是介绍HTML学习笔记（三）CSS引入方式及基本选择器、组合选择器、属性选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

下面是听了林海峰老师的视频总结与大家一起分享~

一、CSS三种引入方式

1、style标签内部直接书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    1、style标签内部直接书写-->
    <style>
        h1{
            color: #7a77c8;
        }
    </style>
</head>
<body>

<h1>你好呀！！！！</h1>
</body>
</html>

2、link标签引入外部css文件（最正规的方式，解耦合）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2、link标签引入外部css文件（最正规的方式，解耦合）-->
    <link rel="stylesheet" href="CSS初识.css">
</head>
<body>
<h1>你好呀！！！！</h1>
</body>
</html>

CSS初始.css文件内容如下

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
h1{color: #2b99ff}

3、行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    3、行内式-->
<h1 style="color: #1cb7fd">你好呀！！！！</h1>
</body>
</html>

二、CSS基本选择器

1、id选择器

2、类选择器

3、元素（标签）选择器

4、通用选择器

下面介绍一个小案例来介绍CSS的基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
       #d1 {  /*找到id为d1的标签*/
            color: #7a77c8;
        }
        /*类选择器*/
       .c1 { /*找到class值里面包含c1的标签*/
            color: #0000cc;
        }
       /*元素（标签）选择器*/
        span {/*将找到所有的span标签*/
            color: #7B7B7B;
        }
        /*通用选择器*/
        * {/*将html页面上所有的标签全部找到*/
            color: #f6c4d7;
        }
    </style>
</head>
<body>
<div id="d1" class="c1 c2">div
    <p>div里面的p</p>
    <span>div里面的span</span>
</div>
<p id="d2" class="c1 c2">pppp</p>
<span id="d3" class="c2">span1111</span>
<span id="d4" class="c4">span2222</span>
</body>
</html>

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

三、属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="12"] {
  color: red;

就以一个简单的案例来为大家介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [username]{/*将所有含有属性名是username的标签背景色改为蓝色*/
            background: #2b99ff;
        }
        [username='jason']{/*找到所有属性名是username并且属性值是jason的标签*/
            color: #f6c4d7;
        }
        input[username='jason']{/*找到所有属性名是username并且属性值是jason的input标签*/
             background: #2b99ff;
        }
    </style>
</head>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin">
<p username="tank">tank老师</p>
<div username="egon">egon老师</div>
<span username="jason">jason老师</span>
</body>
</html>

补充几个小点：

/*找到所有title属性以word开头的元素*/
[title^="word"] {
  color: red;
}

/*找到所有title属性以word结尾的元素*/
[title$="word"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）word的元素*/
[title*="word"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为word的元素：*/
[title~="word"] {
  color: green;
}

四、组合选择器

<!--在前端，我们将标签的嵌套关系用亲戚关系来表述层级-->
1、后代选择器

2、儿子选择器

3、毗邻选择器

4、弟弟选择器

以简单的案例为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span {
            color: #f6c4d7;
        }
        /*儿子选择器*/
        div>span{
            color: #0000cc;
        }
        /*毗邻选择器*/
        div+span{/*同级别紧挨着的下面的第一个*/
            color: #7B7B7B;
        }
        /*弟弟选择器*/
        div~span{/*同级别下面的所有span*/
            color: #cc2929;
        }
    </style>
</head>
<body>

<span>
    span1
</span>
<span>
    span2
</span>
<div>
    div
    <p>div p</p>
    <p>div p
    <span>
        div p span
    </span>
    </p>
    <span>span</span>
    <span>span</span>
</div>
    <span>span</span>
    <span>span</span>
</body>
</html>

这篇关于HTML学习笔记（三）CSS引入方式及基本选择器、组合选择器、属性选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

HTML学习笔记（三）CSS引入方式及基本选择器、组合选择器、属性选择器

相关编程文章