CSS选择器

薄荷猫阿茶

已于 2022-05-09 23:41:40 修改

阅读量362

点赞数

分类专栏： Html5 css 文章标签： css html linq

于 2022-05-09 23:40:53 首次发布

本文链接：https://blog.csdn.net/baidu_31741963/article/details/124678186

版权

Html5 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

二、CSS是什么

2022-5-9

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

1、CSS 的 id 选择器与class选择器

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>
        <font color="red">桃李不言</font>    
    </h3>
    <h3>
        <font color="red">下自成蹊</font>    
    </h3>
    <h3>
        <font color="red">作业正在做</font>    
    </h3>
</body>
</html>

这里的是属性

css中书写方式方法：

    <h3 style=" color:#00FF00 ;">桃李不言</h3>
    <h3 style=" color:#00FF00 ;">下自成蹊</h3>
    <h3 style=" color:#00FF00 ;">桃李不言</h3>

区别在于：红色的用的是属性，绿色的用的是CSS样式，称之为行内样式（两个是写在一起的）

2、CSS内部样式

书写方式方法：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>css内部样式</title>
    <style>
        h3{
            color: #00ff00;
        }
    </style>
</head>
<body>
    <h3>桃李不言，下自成蹊</h3>
    <h3>桃李不言，下自成蹊</h3>
    <h3>桃李不言，下自成蹊</h3>
</body>
</html>

以属性加值的方式去写，注意是在 head（头部）中写它的h3 的属性

3、CSS外部样式

首先，外部样式要写在外面（相当于重写一个文件，但是使用时要将两个文件关联起来）

做关联的外部样式，是 .css 的后缀

书写方式方法：

外部样式：

/*外部样式*/
h3 {
    color: #00ff00;
}
关联：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>css内部样式</title>
   <link rel="stylesheet" href="h1.css\03.css">
</head>

<body>
    <h3>桃李不言，下自成蹊</h3>
</body>

</html>

使用 link 关联 href 写关联外部样式的路径

这样就可以直接输出 h3 。

4、CSS标签选择器

在 head（头部）中建立一个style 选择是 p 标签，与上面的样式差不多，使用花括号里面写属性与值

书写的方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p{
            color: #eb1cbe;
            font-size: 80px;
        }
    </style>
</head>
<body>
     <p>桃李不言</p>
     <p>下自成蹊</p>
</body>
</html>

这里的使用了 font-size 修改字体的大小

字体单位选择的是 em ，但是还有很多单位例如：px与rem

px 是像素

em 是相对父元素的字体大小，em是相对单位，没有一个固定的度量值。

rem 是标准的字体大小，根据标准字体大小来调整的。

5、CSS类选择器

类选择器可以被重复使用的

如果说，只想让某行起作用或者某行换一个字体大小、颜色，就可以使用类选择器。

书写方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p{
            color: #eb1cbe;
            font-size: 80px;
        }
        .bzd{
            font-size: 50px;
            color: yellowgreen
        }
    </style>
</head>
<body>
     <p class="bzd">桃李不言</p>
     <p class="bzd">下自成蹊</p>
     <p>++++++++++++此处做明显区分使用++++++++++++</p>
</body>
</html>

自我理解：在 style 里面做了另一个类，这个类（使用 .XXXX）做完以后在body（身体）中，p标签的后面跟上class（类）的名字即可

Q：为什么类选择器起作用了？

A：因为代码从上向下，从左往右执行，它会把上一个覆盖掉。重复的内容会覆盖，如果其中一个因素改变了，两个不相同他就不会变（个人理解）

6、CSSID选择器

在 style 中使用 # 加自己的关键字，使用花括号，里面写属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p {
            color: #eb1cbe;
            font-size: 80px;
        }

        .bzd {
            font-size: 50px;
            color: yellowgreen
        }

        #yrz {
            color: #2bfb;
        }
    </style>
</head>

<body>
    <p class="bzd">桃李不言</p>
    <p class="bzd" id="yrz">下自成蹊</p>
    <p>++++++++++++此处做明显区分使用++++++++++++</p>
</body>

</html>

跟面前笔记中 a 标签锚点（页面导航）差不多

在body（身体）中写 id加关键字就可以使用

注意:id只能唯一的，不能重复，可以为某个元素设置特有的样式

7、CSS后代选择器

使用的是ul无序列表的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ul a{
            text-decoration: line-through;

        }
    </style>
</head>
<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>
</html>

Q：为什么输出的是：

A：因为11 22 33 44 都是写进在了 ul 里面的，注意的是 11 22 在一行是因为他们是行级元素，33 44 是因为他们是包含在 ul 标签里的所有都起作用（个人理解）

8、CSS子选择器

子选择器与后代选择器的区别不大，只是在 ul 后边加了一个大于号

书写：

  ul>a{
            text-decoration: line-through;

        }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ul>a{
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <a href="">00</a>
    <ul>
        <a href="">11</a>
        <a href="">22</a>
        <li><span><a href="">33</a></span></li>
        <li><span><a href="">44</a></span></li>
    </ul>
    <a href="">55</a>
</body>
</html>

输出结果为：

Q：为什么 33 44 不起作用？

A：因为它是子选择器，ul里面有两个a标签，两个li标签，li里面又有一个a标签，对于ul来讲，li是下级那 ul 的间接性下级基于是 a ，a标签相当于是ul的孙子，ul只能影响到下级也就是 ul里面的 a 标签对于li里面的a标签是影响不到的，所以33 44 不起作用

9、CSS直接相邻选择器

使用的是 # 加 two+p 的方式，前面的只是一个定位让你去找相邻的那个单位

书写方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直接相邻选择</title>
    <style>
        #two+p{
            color: yellowgreen;
        }
    </style>
</head>

<body>
    <span>
        <p>第一</p>
        <p id="two">第二</p>
        <p>第三</p>
        <p>第四</p>
        <p>第五</p>
    </span>
</body>
</html>

 background-color: crimson;

这个是背后景色的代码

这里面只有第三会起作用，原因是这个是直接相邻选择器，它会直接选择two相邻的单位，让它起作用，代码的规律，从上往下执行。

10、CSS间接相邻选择器

个人理解：除了自身与自身以上的代码都还起作用。

书写格式就是加了一个波浪线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>间接相邻选择</title>
    <style>
        #two~p{
            color: yellowgreen;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <span>
        <p>第一</p>
        <p id="two">第二</p>
        <p>第三</p>
        <p>第四</p>
        <p>第五</p>
    </span>
</body>
</html>

11、CSS属性选择器选择器

属性选择器：对某一个标签进行修改 \ 操作就是通过某一个属性找到的，但是属性是借助标签找的，如果不写标签的话就找不到，但是如果不加标签，只要是这个属性，我就全部起作用。

书写格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        input[type=text]{
            width: 300px;
            height: 200px;
            border-width: 30px;
            border-radius: 15%;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号">
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>
</html>

12、CSS公共选择器

与上面的属性选择器差不多

就是使用一个选择器，实现所有标签的样式

只需要定好一个公共样式，可以让别的标签按照公共样式去显示。

书写方式方法：、

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公共选择器</title>
    <style>
        [type=text],
        [type=password] {
            width: 300px;
            height: 200px;
        }

        [type=text] {
            border: 30px solid #d7d402;
        }

        [type=password] {
            border: 30px solid #6202d7;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" value="" placeholder="请输入账号">
    <input type="password" name="" id="" value="" placeholder="请输入密码">
</body>

</html>

这里的输出结果是：

因为他们两个 text 与 passwor 共同使用一个公共的选择器，所以表格的大小一致

但是又分开使用了自己的选择器，导致各自有各自边框的颜色

13、CSS通配符选择器

全局设置，不管在哪个标签里，颜色全部都更改为我设置的这个颜色也可以设置字体大小，简而言之，一个代码改全部

书写方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            color: violet;
            background-color: rgba(86, 84, 84, 0.438);
            font-size: 80px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">超链接</a>
        </li>
    </ul>
    <p>桃李不言</p>
    <span>下自成蹊</span>
</body>
</html>

14、CSS伪类选择器

Q：是什么伪类选择器？

A：伪类选择器用于定义元素的特殊状态。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a {
            text-decoration: none;
            font-size: 66px;
        }

        /*未访问时的颜色*/
        a:link {
            color: yellowgreen;
        }

        /*以访问的颜色*/
        a:visited {
            color: tomato;
        }

        /*鼠标悬停链接*/
        a:hover {
            color: rgb(2, 2, 2);
        }

        /*已选择链接*/
        a:active {
            color: rgb(43, 0, 201);
        }

         /*鼠标经过图片以后会方大*/
        img:hover {
            width: 600px;
            /*鼠标经过图片变成小手*/
            cursor: pointer;
            /*阴影的颜色*/
            box-shadow:30px 30px 50px 50px gold;
        }
    </style>
</head>

<body>
    <a href="http://www.deskcity.org/download/172019-0-1680x1050.html">我是EVA</a>
    <img src="h1.css\QQ截图20220509093128.png" width="300px" title="我是图片">
    <a href="http://www.deskcity.org/download/172019-0-1680x1050.html">我是B站官网</a>
</body>

</html>

就是标记某种状态，没有访问过是一个颜色，访问之后是一个颜色，鼠标悬停一个颜色，点击链接一个颜色

鼠标悬停各种样式：

鼠标悬浮样式这里我们要用cursor属性 cursor属性规定要显示的光标的类型(形状)。

1、default默认光标(通常是一个箭头)
2、auto 默认。浏览器设置的光标。
3、crosshair光标呈现为十字线。
4、pointer光标呈现为指示链接的指针(-只手)
5、move此光标指示某对象可被移动。
6、e-resize此光标指示矩形框的边缘可被向右(东)移动。
7、ne-resize此光标指示矩形框的边缘可被向上及向右移动(北东)。
8、nw-resize此光标指示矩形框的边缘可被向上及向左移动(北西)。
9、n-resize 此光标指示矩形框的边缘可被向上(北)移动。
10、se-resize此光标指示矩形框的边缘可被向下及向右移动(南东).
11、sw-resize此光标指示矩形框的边缘可被向下及向左移动(南西)。
12、s-resize此光标指示矩形框的边缘可被向下移动(北西)。
13、w-resize此光标指示矩形框的边缘可被向左移动(西)。
14、text 此光标指示文本。
15、wait 此光标指示程序正忙(通常是一只表或沙漏)。
16、help此光标指示可用的帮助(通常是一个问号或-个气球)。

15、CSS伪对象选择器

伪对象选择器：

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。伪类和伪对象(元素)的区别

伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性;

伪元素表示DOM外部的某种文档结构

常用伪元素： 1.E:before/E: : before

2.E:after/E: :after

伪元素是在元素内容的前面或后面定义的，必须要添加content:""这个属性，不然伪元素无法定义成功。

p: :after{ content:"在P标签元素内容前加了内容"; color: red;}

书写方式方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪对象选择器</title>
    <style>   
            ul>li{
                list-style:none;
            }  
            input:checked+span{
                background-color: #00ff00;
            }  
    </style>
</head>
<body>
    <form action="" method="post">
        <fieldset>
            <legend>我也不知道该写啥</legend>
            <ul>
                <li><label><input type="radio" name="colour-group" value="0"><span>蓝色</span></label></li>
                <li><label><input type="radio" name="colour-group" value="0"><span>红色</span></label></li>
                <li><label><input type="radio" name="colour-group" value="0"><span>绿色</span></label></li>
            </ul>
        </fieldset>
    </form>
    
</body>
</html>

写了content：

    <style>   
            ul>li{
                list-style:none;
            }  
            input:checked+span{
                background-color: #00ff00;
            }  
            input:checked+span::after{
                background-color: blue;
                content:"为对象选择器";
            }

    </style>

就会变成点击设计的按钮后，会在后面出现 content 里面的内容

例如我这里写的输出后的样子：

背景色是给了content 内容的。

想让它在前面的话就把 after 改为 before

在这里→

改为→

输出结果：

薄荷猫阿茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

二、CSS是什么2022-5-9 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一个 1、CSS 的 id 选择器与class选择器实例：<!DOCTYPE html>&l
复制链接

扫一扫