css选择器

最新推荐文章于 2024-10-01 23:20:42 发布

sjsyg

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量184

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/sjsyg/article/details/131637058

版权

本文详细介绍了CSS中的各种选择器，包括基本选择器如标签、ID和类，通配符选择器，以及更复杂的选择器如包含选择器、复合选择器、属性选择器、伪类和结构伪类选择器。此外，还涵盖了伪元素选择器及其在文本和表单元素中的应用。

摘要由CSDN通过智能技术生成

基本选择器

<style>
    标签选择器 选中所有p标签
    p{
        color:aqua;
    }
    id选择器
    #box1{
        color:pink;
    }
    类选择器
    .box2{
        color:blueviolet;
    }
    通配符选择器(选中所有选择器)
    *{
        background-color:pink;
    }
</style>

包含选择器

<style>
	子代选择器   选中亲生儿子
	.a>li {
		background-color: pink;
	}

     后代选择器 找到后代所有要找的元素
	.a li {
		color: blueviolet;
	}
</style>
<body>
    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>
</body>

复合选择器（逗号选择器）

<style>
	/* div {
		color: pink;
	}
	p {
		color: pink;
    }
    span {
        color: pink;
    } */
    div,
    p,
    span {
        color: red;
    }
</style>

属性选择器

<style>
	input {
		background-color: pink;
    }
	输入内容不可见
    input[type="password"] {
        background-color: aquamarine;
    }
    div[id] {
        width: 300px;
        height: 300px;
        background-color: blue;
    }

    type^="te"以te开头
    input[type^="te"] {
        background-color: red;
    }
    input[type$="l"] {
        background-color: green;
    }
    
    type*="e"    type值里边包含e
    input[type*="e"] {
        background-color: chartreuse;
    }
</style>
<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />
    <div id="aquamarine">1</div>
    <div>2</div>
</body>

伪类选择器

<head>
    <style>
        visited访问前
        a:link{
            color:pink;
        }
        visited访问后
        a:visited{
            color:red;
        }
        hover鼠标悬停时
        a:hover{
            font-siza:40px;
        }
        active点击时
        a:active{
            font-size:70px;
        }
    </style>
</head>
<body>
    <a href="#">aaa</a>
</body>

结构伪类选择器

<style>
    ul li:first-child{
        background-color:pink;
    }
    ul li:last-child{
        background-color:green;
    }
    ul li:nth-child(4){
        background-color:aqua;
    }
    2n为偶数
    ul li:nth-child(2n){
        background-color:aqua;
    }
    n为全选
    ul li:nth-child(n){
        background-color:aqua;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

exen:偶数
odd:奇数

<style>
	ul li:nth-of-type(2){
		background-color:rgb(215,35);
	}
</style>
<ul>
    <p>0</p>
    <li>1</li>
    <li>2</li>
</ul>

伪元素选择器

<style>
    在所有li前添加~
    ul li::before{
        content: "~";
    }
    ul li:after{
        content: "***";
    }
    placeholder表单提示词
    ul li:placeholder{
        color:red;
    }
    selection选中时
    ul li:nth-child(4)::selection{
        color:pink;
    }
</style>
<input type="text" name="" id="" placehoder="1"
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>