css选择器

最新推荐文章于 2023-12-13 17:58:37 发布

www··

最新推荐文章于 2023-12-13 17:58:37 发布

阅读量46

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/www123_aa/article/details/129846553

版权

css中选择器主要有五种分别为基本选择器、包含选择器、属性选择器、伪类选择器、伪元素选择器。

1、基本选择器

在基本选择器中包括有:标签选择器、ID选择器、类选择器、通用选择器

标签选择器	通过标签的名称获取
ID选择器	通过id这一属性获取
类选择器	通过class这一属性获取
通用选择器	通过*来获取

标签选择器：能通过例如<p>、<h1>、<body>等属性来对页面中同一标签标记统一样式，但缺点也是很明显的，无法单独对某一条标签进行更改样式。

标记名{
       属性1；属性值1;
       属性2:属性值2;
       属性3:属性值3;
        .......}

ID选择器：通过id属性（唯一值）来对标签进行样式修改，优点是能单独对标签进行样式修改。

#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
........}

类选择器：通过class属性（不唯一）来对标签进行样式修改，优点是能同时对多个标签进行修改样式。

.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.........}

通用选择器：又称通配符选择器，能用于页面中所有样式，是基本选择器中使用范围最广的。

*{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
.....}

其中这四种选择器的优先级关系为：ID > class > 标签 > 通配符

2、包含选择

在包含选择器中包括有子代选择器、后代选择器、分组选择

子代选择器	获取的是某个标签的第一级子标签
后代选择器	获取的某个标签里面所有的子标签
分组选择	可以同时设置多个标签，使用逗号进行分割

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<title></title>
<style type="text/css">
/*子代选择器*/
div.list>ul{
border: 1px solid red;
}
/*后代选择器*/
.list li{
border: 1px solid blue;
}
/*逗号择器*/
.one,.two,#first{
color: green;
width: 200px;
height: 200px;
background: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="one">这是一个div</div>
<div class="two">这是第二个div</div>
<p id="first">这是一个段落标签</p>
<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>
<li>这是列表8</li>
</ul>
</div>
</body>
</html>

3、属性选择器

获取某一属性来进行样式修改，属性选择器中包含多个不同用法

标签名[属性名]	选择选中的额标签中存在的某个属性
标签名[属性=属性值]	确切的等于某个值
标签名[属性 *=属性值]	属性值包含某个值
标签名[属性 ^=属性值的开头值]	属性值以某个值开头
标签名[属性 $=属性值的结尾值]	属性值以某个值结尾

4、伪类选择器

伪类指的是同一个标签在不同的状态中有不同的样式，通过这个特性也可以对标签进行样式修改

:link	链接点击之前
:visited	链接点击之后
:hover	鼠标悬停
:active	鼠标点击的时候但是不松手

a:link{
	属性：属性值;
.....
}
a:visited{
	属性：属性值;
.....
}
a:hover{
	属性：属性值;
.....
}
a:active{
	属性：属性值;
.....
}

5、伪元素选择器

::before 在元素内部的前面插入内容

::after 在元素内部的后面插入内容

值得注意的是在伪元素选择器使用时必须要加上content属性（定义添加的文本或图片）

标签名：：before{
content：属性值；
属性：属性值;
........
}
标签名：：after{
content：属性值；
属性：属性值;
........
}

www··

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

css中选择器主要有五种分别为基本选择器、包含选择器、属性选择器、伪类选择器、伪元素选择器。1、基本选择器在基本选择器中包括有:标签选择器、ID选择器、类选择器、通用选择器标签选择器通过标签的名称获取 ID选择器通过id这一属性获取类选择器通过class这一属性获取通用选择器通过*来获取标签选择器：能通过例如<p>、<h1>、<body>等属性来对页面中同一标签标记统一样式，但缺点也是很明显的，无法单
复制链接

扫一扫