HTML---css选择器

lihan_freak

已于 2024-08-05 14:13:37 修改

阅读量1.1w

点赞数 21

文章标签： html css 前端

于 2024-08-05 12:19:36 首次发布

本文链接：https://blog.csdn.net/jlihan/article/details/140921718

版权

CSS 指层叠样式表，是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

使用 CSS 我们可以大大提升网页开发的工作效率！

插入样式表的方法有三种:

外部样式(External style sheet)
内部样式(Internal style sheet)
内联样式(Inline style)

内联样式（行内样式）

<div style="color: red;background: blue;">hello</div>

样式直接写入到本元素标签中

内部样式

    <style>
        div {
            color: pink;
            background: white;
        }
    </style>

单独设置style内样式

外部样式

使用 <link> 标签链接到样式表。

<link rel="stylesheet" href="css/css选择器.css">

浏览器会从文件css选择器.css中读取样式，并格式文档

css文件中的写法：

选择器{

属性:值;

属性1:值1;

}

如果你想在HTML元素中设置CSS样式，你需要在设置选择器。分为三大类，基本选择器，伪元素选择器，伪类选择器。

一、基本选择器

1、元素选择器用元素名称做选择

特例：选择所有元素

* {
    color: pink;
    background: green;
}

选择div标签

div{
    color: pink;
    background: green;
}

选择p标签

p{
    color: pink;
    background: green;
}

......

2、属性选择器

div[id] 有id属性的div元素

div[id]{
    color: pink;
    background: green;
}

div[id=xx] 有id属性，且id属性值为xx的div元素

div[id=xx]{
    color: pink;
    background: green;
}

div[id*=xx] 有id属性，且id属性值包含xx的div元素

div[id*=xx]{
    color: pink;
    background: green;
}

div[id^=xx] 有id属性，且id属性值以xx开头的div元素

div[id^=xx]{
    color: pink;
    background: green;
}

div[id$=xx] 有id属性，且id属性值以xx结尾的div元素

div[id$=xx]{
    color: pink;
    background: green;
}

3、id选择器

#+id值

#xx {
    color: pink;
    background: green;
}

4、class选择器

.xx {
    color: pink;
    background: green;
}

特例：结合选择器

既要是p标签的还要是id为class

p.xx {
    color: pink;
    background: green;
}

5、包含选择器 selector1 selector2

div下的所有p标签，包括所有后类

div p {

    color: pink;

    background: green;

}

6、子选择器 selector1>selector2

强调父子，div是p标签的父类

div>p {
    color: pink;
    background: green;
}

7、兄弟选择器 selector1~selector2

选择class值为cc之后所有class值为aa的

.cc~.aa {
    color: pink;
    background: green;
}

选择class值为cc之后所有的

.cc~* {
    color: pink;
    background: green;
}

8、选择器组合 selector1,selector2,selector3..

选择p标签和div标签内的a标签还有span标签，标签和标签之间用","隔开

p,
div a,
span {
    color: pink;
    background: green;
}

二、伪元素选择器

1、首字母 ::first-letter 只能用于块级元素

使div内文本值第一个值接收样式

div::first-letter {
    color: pink;
    font-size: 20px;
    background: green;
}

2、首行 ::first-line 只能用于块级元素

使div标签第一行接收样式

div {
    /* 使单词裂开，如果一串字母中没有" "或"-"隔开默认为一个单词 */
    word-break: break-all;
}

div::first-line {
    color: pink;
    font-size: 20px;
    background: green;
}

3、在前边插入 ::before

在div标签的值前面加入aaa并赋予样式

div::before {
    content: "aaa";
    color: pink;
    font-size: 20px;
    background: green;
}

4、在后边插入 ::after

在div标签的值后边加入aaa并赋予样式

div::after {
    content: "aaa";
    color: pink;
    font-size: 20px;
    background: green;
}

三、伪类选择器

1、结构性伪类选择器

:nth-child()

括号里面可以是数字n n从1开始

可以是英文单词 odd奇数 even偶数

括号里可以是表达式 5n+2 n从1开始

找第一个 :nth-child(1) = :first-child

找最后一个 :last-child = :nth-last-child(1)

倒着数 :nth-last-child()

只认数字，如果类型刚好符合，则被选中

:nth-of-type()

括号里面可以是数字n n从1开始

可以是英文单词 odd奇数 even偶数

括号里可以是表达式 5n+2 n从1开始

找第一个 :nth-of-type(1) = :first-of-type

找最后一个 :last-of-type = :nth-last-of-type(1)

倒着数 :nth-last-of-type()

既认数字也认类型，找同类型下的第n个元素

找ul标签下li标签从后往前数，第一个并赋予样式

ul li:nth-of-type(1) {
    color: pink;
    background: green;
}

2、ui状态伪类选择器

:hover鼠标悬停状态

:focus焦点状态

:checked选中状态

<input type="text" value="输入框">
<input type="checkbox" >

input:hover {
    color: pink;
    background: green;
}
input:focus {
    color: rgb(15, 35, 217);
    background: rgb(129, 214, 129);
}

/* box-shadow: 水平偏移量 垂直偏移量 模糊度 颜色   加阴影 */
input:checked {
    box-shadow: 5px 5px 5px red;
}

效果演示：

QQ录屏20240805121136

3、其他伪类选择器

选择ul标签内li标签中除去calss为java和class为php的所有剩余元素并赋值

/* :not() 过滤掉某些元素 */

ul li:not(.java):not(.php) {
    color: pink;
    background: green;
}

选择器的优先规则

1、选择器写的越长（越准确），优先级越高

2、优先级高低 id选择器>class选择器>元素选择器

3、同级别长度下，css代码按照顺序执行，后边的效果会把前边的覆盖掉

4、终极规则：以上规则使用大部分场景，特殊场景不适用自行测试