CSS选择器

最新推荐文章于 2022-05-12 21:22:07 发布

majic_Jing

最新推荐文章于 2022-05-12 21:22:07 发布

阅读量215

点赞数 1

分类专栏： css选择器文章标签： CSS 选择器

本文链接：https://blog.csdn.net/majic_Jing/article/details/101476373

版权

css选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS的选择器有很多种，现在罗列一下：

①元素选择器；②属性选择器；③ID选择器；④class选择器；⑤包含选择器；⑥兄弟选择器；⑦子选择器；⑧选择器组合。

下面对每个详细的解释一下：

（1）元素选择器：

元素选择器是最简单、最常用的选择器。语法格式如下：

E{...}/*其中E代表有效的HTML元素名*/

其实E可以是任意有效的HTML元素名，也可用“*”来代替，“*”代表任意元素。

下面代码示范了“*”匹配所有元素的结果：

<head>
	<style type="text/css">
		/*定义对所有元素有作用的样式*/
		*{
			
			border: 1px black solid;
			padding: 4px;
		}
	</style>
</head>
<body>
	<a href="#">超链接</a>
	<div>div内的内容<span>测试内容</span></div>
	<p>p内的内容</p>
</body>

效果图如下：

下面代码是使用元素选择器的示范：

<head>
	<title>通配符元素选择器</title>
	<style type="text/css">
		div{
			background-color: grey;
		}
		p{
			background-color: #444;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>div内的内容<span>测试内容</span></div>
	<p>p内的内容</p>
</body>

效果图：

（2）属性选择器：

从广义角度讲，元素选择器是属性选择器的特例。主要的语法格式如下：

E{...}:指定该CSS样式对所有E元素起作用。

E[attr]{...}：指定该CSS样式对具有arrt属性的E元素起作用。

E[attr=value]{...}:指定该CSS样式对所有包含attr属性，且attr属性的值为value的E元素起作用。

E[attr^=value]{...}:指定该CSS样式对所有包含attr属性，且attr属性的值为以value开头的字符串的E元素起作用。

E[attr$=value]{...}:指定该CSS样式对所有包含attr属性，且attr属性的值为以value结尾的字符串的E元素起作用。

E[attr*=value]{...}:定该CSS样式对所有包含attr属性，且attr属性的值为包含value的字符串的E元素起作用。

下面是代码实例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px
		}
		div[id]{
			background-color: #aaa;
		}
		div[id*==xx]{
			background-color: #999;
		}
		div[id^=xx]{
			background-color: #555;
			color: #fff;
		}
		div[id=xx]{
			background-color: #111;
			color: #fff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div id="a">带id的div元素</div>
	<div id="zzxx">id属性值包括xx字符串的div元素</div>
	<div id="xxyy">id属性值以xx开头的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
</body>
</html>

代码效果：

（3）ID选择器：

ID选择器的语法格式如下：

#idValue{...}

搭配的代码如下：

<head>
	<title>通配符元素选择器</title>
	<style type="text/css">
		#xx{
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div id="xx">majic</div>
</body>

（4）class选择器：

class选择器的语法格式如下：

[E].classValue{...}

代码如下：

<head>
	<title>通配符元素选择器</title>
	<style type="text/css">
		.xx{
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div class="xx">majic</div>
</body>

（5）包含选择器：

包含选择器用于指定目标选择器必须处于某个选择器内部。

包含选择器的语法格式为：

Selector1 Selector2{...}

例如下面的页面代码：

<head>
	<title></title>
	<style type="text/css">
		div{
			width: 350px;
			height: 60px;
			background-color: #ddd;
			margin: 5px;
		}
		div .a{
			width: 200px;
			height: 35px;
			border: 2px dotted black;
			background-color: #888;
		}
	</style>
</head>
<body>
	<div >没有任何属性的div元素</div>
	<div ><section><div id="a">处于div之内且class属性为a的div元素</div></section></div>
	<p class="a">没有处在div之内、但class属性为a的元素</p>
</body>

（6）兄弟选择器：

兄弟选择器匹配与Selector1对应的元素后面、能匹配Selector2的兄弟节点。

兄弟选择器的语法如下：

Selector1~Selector2{...}

实例代码如下：

<head>
    <style type="text/css">
        #a ~ .long{
            background-color:#999;
        }
    </style>
    <body>
        <div id="a">majic</div>
        <div class="long">majic</div>
    </body>

（7）子选择器：

子选择器用于指定目标选择器必须是某个选择器对应元素的子元素。

子选择器的语法样式如下：

Selector1>Selector2{...}

样式代码：

<style type="text/css">
		div>div:before{
			content: '在前边加入的文本';
			color: blue;
			font-weight: bold;
			background-color: gray;
		}
</style>

（8）选择器组合：

如果需要让一份CSS样式对多个选择器起作用，就可以利用选择器组合实现。

选择器组合的语法格式如下：

Selector1,Selector2,Selector3,...{...}

页面代码是如下：

div,.a,#abc{
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px
		}

majic_Jing

关注

1
点赞
踩
1

收藏

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

CSS的选择器有很多种，现在罗列一下： ①元素选择器；②属性选择器；③ID选择器；④class选择器；⑤包含选择器；⑥兄弟选择器；⑦子选择器；⑧选择器组合。下面对每个详细的解释一下：（1）元素选择器：元素选择器是最简单、最常用的选择器。语法格式如下：E{...}/*其中E代表有效的HTML元素名*/其实E可以是任意有效的HTML元素名，也可用“*”来代替，...
复制链接

扫一扫

专栏目录