CSS选择器-爱代码爱编程
CSS选择器
CSS概述：
CSS是Cascading Style Sheets的简称，也称层叠样式表，是对html标签的渲染和布局。
CSS语法由选择器和一条或多条声明构成，声明由属性和值构成。
CSS选择器作用于HTML元素，是选择你想要的元素的样式的模式。
“选择器”指明了{ }中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
CSS标签类型
1、标签选择器：也称元素选择器。（语法格式：div{ 属性: 值 },p{ 属性: 值 },ul{ 属性: 值 },li{ 属性: 值 },ol{ 属性: 值 }）。
<head>
<style type="text/css">
div {
color: black;
}
</style>
</head>
<body>
<div>标签选择器。</div>
</body>
</html>
2、.类选择器：
类选择器允许以一种独立于文档元素的方式来指定样式（如：class=“head”,语法格式：.head{ 属性: 值 }） 。
<html>
<head>
<style>
.head {
color: black;
font-size: 25px;
width: 150px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="head">类选择器。</div>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>
3、ID选择器：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。（如：id=“name”,语法格式为：#name{ 属性: 值 }）。
<head>
<style>
.head {
color: black;
font-size: 25px;
width: 150px;
height: 100px;
background: pink;
}
#name {
width: 130px;
height: 130px;
border-radius: 50%;
line-height: 50px;
text-align: center;
background-color: orange;
}
</style>
</head>
<body>
<div class="head">类选择器。</div>
<div id="name">ID选择器</div>
<div>2</div>
<div>3</div>
</body>
4、全局选择器：
对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。（语法格式：*{ 属性: 值 }，*表示对所有元素起作用包括body标签）。
<style>
*{
color: black;
font-size: 25px;
background: pink;
}
#name {
width: 130px;
height: 130px;
border-radius: 50%;
line-height: 50px;
text-align: center;
background-color: orange;
}
a:hover {
background-color: cyan;
color: aliceblue;
cursor: pointer;
border-radius: 20%;
border-bottom: 5px solid pink;
}
</style>
<body>
<div class="head">类选择器。</div>
<div id="name">ID选择器</div>
<div>
<a>鼠标停留在链接上</a>
</div>
<div>3</div>
</body>
此例子就是全局选择器对body标签作用。
属性选择器：
属性选择器可以根据元素的属性及属性值来选择元素。
<head>
<style>
*[title]{
color: black;
font-size: 25px;
background: purple;
}
#name {
width: 130px;
height: 130px;
border-radius: 50%;
line-height: 50px;
text-align: center;
background-color: orange;
}
a:hover {
background-color: cyan;
color: aliceblue;
cursor: pointer;
border-radius: 20%;
border-bottom: 5px solid pink;
}
div p {
background-color: silver;
width: 100px;
color: white;
}
p {
color: burlywood;
}
</style>
</head>
<body>
<div title="属性选择器"</div>
<div id="name">ID选择器</div>
<div>
<a>鼠标停留在链接上</a>
</div>
<div>
<p>继承选择器</p>
</div>
</body>
</html>
此例子没有作用于body标签。
5、组合选择器：
将多种选择器进行搭配，可以构成一种复合选择器。（选择器1 选择器2 {属性: 值;}注意两选择器用空格键分开）。
div p {
background-color: silver;
width:100px;
}
<div>
<p>组合选择器</p>
</div>
6、继承选择器：
继承的规则是子标签在没有定义的情况下，继承父标签的选择器；当子标签重复定义父标签的声明时，执行子标签选择器。（如：div p{ 属性: 值 },注意两选择器用空格键分开）。
div p {
background-color: silver;
width: 100px;
color: white;
}
p {
color: burlywood;
}
<div>
<p>继承选择器</p>
</div>
7、伪类选择器：
就是链接样式,伪类选择器主要应用在< a >标签上，4种不同的状态：link（未访问链接）、visited（已访问连接）、active（激活连接）、hover（鼠标停留在链接上）。
a:hover {
background-color: cyan;
color: aliceblue;
cursor: pointer;
border-radius: 20%;
border-bottom: 5px solid pink;
}
<div>
<a>鼠标停留在链接上</a>
</div>
以上内容希望对你有帮助，谢谢!
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接： https://blog.csdn.net/m0_51734506/article/details/111093204