Guff_9hys

这个屌丝很懒，什么也没留下！

热门标签

【CSS】CSS选择器汇总_css 选择器关系加类名

作者：Guff_9hys | 2024-07-07 15:21:45

踩

css 选择器关系加类名

前言：

CSS用于美化网页，布局页面，想用CSS首先就得先定位到想要美化的html标签，这时候就需要CSS选择器来精确定位到具体标签。

CSS基本格式：


选择器{
    样式1：具体值；
    样式2：具体值；
    ……
}

标签选择器：

直接拿标签放在选择器的位置，这样会选择全部改标签，无法具体指定某特定标签，常用于全局布局。


标签名{
    样式1：具体值；
    样式2：具体值；
}

例：

类选择器：

'.'加上类名放在选择器位置，可以给指定类名的标签进行CSS操作。


.类名{
    样式1:具体值;
    样式2:具体值;
}

例:

我类名随便取的，你们千万不要学，类名一定要见名知意。

ID选择器:

'#'加上id名，可以非常精确的指定某标签，但是id名尽量唯一，因为id名就相当于我们的身份证号，id名不唯一了就跟类名没什么区别了。


#id名{
    样式1:具体值;
    样式2:具体值;
}

例：

后代选择器（包含选择器）：

标签中常含嵌套关系，后代选择器很常用。


父类 子类{
    样式1:具体值;
    样式2:具体值;
}

例：

并集选择器:

可以同时选择多种。


选择器1，
选择器2{
    样式1:具体值;
    样式2:具体值;
}

例：

伪类选择器：

标签：触发条件。常用于链接和鼠标经过的动画。

标签:hover 鼠标位于标签上方时触发.

标签:active 鼠标按下未弹起时触发.

当标签是链接（<a>）时多两个触发条件:

a:link 所有未访问过的链接

a:visited 所有已访问过的链接

例:

由于涉及到动态效果，可以自己去试着敲一下代码看看效果。

CSS3新增选择器：

属性选择器：

根据属性来选择标签。


标签[属性]{
    样式1:具体值;
    样式2:具体值;
}

其中"属性"可以是具体值,即只有属性完全相等时才会选中.也可以选择属性值以某值开头、结尾，或者属性值含某值即可。

例：

属性值相等：a[title="1"]

以某值开头：a[title^="1"]

以某值结尾：a[title$="1"]

包含某值：a[title*="1"]

例:

结构伪类选择器:

可以具体选择标签的第n个子标签.


标签::nth-child(n){
    样式1:具体值;
    样式2:具体值;
}

其中n可以为具体数值,表示选取第n个子标签.

标签内的子标签默认排序号,从上往下从1号开始.

n为'even'表示选取序号为偶数的子标签,n为'odd'表示选取序号为奇数的子标签.

n也可以为含n的式子,n为序号(从0到子标签个数)

例:

伪元素选择器:

通过CSS创建标签.


标签::before/after{
    content:""
    样式1:具体值;
    样式2:具体值;
}

"before"时在标签内部的前面创建标签.

"after"时在标签内部的后面创建标签.

"content"必须要有,哪怕你标签不要内容也放个空字符串上去.

例:

小结:

多种选择器可以混用,混用时要注意选择器的先后顺序,即权重.

权重相同时，标签样式采用就近原则。

选择器混用时权重叠加，但是不能跨级加权重。

例如十二个类选择器混用，权重为0 0 12 0，权重仍然不敌一个id选择器，但是权重大于十个类选择器。

选择器	权重
继承或者*	0000
元素、标签选择器	0001
类、伪类选择器	0010
id选择器	0100
行内样式	1000
！import	∞(无穷大)

好吧，到结尾了才发现我又漏掉了一些。

继承：

用选择器给标签修改样式时，子类会继承父类的样式，但这个权重很低，随便哪个选择器修改一下子类的样式就改掉了。

*：

通配符，表示选择全部标签，跟继承一样权重很低，一般都用于全局布局。

行内样式：

一般CSS写在html的<head>标签或者单独开个.CSS文件再导入,但也可以直接写在标签内部.

<p style="font_size: 10px">这是一段话</p>

!import:

直接加在样式结尾,权重无穷大,表示非常重要,该样式必执行。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/796083