CSS选择器

最新推荐文章于 2024-04-17 23:37:40 发布

otatoz

最新推荐文章于 2024-04-17 23:37:40 发布

阅读量224

点赞数

分类专栏： html及css 文章标签： css选择器 css继承与级联

本文链接：https://blog.csdn.net/qq_42720683/article/details/93750248

版权

html及css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

选择器可分为基本选择器、层次选择器、属性选择器、伪类选择器、伪元素选择器

1、基本选择器

id选择器

#test{} 选中id为test的元素

类选择器

.test{} 选中类为test的元素

标签选择器

h1{} 选中h1标签

普遍选择器（通用选择器）

*{} 一般用于消除默认样式（针对所有的标签）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基本选择器</title>
</head>
<style>
    /*id选择器*/
    #test{
    	font-size: 30px;
    }
    /*类选择器*/
    .hello{
	color: red;
    }
    /*标签选择器*/
    h1{
	margin-top: 50px;
    }
    /*普遍选择器,此处消除了li无序列表前面的圆点*/
    *{
        list-style: none;
        margin:0;
        padding:0;
    }
</style>
<body>
    <div id="test">hello world</div>
    <div class="hello">hello world</div>
    <h1>hello world</h1>
    <ul>
	<li>hello</li>
	<li>world</li>
    </ul>
</body>
</html>

效果如下：

2、层次选择器

后代选择器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ol>
        <li>4</li>
	<li>5</li>
    </ol>
</ul>
ul li{
    background-color:red;
}

选择ul后代中全部的li元素，不管li嵌套在几层标签中（上述代码中1~5都有红色的背景色）

子代选择器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <ol>
        <li>4</li>
	<li>5</li>
    </ol>
</ul>
ul>li{
    background-color:red;
}

选择ul的第一任子代li元素，处于嵌套在别的元素中的子代无法被选中（上述代码中，1~3会有红色的背景色，4、5没有）

兄弟选择器（注意是同级）

div+h1{
    ...
}

选中与div同级的之后的第一个h1标签

div~h1{
    ...
}

选中与div同级的之后的所有h1标签（包括第一个h1）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css层次选择器</title>
</head>
<style>
	/*后代选择器*/
	ul li{
		background-color: red;
	}
	/*子代选择器*/
	ul>li{
		font-size: 3em;
	}
	/*兄弟选择器*/
	div+h1{
		margin-left: 50px;
	}
	div~h1{
		background-color: teal;
	}
</style>
<body>
	<ul>
		<li>hello</li>
		<li>world</li>
		<ol>
			<li>1</li>
			<li>2</li>
		</ol>
	</ul>
	<div>a</div>
	<div>
		<h1>我不同级</h1>
	</div>
	<h1>b</h1>
	<h1>c</h1>
	<h1>d</h1>
	<div>
		<h1>我不同级</h1>
	</div>
</body>
</html>

效果如下：

3、属性选择器

[class]{
...
}
选择所有具有class属性的标签

[class=test]{
...
}
选择所有class为test的标签

[class~=one]{
...
}
选择具有class属性且class属性之一为one的元素

[class^=one]{
...
}
选择具有class属性且class属性以one开头的元素

[class$=one]{
...
}
选择具有class属性且class属性以one结尾的元素

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css属性选择器</title>
</head>
<style>
	/*选择具有属性为class的标签*/
	[class]
	{
		background-color: red;
	}
	/*选择具有class且属性为test的标签*/
	[class=test]{
		font-size: 50px;
	}
	/*选择具有属性为class且属性值之一为one的标签*/
	[class~=one]{
		margin-left: 50px;
	}
	/*选择具有属性为class且属性值以table开头的标签*/
	[class^=table]{
		margin-top: 50px;
	}
	/*选择具有属性为class且属性值以table结束的标签*/
	[class$=table]{
		color: teal;
	}
</style>
<body>
	<div class="test">hello world</div>
	<h1 class="my">my</h1>
	<div class="one table">table</div>
	<div class="table">my table</div>
</body>
</html>

效果如下：

4、伪类选择器

li:first-child{
...
}
在一组兄弟元素中，选中第一个元素

li:last-child{
...
}
在一组兄弟元素中，选中最后一个元素

li:nth-child(n){
...
}
在一组兄弟元素中，选中第n个元素

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css伪类选择器</title>
</head>
<style>
	/*一组兄弟元素中的第一个元素*/
	li:first-child{
		font-size: 30px;
	}
	/*一组兄弟元素中的最后一个元素*/
	li:last-child{
		margin-left: 40px;
	}
	/*一组兄弟元素中的第n个元素*/
	li:nth-child(3){
		background-color: red;

	}

</style>
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</body>
</html>

效果如下：

5、伪元素选择器

::after
   用来创建一个伪元素，作为已选中元素的最后一个子元素
div::after{
   content:'test';
   color:yellow;
}

::before
用来创建一个伪元素，作为已选中元素的第一个子元素
创建的伪元素跟选中的元素的样式默认是一致的（即要是不设置样式，伪元素的样式就是选中元素的样式）

::first-letter
选中首字符（中英文都可以）

::first-line
选中文本的第一行

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css伪元素选择器</title>
</head>
<style>
	/*在div后面添加一个伪元素*/
	div::after{
		content: '伪元素';
		color: yellow;
	}
	/*在h1之前添加一个伪元素*/
	h1::before{
		content: '伪元素';
		color: yellow;
	}
	/*首字母样式*/
	h2::first-letter{
		font-size: 130%;
	}
	/*文本首行样式*/
	h3::first-line{
		color: yellow;
	}
</style>
<body>
	<div>我是测试</div>
	<p>我是段落</p>
	<h1>我是标题</h1>
	<h2>my test</h2>
	<h3 style="width: 100px;">my test is very easy,
		this is a test
	</h3>
</body>
</html>

效果如下:

继承与级联（样式的优先级）

1、是否具有    !important;(不推荐使用)
2、选择器权重
   1000   定义在style属性中的（行内样式）
   100    id选择器
   10     类选择器、伪类选择器、属性选择器
   1      标签选择器、伪元素选择器
3、选择器顺序
   就近原则：优先级相同时，后者覆盖前者；哪一种样式离选中的标签近，哪一个就生效

!important > 行内样式> ID选择器 > 类选择器 > 标签 > 继承 > 浏览器默认属性

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css样式优先级</title>
</head>
<style>
	/*权重:内联>id选择器>类选择器>标签选择器;可以从内联样式往外一层一层注释查看效果*/
	
	/*标签选择器*/
	div{
		color: yellow;
	}
	/*类选择器*/
	.test{
		color: blue;
	}
	/*id选择器*/
	#one{
		color: teal;
	}

</style>
<body>
	<div id="one" style="color: red;" class="test">我是测试</div>
</body>
</html>

注：

选择器权重的叠加：
11个类选择器和1个id选择器，应用的是1个id选择器的样式
因为选择器的权重不能进位，11个类选择器的总权重不会超过100