选择器知识表单及css常见样式

最新推荐文章于 2023-10-19 15:17:55 发布

灰灰灰380

最新推荐文章于 2023-10-19 15:17:55 发布

阅读量113

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_75107177/article/details/130673728

版权

文章详细介绍了CSS中的基本选择器，包括标签选择器、ID选择器、类选择器和通配符选择器，以及它们的优先级。接着讨论了包含选择器，如子代选择器、后代选择器和分组选择器，并提供了实例。此外，还涵盖了属性选择器的不同用法和伪类、伪元素选择器的功能，强调了a标签的四种状态和伪元素的content属性的重要性。最后提到了CSS样式的常见属性，如字体、颜色和文本控制。

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

1.1基本选择器

四种选择器（在head里使用style）：

1. 标签选择器（根据标签的名称设置对应的样式）

2. ID 选择器（通过获取标签里面的 ID 属性去设置对应的样式，设置的时候 #+id 的属性值）

3. 类选择器（通过获取标签里面的 class 属性去设置对应的样式，设置的时候 .+class 的属性值）

4. 通配符选择器（通过 * 设置对应的样式）

选择器的优先级： ID 选择器 > 类选择器 > 标签选择器 > 通配符选择器

实例：

<head> </head>如下所示

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本选择器</title>

<style>
/*标签选择器*/
div{
width: 200px;
height: 200px;
border: 1px solid black;
color: aqua;
}

/*ID选择器*/
#one{
color: blueviolet;
}

/*类选择器*/
.box{
color: brown;
}

/*通配符选择器*/
*{
color: chartreuse;
}
</style>

</head>

<body> </body>如下所示

<body>
<div>这是一个div</div>
<p id="one">这是一个段落标签</p>
<div class="box">这是第二个div</div>
<hr>
<ul>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
<li>这是列表1</li>
</ul>
</body>

1.2包含选择器

1. 子代选择器（获取的某个标签的第一级子标签）

2. 后低选择器（获取的某个标签的所有子标签）

3. 分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）

实例：

<head> </head>如下所示

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>包含选择器</title>
<style>
/*子代选择器*/
div.list > ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid rgb(12, 204, 60);
}
/*分组选择器*/
#one,.box,h1{
color: blueviolet;
}
</style>
</head>

<body> </body>如下所示

<body>
<h1>这是一个标题</h1>
<p id="one" class="two">这是一个段落标签</p>
<div class="box">这是第二个div</div>
<div class="list">
<ul>
<li>这是列表1</li>
<li>这是列表2</li>
<li>这是列表3</li>
<li>这是列表4</li>
<li>这是列表5</li>
<li>这是列表6</li>
<li>这是列表7</li>
</ul>
<li>这是列表8</li>
<li>这是列表9</li>
<li>这是列表10</li>
</div>
</body>

1.3属性选择器

会认识属性选择器，熟悉其格式

实例如下：

<head> </head>如下所示

<style>
/*选中某个标签中存在的某个值*/
.container[class]{
color: red;
}
div[title]{
color: aquamarine;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性里面包含某个值*/
input[type *= "e"]{
background: blue;
}
/*属性中的值以XXX开始*/
input[type ^= "e"]{
background-color: blueviolet;
}
/*属性中的值以XXX结尾*/
input[type $= "rl"]{
background-color: rgb(14, 139, 18);
}
/*表示下一个标签*/
.msg + p{
color: darkgoldenrod;
}
/*属性等于某个值*/
[title="这是一个标题"]{
color: chartreuse;
}
</style>
</head>

<body> </body>如下所示

<body>
<div class="container">这是一个div容器</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" value="张三">
<input type="email" value="王五">
<input type="url" value="李四">
<hr>
<div class="msg">我喜欢吃好吃的</div>
<p id="msg2">这是一个段落</p>
</body>

1.4伪类选择器

伪类：同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要是用来渲染 a 标签不同的状态下的不同的样式

下列为常见的选择器：

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

超链接被访问之后 -------- :visited

鼠标放在超链接上的时候（悬停） ------- :hover

超链接激活的时候（鼠标点击标签但是不松手的时候）------ : active

注意：对于a标签的四种状态的顺序是一定的，a:link a:visited a:hover a:active

实例如下：

<head> </head>如下所示

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/*超链接点击之前的颜色是红色*/
a:link{
color: red;
}
/*超链接点击之后的颜色是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停的时候的颜色绿色*/
a:hover{
color:green;
}
/*超链接被激活的时候的颜色是蓝色*/
a:active{
color:blue;
}
</style>
</head>

<body> </body>如下所示（打开百度网站）

<body>
<a href="https://www.baidu.com/" >戳我</a>
</body>

1.5伪元素选择器

与伪类选择器类似，通过：实现

优点：所有的东西写完就能看到效果

常用：

:before ----- 在元素开始之前显示

:after ----- 在元素之后显示

::before -----

::after -----

注意：使用 before 和 after 的时候一定给要写上 content 属性，content中可以为空，也可以为图片等

但是必须要有content

实例如下：

<head> </head>如下所示

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content: "张三说";
color: blueviolet;
}
p::after{
content: "对不对？";
color: rgb(10, 1, 17);
}
</style>
</head>

<body> </body>如下所示

<body>
<p>这是一个段落</p>
</body>

2. css常见的样式

2.1 基本语法

格式如下：

选择器 {

属性：属性的取值 ;

属性：属性的取值 ;

}

2.2常见的样式

2.2.1 控制字体

设置字体的大小 ( 字号 ) -------- font-size:12px;

设置字的颜色 ------ color ：颜色表示法 ;

设置字的字体 ------ font-family :” 宋体 “;

设置字的行高 ------ line-height ： 150% 1.5em;

设置字的粗细 ------ font-weight ： normal ( 正常默认取值 ) blod （粗体）

2.2.2 控制文本

设置字体的大小 ( 字号 ) -------- font-size:12px;

设置字的颜色 ------ color ：颜色表示法 ;

设置字的字体 ------ font-family :” 宋体 “;

设置字的行高 ------ line-height ： 150% 1.5em;

设置字的粗细 ------ font-weight ： normal ( 正常默认取值 ) blod （粗体）

2.2.3 样式的特点

1. 继承性 ------- 网页中子元素将继承父元素的样式

2. 层叠性 ------ 网页中如果子元素和父元素设置了同样的样式，则子元素的样式会覆盖掉父元素

的样式

灰灰灰380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
选择器知识表单及css常见样式

四种选择器（在head里使用style）：1.标签选择器（根据标签的名称设置对应的样式）2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）3.类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）4.通配符选择器（通过设置对应的样式）选择器的优先级：ID选择器类选择器标签选择器通配符选择器实例：<head> </head>如下所示<body> </body>如下所示。
复制链接

扫一扫