CSS前端入门（第二天）选择器

最新推荐文章于 2024-09-04 16:55:55 发布

不想上班只想要钱

最新推荐文章于 2024-09-04 16:55:55 发布

阅读量427

点赞数

分类专栏： css html 前端文章标签：前端 css html

本文链接：https://blog.csdn.net/Aa12364567/article/details/126153334

版权

前端同时被 3 个专栏收录

179 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

后代选择器

元素1 元素2 {样式说明}

子选择器

子选择器（子元素选择器）只能选作为某元素的最近一级子元素，简单理解就是选亲儿子元素
元素1>元素2 {样式说明}

元素1和元素2中间用大于号
元素1是父级，元素2是子级，最终选择是元素2
元素2必须是亲儿子

<!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>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

在这里插入图片描述

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都看作为并集选择器的一部分。
元素1 ，元素2 {样式说明}
上述语法表示元素1和元素2

<!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>
        /* 要求1：把熊大熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */
        /* 要求2：请把熊大和熊二改为粉色，还有小猪佩奇一家也改为粉色 */
        
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

要求1效果

在这里插入图片描述

要求2效果

在这里插入图片描述

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。

a:link /* 选择所有未被访问的链接*/
a:visited /* 选择所有已被访问的链接*/
a:hover /* 选择鼠标指针位于其上的链接*/
a:active /* 选择活动链接（鼠标按下未弹起的链接）*/

<!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>
        /* 1.未访问的链接 a:link  把没有点击过的（访问过的）链接选出来*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 2. a:visited 把点击过的（访问过的）链接选出来*/
        
        a:visited {
            color: orange;
        }
        /* 3. a:hover选择鼠标经过的那个链接 */
        
        a:hover {
            color: skyblue;
        }
        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接*/
        
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>
</html>

链接伪类选择器注意事项

1.为了确保生效，请按照LVHA的顺序声明:link-:visited-:hover-:active
2. 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

focus伪类选择器

focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

<!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>focus伪类选择器</title>
    <style>
        /* 把获得光标的input表单元素选取出来 */
        
        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

在这里插入图片描述

显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己独占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型。

块元素

块级元素的特点：

比较霸道，自己独占一行
高度、宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块元素

注意

文字类的元素内不能使用块级元素
<p>标签主要用于存放文字，因此<p>里面不能方块级元素，特别是不能放<div>
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素（内联元素）

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是它本身内容的宽度
行内元素只能容纳文本或者其他行内元素
注意：

链接里面不能再放链接
-特殊情况链接<a>里面可以放块级元素，但是给<a> 转换一下块级模式最安全

行内块元素

<img/>、<input/>、<td>,他们同时具有块元素和行内元素的特点
行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度、行高、外边距以及内边距都可以控制（块级元素特点）

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围

<!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>
        /*转换为块元素*/
        
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            display: block;
        }
        /* 转换为行内元素 */
        
        div {
            /* 转换后宽高不起作用 */
            width: 300px;
            height: 100px;
            background-color: purple;
            display: inline;
        }
        /* 转换为行内块元素 */
        
        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <div>块级元素1</div>
    <div>块级元素2</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>

在这里插入图片描述

小米左侧导航栏仿写

<!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>
        /*1. a链接转换为块元素*/
        
        a {
            width: 230px;
            height: 40px;
            background-color: #55585a;
            display: block;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;
        }
        /* 2. 鼠标经过链接变换背景色 */
        
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>