Web前端开发 CSS选择器

最新推荐文章于 2023-02-06 13:13:06 发布

LinksXX

最新推荐文章于 2023-02-06 13:13:06 发布

阅读量168

点赞数

分类专栏：学习笔记总结Web前端开发文章标签： css html

本文链接：https://blog.csdn.net/m0_52841254/article/details/117400706

版权

学习笔记总结Web前端开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS选择器

一、基本选择器

基本选择器
标签选择器	根据标签名获取
id选择器	根据id值获取 #id
类选择器	根据class值获取 .class
通配符选择器	获取所有内容 *

1.标签选择器

h1{color:green;}
<h1>这个h1标签</h1>

2.id选择器

#myprograme{color:purple;}
<p id="myprograme">这是一个p标签</p>

3.类选择器

.username{color:orange;}
<div class="username">这是个盒子</div>

4.通配符选择器

*{color:red;}
id>class>标签>通配符

5.选择器权重排序

id选择器>类选择器>标签选择器>通配符选择器

二、包含选择器

子代选择器	获取某个标签的第一级子标签
后代选择器	获取某个标签的所有子标签
分组选择器（逗号选择器）	使用逗号给多个不同标签设置相同样式

以下为包含选择器实例网页

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>包含选择器实例</title>
	<style type="text/css">
		div.user>ul{
			border: 1px solid red;
		}
		.user li{
			border: 1px solid green;
		}
		p,h1{
			font-size: 40px;
			color:red;
		}
	</style>
</head>
<body>
	<div class="user">
		<ul>
		<li>子代</li>
		<li>子代</li>
		<li>子代</li>
		<li>子代
			<ul>
				<li>后代</li>
			</ul>
		</li>
		</ul>
	</div>

	<ul>
		<li>123</li>
	</ul>
	<h1>xixixi</h1>
	<p>xixixi</p>
</body>
</html>

三、属性选择器

1.格式：标签[属性]{}

2.效果：给带有[xx]属性的标签加上样式

3.可以用表达式给定样式

[属性*=""]	给属性带有""的标签加上样式
[属性^=""]	给属性开头是""的标签加上样式
[属性$=""]	给属性以""结尾的标签加上样式
[属性=""]	给属性是""的所有标签加上样式
选择器1+选择器2	给选择器1紧接着的选择器2加上样式

以下是网页实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        /*某个标签里面的某个属性值，通过某个属性值去设定样式*/
        div[class]{
            color:blue;
           /*给属性有class的所有div标签加上样式*/
        }
        div[title]{
            color: red;
            /*给属性有title的div加上样式*/
        }
        input[type]{
            color:yellow;
            /*给属性有type的所有input标签加上样式*/
        }
        div[class*="container"]{
            color:red;
            /*包含class值为container的div加上样式*/
        }
        div[class^="m"]{
            color:purple;
            /*class值以m开始的div加上样式*/
        }
        p[id$="2"]{
            color:pink;
            /*id值以2结尾的p加上样式*/
        }
        .msg+p{
            /*msg类后的p标签加上样式*/
            font-size:40px;
        }
        [title="这是一个标题"]{
            font-size:50px;
            /*直接给有title="这是一个标题"的标签加上样式*/
        }
    </style>
</head>
<body>
    <div class="container">这是第一个div</div>
    <div title="这是一个标题">这是第二个div
    <input type="text" name="" id="" value="张三">
    <input type="email" name="" id="" value="王五">
    <input type="url" name="" id="" value="李四">
    </div>
    <hr>
    <div class="msg">这是第三个div</div>
    <p id="msg2">这一个段落</p>
</body>
</html>

四、伪类选择器

:link	链接点击之前
:visited	链接被访问之后
:hover	鼠标悬停在标签上时
:active	鼠标点击标签未抬起时
:focus	标签获取到焦点时,不常用

注:前四个伪类选择器一起使用时，顺序不可交换

以下为网页实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器实例</title>
    <style type="text/css">
        a:link{
            color:red;
        }
        a:visited{
            color:orange;
        }
        a:hover{
            font-size:30px;
        }
        a:active{
            color:blue;
        }
    </style>
</head>
<body>
    <a href="#3">点这里</a>
</body>
</html>

五、伪元素选择器

::after	在选中的选择器后面加上content属性内的样式，常用
:after	在选中的选择器后面加上{}内的样式
:before	在选中的选择器后面加上{}内的样式
::before	在选中的选择器前面加上content属性内的样式，常用
::first-letter	用于向文本的首字母添加特殊样式
::first-line	用于向文本的首行添加特殊样式
::selection	匹配用户选择的元素部分

常用伪元素网络实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器实例</title>
    <style type="text/css">
        p::before{
            content:"s";/*content中是要在前before或者后after加上的内容，用于在前后加上样式*/
        }
        p::after{
            content:"ss";
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>