CSS选择器详解：基础与进阶应用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73595197/article/details/129799294

1选择器

1.1基本选择器

id属性是唯一的，class不唯一

四种选择器的优先级：id>class>标签>通配符

1.1.1标签选择器

根据标签的名称获取

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<style>
    div{
        color:red;
    }
</style>
</head>
<body>
    <div>这是一</div>
    <p>这是二</p>
</body>
</html>

1.1.2ID选择器

根据id属性来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<style>
    #one{
        color: rgb(19, 19, 219);
    }
    #two{
        color: rgb(239, 24, 24);
    }
</style>
</head>
<body>
    <div id="one">这是一</div>
    <div id="two">这是二</div>
    <div id="three">这是三</div>
</body>
</html>

1.1.3类选择器

根据class属性来获取

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<style>
    .one{
        color: rgb(19, 19, 219);
    }
    .two{
        color: rgb(239, 24, 24);
    }
</style>
</head>
<body>
    <div class="one">这是一</div>
    <div class="two">这是二</div>
    <div class="three">这是三</div>
</body>
</html>

1.1.4通用选择器

通配符（全部都选择）

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<style>
    *{
        color: rgb(48, 8, 224);
    }
</style>
</head>
<body>
    <div id="four" class="one">这是一</div>
    <div class="two">这是二</div>
    <div id="three">这是三</div>
    <p>这是四</p>
</body>
</html>

1.2包含选择器

1.2.1子代选择器

选中某个标签的第一级子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
div.list>ul{
    border:1px solid rgb(111, 237, 8);
}
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <p>3</p>
    <div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
    </div>
</body>
</html>

1.2.2后代选择器

选中某个标签里面所有的子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
.list li{
    border: 1px solid royalblue;
}
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <p>3</p>
    <div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
    </div>
</body>
</html>

1.2.3分组选择

逗号选择器：通过选择id属性和class属性，可以同时设置多个标签，使用逗号进行分割

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style type="text/css">
.one,.two,#first,.list{
    color: rgb(221, 16, 204);
    border: 1px solid red;
}
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">2</div>
    <p id="first">3</p>
    <div class="list">
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
    </div>
</body>
</html>

1.3属性选择器

1.3.1选择选中的额标签中存在的某个属性

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
div[title]{
border: 1px solid black;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.2确切的等于某个值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
input[type="text"]{
background: red;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.3属性值包含某个值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
input[type *="e"]{
background: blue;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.4属性值以某个值开头

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
input[type ^="e"]{
background: green;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.5属性值以某个值结尾

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
input[type $="rl"]{
background: red;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.6+表示下一个标签

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
.msg +p{
border: 1px solid green;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.3.7属性等于某个属性值

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
    <div class="container">一</div>
    <div title="这是一个标题">二</div>
    <input type="text" name="" id="" value="三">
    <input type="email" name="" id="" value="四">
    <input type="url" name="" id="" value="五">
    <hr>
    <div class="msg">六</div>
    <p id="msg1" ">七</p>
    </body>
</html>

1.4伪类选择器

伪类选择器共有四种状态

:link------链接点击之前

:visited-----链接点击之后

:hover------鼠标停放在上面

:active------鼠标点击的时候但是不松手

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过进行设置不同的样式（实现伪类选择器）

四种状态的顺序最好固定，link visited hover active

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
<style  type="text/css">
     a:link{
        color: rgb(227, 14, 71);
    }
     a:visited{
        color: rgb(210, 249, 16);
    }
    a:hover{
        color: rgb(31, 236, 8);
    }
    a:active{
        color: aqua;
    }
</style>
</head>
<body>
    <a href="http://www.baidu.com" >123456789</a>
</body>
</html>

1.5伪元素选择器

使用伪元素选择器时一定要加上content属性

:before

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::before{
content: "前";
color: red;
}
</style>
</head>
<body>
<p>二</p>
</body>
</html>

:after

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p::after{
content: "后";
color: green;
}
</style>
</head>
<body>
<p>二</p>
</body>
</html>