CSS--选择器

最新推荐文章于 2022-09-20 22:15:52 发布

jiaody111

最新推荐文章于 2022-09-20 22:15:52 发布

阅读量115

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42139212/article/details/100554347

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

元素选择器

选中的是当前界面中所有的标签而不能单独选中某一个标签

标签名称{
    属性:值;
}

id选择器

id 名的规范：只能由数字/字母/下划线组成而且不能以数字开头

#id名称{
    属性:值;
}

类选择器

每个标签可以同时绑定多个类名

格式:
<标签名称 class="类名1 类名2 ...">

后代选择器

找到指定标签的所有特定的后代标签，设置属性

<!--
格式:
标签名称1 标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签并设置属性
注意点:
1.必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器（id选择器，类选择器等）
4.后代选择器可以通过空格一直延续下去
-->

子元素选择器

找到指定标签中所有特定的直接子元素

<!--
格式:
标签名称1>标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器（id选择器，类选择器等）
4.子元素选择器可以通过>符号一直延续下去
-->

后代选择器vs子元素选择器

<!--
1.后代选择器和子元素选择器之间的区别：
1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点：
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}


-->

并集选择器

给所有选中的标签设置样式，多个选择器之间，用逗号隔开。

格式:
选择器1,选择器2{
    属性:值;
}

兄弟选择器

1.相邻兄弟选择器：给指定选择器后面紧跟的那个选择器选中的标签设置属性
通过+连接，只能选中紧跟其后的那个标签, 不能选中被隔开的标签
格式:
选择器1+选择器2{
    属性:值;
}
2.通用兄弟选择器：给指定选择器后面的所有选择器选中的所有标签设置属性
用~连接，选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
选择器1~选择器2{
    属性:值;
}

通配符选择器

给当前界面上所有的标签设置属性

*{
    属性:值;
}

属性选择器

根据指定的属性名找到对应的标签

<!--
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性

[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type='password']{}
<input type="text" name="" id="">
<input type="password" name="" id="">

1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

2.属性的取值是以什么结尾的
[attribute$=value] CSS3

3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
-->

序选择器

<!--
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type  选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增
-->

伪类选择器和伪元素的区别：

参考博客

伪类选择器

伪类用来表示元素的一种特殊的状态：
比如：访问过的超链接，未访问过的超链接，获取焦点的文本框等。（浏览器通过历史纪录判断一个链接是否访问过）
当需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
：hover和：active可以为除了超链接以外的元素设置

超链接的伪类选择器

:link 未被访问
:visited 访问后（visited只能设置颜色）
:hover 鼠标悬停在a标签上
:active 鼠标长按

a标签的伪类选择器可以单独出现也可以一起出现。一起出现时，必须遵守以下顺序：
link ----> visited ----> hover ----> active(love hate)

        a:link{
            color: tomato;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: orange;
        }
        a:active{
            color: pink;
        }

如果未访问和访问后的样式相同，可以缩写成以下形式：

        a{
            color: green;  // 简写格式
        }
        /*a:link{
            color: green;
        }
        a:visited{
            color: green;
        }*/
        a:hover{
            color: orange;
        }
        a:active{
            color: pink;
        }

注：对于超链接a
display/width/height/padding/margin属性一般写在标签选择器中
color/background-color等文字属性一般写在伪类选择器中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        ul{
            margin:100px auto;
            height: 40px;
            width: 960px;
            list-style: none;
        }
        ul li{
            height: 40px;
            line-height: 40px;
            width: 120px;
            text-align: center;
            float: left;
        }
        ul li a{
            display: inline-block;
            width: 120px;
            height: 40px;
            text-decoration: none;
        }
        ul li a:link{
            background-color: rosybrown;
            color: #cccccc;
        }
        ul li a:hover{
            background-color: #cccccc;
            color: red;
        }
        ul li a:active{
            color: yellow;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
    <li><a href="#">我是导航</a></li>
</ul>
</body>
</html>

伪元素选择器

给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素

标签名称::before{
    属性名称:值;
}
给指定标签的内容前面添加一个子元素

标签名称::after{
     content: "...."; /*指定添加的子元素中的内容*/
     width: 50px; /*指定添加的子元素的宽度和高度*/
     /*height: 50px;*/
     height:0; /*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/
     background-color: pink;
     display: block; /*指定添加的子元素的显示模式*/
     visibility: hidden;/* 隐藏添加的子元素*/
}

jiaody111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS--选择器

元素选择器选中的是当前界面中所有的标签而不能单独选中某一个标签标签名称{ 属性:值;}id选择器id 名的规范：只能由数字/字母/下划线组成而且不能以数字开头#id名称{ 属性:值;}类选择器每个标签可以同时绑定多个类名格式:<标签名称 class="类名1 类名2 ...">后代选择器找到指定标签的所有特定的后代标签，设置属性&...
复制链接

扫一扫