【前端学习第八天：css选择器进阶34种】

最新推荐文章于 2024-05-31 23:54:51 发布

NEWYORK4

最新推荐文章于 2024-05-31 23:54:51 发布

阅读量284

点赞数 4

文章标签：前端 css 学习

本文链接：https://blog.csdn.net/a2237464569/article/details/126048297

版权

css选择器进阶篇

今天是前端学习第八天，昨天为大家带来了css基础样式的引入，今天我们将样式学习更深入，引入更多的34种选择器。
首先，我们还是从头开始，复习一下昨天的基础选择器。

一.4种基础选择器

*通配符选择器选择所有元素，对所有元素进行样式控制。一般写入
m0+p0 box-sizing:border-box
标签选择器选择特定的标签，一般前面会带有其他完整选择器
类名选择器选择拥有类名的标签区分页面模块最常用的选择器
id 选择器选择拥有id并且值匹配的标签，多用于js元素交互

二.5种符号选择器

1.逗号选择器满足逗号左边或者逗号右边都算
ul,ol,li{
list-style:none
}
2.空格选择器满足嵌套关系空格后面是空格前面的子孙元素
.container .nav
3.大于号选择器满足嵌套关系大于号后面是空格前面的直接子元素
.container>div
4.加号选择器选择满足并列关系加号后面元素紧邻加号前面
.container .item+.item
不选第一个item
5.~波浪号满足并列关系波浪号后面满足条件元素

三.6种属性选择器

1.[属性名]{} 拥有属性名的标签
2.[属性名=值]{} 拥有属性名并且值匹配的标签
3.[属性名^=值]{} 拥有属性名并且值以val开头
4.[属性名$=val]{} 拥有属性名并值以val结尾
5.[属性名*=val]{} 拥有属性名并且值包含val内容
6.[属性名~=val]{} 拥有属性名并且值其中一个等于val

四.7种伪类选择器

：link 超级链接普通状态(未访问)—默认蓝色
：visited 超级链接访问过状态—默认紫色
：hover 任何标签鼠标划入
a:hover{
color:red
}
：active 任何标签鼠标按下后显示的样式
: focus 聚焦选取获得焦点元素，控制元素内样式
：disable 禁用-各种灰色的样式
：checked 默认选中
input：checked+label,一般用于input标签。

五.12种特殊选择器

：first-child
作为父标签的第一个子标签
：last-child
作为父标签的最后一个子标签
:nth-child(n)
作为父标签第n个子元素
:nth-last-child(n)
作为父元素的倒数第n个子元素
:only-child
只有自己这个一个子元素

只考虑当前类型
：first-of-type 当前类型第一个
：last-of-type 当前类型最后一个
：nth-of-type(n) 当前类型第n个
：nth-last-of- type(n) 当前类型倒数第n个
：only-of-type 当前类型唯一一个

even 偶数写法
odd 奇数写法

：not() 否定满足前面但不满足后面
：empty 空
选择内容为空的标签

六.案例

1.代码示例

    *{
            margin: 0;
            padding: 0;
        }
p{
    font-size: 50px;
}
.container{
    background-color: lightblue;
    height: 100px;
    width: 1200px;
}
#p1{
    font-size: 16px;
}
ul,li{
    list-style: none;
}
.item .p0{
    border: 1px solid red;
}
.container>div{
    display: inline-block;
}
ul li+li{
    color: red;
}
[class="val"]{
    background-color: green;

}
[class^="val"]{
    color: blue;
}
[class$="val"]{
    color: yellow;
}
[class*="val"]{
    border: 2px solid goldenrod;
}
input:checked{
    color: brown;
}
a:link{
    color: blue;
}
a:visited{
color: purple;
}
a:hover{
    color: orange;
}
span:active{
font-size: 50px;
}

    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <a href="">
                <img src="" alt="">
                <p class="p0">112</p>
                <p id="p1">id选择器</p>
                <p class="123val">属性选择器</p>
                <p class="val123">属性选择器</p>
                <a href="">超级链接</a>
                <span>span1</span>
            </a>
        </div>
        <div>
            <ul>
                <li>444</li>
                <li>555</li>
                <li>666</li>
            </ul>
        </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <from>
        <input type="text"><span>默认选中</span>
    </from>
    <div class="container-2">
        <h2>2222</h2>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>
            <div>5</div>
        </div>
    </div>
</body>
</html>