CSS选择器

最新推荐文章于 2024-01-30 16:20:57 发布

橧易灬

最新推荐文章于 2024-01-30 16:20:57 发布

阅读量271

点赞数

分类专栏： HTML笔记文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_56667794/article/details/122077256

版权

HTML笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

选择器

一.选择器
二.css层叠性

一.选择器

为了在css和HTML文件的关联过程中,实现一对一,一对多或者多对一的控制,这就需要使用选择器

1.基本选择器

1-1.类型选择器(标签选择器)

以文本对象HTML中的标签为选择符.

1-2.Class选择器(类选择器)权重为10

给某个标签命名,使其能与其他同类标签区分
或者给某些标签统一命名赋予相同修饰
用法:在HTML中<标签 class=“命名”>
在css中 .命名{修饰内容}

1-3.ID选择器权重为100

用法:在HTML中<标签 id=“命名”>
在css中 #命名{修饰内容}

1-4.通配符权重为0

在想让所有标签都改变样式的时候
用法:在css中 *{修饰内容}

1-5.群组选择器无权重之说,

内部元素权重只看其对应选择器自己的权重.
想让几个元素同时改变样式时使用.
选择器之间用逗号隔开
用法:选择器1,选择器2,选择器3{修饰内容}

2.层次选择器权重为{}前所包含所有元素选择器权重的和

其权重为{}前所包含所有元素选择器权重的和;

2-1.后代选择器(包含选择器)

改变父元素下所有子元素的样式
用法父元素子元素{}

2-2.子选择器

改变父元素下所有子元素样式
用法:父元素>子元素{}

2-3.相邻兄弟选择器

改变某个元素后面紧挨着的某类元素(实际上是只选择紧邻的那一个,然后将第二个同类看做某某1,一直继续下去)
用法:某某1+某某2{}

2-4.通用兄弟选择器

改变某个元素后面所有的某类元素
用法:某某1~某某2{}

3.伪类选择器(权重是10)

3-1.动态伪类选择器

a:link {color: red;} /* 未访问的链接状态,必须给a /
a:visited {color: green;} / 已访问的链接状态,必须给a /
a:hover {color: blue;} / 鼠标滑过链接状态,可以随便给 /
a:active {color: yellow;} / 鼠标按下去时的状态,必须给a */

说明：
1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：
a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2）为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同，只有鼠标划过变化颜色

3-2.结构伪类选择器

child类

3-2-1.E:fisrt-child

作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

3-2-2.E:last-child

作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

3-2-3.E F:nth-child(n)

选择父元素E的第n个子元素F。
如果E里第n个不是F元素则不变.
:nth-child(length)、:nth-child(n)、:nth-child(nlength)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(nlength+1)

3-2-4.:nth-last-child()

选择某个元素的倒数的一个或多个特定的子元素.用法同:nth-child(n)

3-2-5.:only-child

可以在选择的元素是它的父元素的唯一一个子元素时使用.

of-type类

3-2-6.E::first-of-type

选择一个上级元素下的所有第一个同类子元素

3-2-7.E:last-of-type

选择一个上级元素的所有最后一个同类子元素

3-2-8.E F:nth-of-type()

选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。

3-2-9.:nth-last-of-type()

选择指定的元素，从元素的最后一个开始计算

3-2-10.:only-of-type

选择一个元素是它的上级元素的唯一一个相同类型的子元素

3-2-11.:empty

选择的元素里面没有任何内容

3-2-12.:root

选择文档的根元素

3-3.UI状态伪类选择器

input:enabled{ 可用状态下的样式}
input:disabled{ 禁用状态下的样式}
input:checked{ 选中状态下的样式}

3-4.否定伪类选择器

:not() 除了什么什么可以让你定位不匹配该选择器的元素

3-4.目标伪类选择器

:target 选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

4.属性选择器(对于置换元素很好用)权重为10

4-1.元素名:[属性]

选择所有具有方括号内属性的某组元素,不论属性值是多少

img[scr]{width:100%}

4-2.元素名[属性=“属性值”]

选择有方括号内属性且属性值一模一样的某组元素,属性值必须一模一样,多个空格都不行

4-3.元素名[属性$=“属性值”]

选择有方括号内属性且属性值是以等号后属性值为结尾的元素

5.伪对象选择器(伪元素选择器)权重为1.

5-1.after定义在盒子内容后的内容

用法:

c1语法:
div:after{content:"文字内容";
}
div:after{content:url(图片地址);
}
c3语法:
div::after{content:"文字内容";
}
div::after{content:url(图片地址);
}

5-2.before定义在盒子内容前面的内容

c1语法:
div:before{content:"文字内容";
}
div:before{content:url(图片地址);
}
c3语法:
div::before{content:"文字内容";
}
div::before{content:url(图片地址);
}

5-3.first-line对盒子第一行内容进行修饰

注意:该选择器只能对块元素使用

c3语法:
div::first-line{}
c1语法:
div:first-line{}

5-4.first-letter对盒子第一个字进行修饰

注意 :该选择器只能对块元素使用

c3语法:
div::first-letter{}
c1语法:
div:first-letter{}

5-5.selection对盒子内容被选中时的背景和字体颜色进行修饰

注意该选择器只有c3用法.

c3语法:
div::selection{}

5-6.案例:

<!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>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
    }
    .wai::after{
        content: "我";
        color: aqua;
    }
    .wai,.wai2,.wai3{
        width: 300px;
        height: 300px;
        background: lightblue;
        margin-top: 100px;
        margin-left: 100px;
        
    }
    .wai::before{
        content: "我";
        color: rgb(40, 22, 207);
    }
    .wai2::first-line
    {
font-size: 25px;
color: blueviolet;
    }
 .wai2::first-letter{
font-size: 50px;
color: coral;
 }
    
.wai3::selection{
color: darkgray;
background-color: forestgreen;
}
</style>
<body>
<div class="wai">四大四</div>
<div class="wai2">
    互换互动方双丧服当复苏扥扥独当复苏扥上冻扶桑扥尚东申东富USD付东方
</div>
<div class="wai3">
    互换动方双丧服当复苏扥扥独当复苏扥上冻扶桑扥尚
</div>
</body>
</html>