Css基础学习——选择器

最新推荐文章于 2022-10-01 11:19:22 发布

是行是行啊

最新推荐文章于 2022-10-01 11:19:22 发布

阅读量102

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/weixin_45655555/article/details/107527825

版权

Css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Css基础学习

1. 选择器

1.1 简单选择器

ID选择器
元素选择器
类选择器
通配符选择器（*，选中所有元素）
属性选择器
根据属性名和属性值选中元素

/* 选中所有具有href属性的元素 */
[href]{
    color:red;
} 

 [href="https://www.sina.com"]{
    color:red;
}

伪类选择器

选中某些元素的某种状态
① a标签的
1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

/* 选中鼠标悬停时的a元素 */
a:hover{
    color:red;
}

“结构伪类选择器”

②、 first-child（在一组兄弟元素中的第一个元素）

③、 first-of-type（在一组兄弟元素中其类型的第一个元素）

④、 nth-child（选中指定的第几个元素）

⑤、 last-child

⑥、 nth-child( )
（n，2n，5n，n+5=从第5个开始（包含第5个）到最后，-n+5=前5个（包含第5个），）

⑦、 focus（元素聚焦时的样式）

⑧、 checked（单选或多选框被选中的样式）

⑨、disabled（按钮禁用
在这里插入图片描述

<!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>

        .item{
            height: 40px;
            margin: 30px 0;
            width: 200px;
            
        }

        .boy{
            border-bottom: 1px solid #ccc;
        }

         .checked{
            width: 14px;
            height: 14px;
            border-radius: 2px;
            border: 1px solid #ccc;
            display: inline-block;
        }

        .item input:checked+.checked::after{
            content: " ";
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 2px;
            background: #008c8c;
            margin: 2px;
        }

        .item input:checked+.checked{
            border: 1px solid #008c8c;
        }

    </style>
</head>
<body>
    <div class="item boy">
        <label >
            <input type="radio">
            <span class="checked"></span>
            <span> 男</span>
        </label>
    </div>
    <div class="item girl">
        <label >
            <input type="radio">
            <span class="checked"></span>
            <span>女</span>
        </label>
    </div>
</body>
</html>

伪元素选择器

① ::before （创建一个伪元素，其将成为匹配选中的元素的第一个子元素 / 在元素内部的前面插入内容）

② ::after（创建一个伪元素，其将成为匹配选中的元素的最后一个子元素 / 在元素内部的后面插入内容）

<style>
span::before {
    content: "《";
    color: red;
}

span::after {
    content: "》";
    color: red;
} 
</style>
 <p>
        <span>HTML和CSS</span>课程真的是不错呀！
    </p>

注意：

before 和 after 必须有 content 属性（没内容的时候你就写空内容就好。content：“ ”）
before 和 after 创建一个元素，但属于行内元素（所以我们写代码的时候一般都会写上 display：block）

③ first-letter（选中元素的第一个字母）

④ first-line （选中元素中第一行的文字）

⑤ selection （选中被用户框选的文字，你可以更改样式）

⑥ ::placeholder（文本框的提示文字样式设置）

1.2 选择器的组合

并且

中间不要加空格的
p.red {
    color: red;
}

后代元素 —— 空格（最常使用的那个）
子元素 —— >

孙子就不包括了，但是你可以div>ul>li

相邻兄弟元素 —— +
后面出现的所有兄弟元素 —— ~

1.3 选择器的并列

多个选择器, 用逗号分隔

语法糖

2. 层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

2.1 比较重要性

重要性从高到底：

作者样式表：开发者书写的样式

1）作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式

2.2 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数（x x x x）

千位：如果是内联样式，记1，否则记0
百位：等于选择器中所有id选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

2.3 比较源次序

代码书写靠后的胜出

应用

重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 -> 浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css
（）
2. 爱恨法则

link > visited > hover > active

3. 继承

子元素会继承父元素的某些CSS属性

通常，跟文字内容相关的属性都能被继承

可以去查看元素是否有继承性不用记。元素+MDN 进行搜索

4. 属性值的计算过程

属性值的计算过程： 一个元素，从所有属性都没有值，到所有的属性都有值

一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行

渲染每个元素的前提条件：该元素的所有CSS属性必须有值

步骤：

1. 确定声明值

参考样式表中没有冲突的声明，作为CSS属性值

2. 层叠冲突

对样式表有冲突的声明使用层叠规则，确定CSS属性值

3. 使用继承

对仍然没有值的属性，若可以继承，则继承父元素的值

4. 使用默认值

对仍然没有值得属性，使用默认值

在这里插入图片描述

特殊的两个CSS取值：

inherit：手动（强制）继承，将父元素的值取出应用到该元素
initial：初始值，将该属性设置为默认值

是行是行啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css基础学习——选择器

Css基础学习1. 选择器1.1 简单选择器ID选择器元素选择器类选择器通配符选择器（*，选中所有元素）属性选择器根据属性名和属性值选中元素/* 选中所有具有href属性的元素 */[href]{ color:red;} [href="https://www.sina.com"]{ color:red;}伪类选择器选中某些元素的某种状态1）link: 超链接未访问时的状态2）visited: 超链接访问过后的状态3）hover: 鼠标悬
复制链接

扫一扫