学CSS选择器，看这篇文章就够了（近2万字详解）

2022-02-06 20:02:01 阅读：129 来源： 互联网

好久不见，甚是想念！
大家好！

我是微风洋洋 今天这篇文章就是来和大家详细聊聊CSS选择器，希望大家读完有所收获，那我辛苦码字也就值了。如果你觉得对你有一丢丢启发的话，不妨 点赞、收藏、关注支持一下，你的支持将是我继续创作的最大动力。下一篇将介绍CSS元素样式，到时不见不散~~~

文章目录

一、CSS3概述
二、CSS的基本选择器
三、在HTML中使用CSS的方法
四、CSS复合选择器
五、CSS3新增的选择器
六、使用CSS设计网站页面

一、CSS3概述

1．CSS的发展

微风洋洋

2．浏览器对CSS3的支持

流行的浏览器对CSS都有很好的支持，但不同浏览器对CSS3很多细节的处理存在差异。

3．CSS的编辑器

Dreamweaver CS5、WebStorm、IntelliJ IDEA、VSCode

CSS的一个示例

示例：使用传统的HTML设计页面。

实现效果
在这里插入图片描述
HTML代码

使用CSS改进HTML设计页面

在这里插入图片描述

使用CSS有以下几个主要优点。

（1）结构和风格分离

（2）扩充HTML标记

（3）提高网站维护效率

（4）可以实现精美的页面布局

二、CSS的基本选择器

CSS可以认为是多个选择器组成的集合，每个选择器由3个基本部分组成——“选择器名称”、“属性”和“值”，格式定义如下。

selector {

property:value;

}

1.标记选择器

一个HTML页面由很多不同的标记组成，例如<p>、<h1>、<div>等。CSS标记选择器就用于声明这些标记的CSS样式。

tagName {

property:value;

}

2.类选择器

类选择器用来为一系列标记定义相同的呈现方式。

.className {

property:value;

}

示例所示为标记选择器和类选择器的综合应用

在这里插入图片描述

3.ID选择器

ID选择器和类选择器在设置格式的功能上类似，都是对特定属性的属性值进行设置。

ID选择器的一个重要功能是用做网页元素的唯一标识，所以，一个HTML文件中一个元素的ID属性值中惟一的。

定义ID选择器的语法格式如下。

#idName{

property:value ;

}

在定义ID选择器时，需要在idName前面加一个“#”符号，如下面的示例所示。

#font1{

font-family:“幼圆”;

color:#00F;

}

类选择器与ID选择器主要区别如下。

（1）类选择器可以给任意数量的标记定义样式，但ID选择器在页面的标记中只能使用一次。

（2）ID选择器比类选择器具有更高的优先级，即当ID选择器与类选择器在样式定义上发生冲突时，优先使用ID选择器定义的样式。

示例ID选择器的应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
        p {
            text-indent: 2em;
        }


        #first {
            /*ID选择器*/
            font-family: "幼圆";
            color: #00F;
        }


        #second {
            line-height: 130%;
            font-family: "隶书";
        }
    </style>
</head>
<body>
<p id="first">开展计算思维教学是计算机科学发展的必然结果。</p>


<p id="second">计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。</p>


<p>现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p>
</body>
</html>

效果

在这里插入图片描述

三、在HTML中使用CSS的方法

行内样式

最简单的一种使用方式，直接把CSS代码添加到HTML的代码行中，由<style>标记支持，代码示例如下：

<h1 style="color:blue;font-style:bold"></h1>

嵌入样式

将样式定义作为网页代码的一部分，写在HTML文档的<head>和</head>之间，通过<style>和</style>标记来声明。

嵌入的样式与行内样式有相似的，也有不同，行内样式的作用域只有一行，而嵌入的样式可以作用于整个HTML文档中。

示例是包含行内样式和嵌入样式。

在这里插入图片描述

链接样式

链接样式是在HTML中引入CSS使用频率最高的方法。

体现了“页面内容”和“样式定义”分离
实现了内容描述和CSS代码的分离
网站的前期制作和后期维护都十分方便。

链接样式先要定义一个扩展名为“.css”的文件（即外部样式表），该文件包含需要用到的CSS规则，不包含任何其他的HTML代码。

链接样式表的方法就是在HTML文件的<head>部分添加代码，格式如下。

  <link rel="stylesheet" type="text/css" href=" mystyle.css" />

链接样式表的一个示例

HTML文件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href="css/mystyle.css" type="text/css" rel="stylesheet"/>
	</head>
	<body>
	<p id="first">开展计算思维教学是计算机科学发展的必然结果。</p>
	
	<p id="second">计算机早期的发展，在计算机科学的引领下，指导什么能做，什么不能做；什么做的快，什么做的慢；什么做的好，什么做的不好。</p>
	
	<p>现在已经没有章法了，似乎计算机没有不能做的。而且计算机的超快计算速度和超大存储能力傲视着理论研究。这掩盖了一些深层次的本质问题。</p>
	</body>
	</html>

CSS文件
在这里插入图片描述

导入样式

导入样式和链接样式的操作过程基本相同，都需要一个单独的外部CSS文件，然后再将其导入到HTML文件中，但在语法和运行过程上有所差别。

导入样式是HTML文件初始化时将外部CSS文件导入到HTML文件内，作为文件的一部分，类似于嵌入。

导入外部样式需要在内嵌样式表的<style>标记中使用@import导入一个外部的CSS文件，示例代码如下。

<style type="text/css">

@import "mystyle.css";

</style>

示例

在这里插入图片描述

样式的优先级

1．行内样式和嵌入样式比较

在这里插入图片描述

行内样式的优先级大于嵌入样式

2．嵌入样式和链接样式比较

在这里插入图片描述

嵌入样式的优先级高于链接样式。

3．链接样式和导入样式

在这里插入图片描述

链接样式的优先级高于导入样式的优先级。

通过前面的例子，CSS样式表方式的优先顺序由高到低次依为：行内样式、嵌入样式、链接样式和导入样式。

四、CSS复合选择器

复合选择器就是两个或多个基本选择器通过不同方式组合而成的选择器，可以实现更强、更方便的选择功能，主要有交集选择器、并集选择器和后代选择器等。

交集选择器

交集选择器是由两个选择器直接连接构成的，其结果是选中两者各自作用范围的交集。其中，第一个必须是标记选择器，第二个必须是类选择器或ID选择器，例如：“h1.class1；p#id1”。

交集选择器的基本语法格式如下。

tagName.className {

property:value;

}

示例演示了交集选择器的作用

代码

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            color: blue;
            font-size: 9px;
        }


        .class1 {
            font-size: 12px;
        }


        div.class1 {
            color: red;
            font-size: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>正常div标记，蓝色，9px</div>
<p class="class1">类选择器，12px</p>


<div class="class1">交集选择器，红色，加粗，10px</div>
</body>
</html>

效果

在这里插入图片描述

并集选择器

并集选择器就是对多个选择器进行集体声明，多个选择器之间用“，”隔开，每个选择器可以是任何类型选择器。

如果某些选择器定义的样式完全相同，或者部分相同，则可以使用并集选择器。

下面是并集选择器的语法格式。

selector1,selector2,… {

property:value;

}

示例演示了并集选择器的作用

代码

在这里插入图片描述

后代选择器

在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行控制。例如，当<div>与</div>之间包含<b>标记时，就可以使用后代选择器定义出现在<div>标记中的<b>标记的格式。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。

selector1 selector2 {

property:value;

}

两个选择器之间用空格隔开，并且selector2是selector1包含的对象。

示例

代码

	<!DOCTYPE html >
	<head>
	<meta charset="utf-8">
	</head>
	<style>
	div {
	font-family: "幼圆";
	color: #003;
	font-size: 12px;
	font-weight: bold;
	}
	
	div li {
	/*后代选择器*/
	margin: 0px;
	padding: 5px;
	list-style: none; /*隐藏默认列表符号*/
	}
	
	div li a {
	/*后代选择器*/
	text-decoration: none; /*取消超链接下划线*/
	}
	</style>
	<body>
	<div><a href="#">请选择下列选择器</a>
	<ul>
	<li><a href="#">交集选择器</a></li>
	<li><a href="#">并集选择器</a></li>
	<li><a href="#">后代选择器</a></li>
	<li><a href="#">子选择器</a></li>
	<li><a href="#">相邻选择器</a></li>
	</ul>
	</div>
	</body>
	</html>

效果
在这里插入图片描述

子选择器

子选择器语法格式如下：

selector1>selector2

示例

代码

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	div > p {
	font-family: "幼圆";
	color: #F00;
	}
	</style>
	</head>
	<body>
	子选择器是在CSS2.1以后的版本中增加的。
	<div>
	<p>本行应用了子选择器,幼园红色</p>
	
	
	<em>
	<p>本行不属于相邻选择器，因为div标记和p标记不同级</p>
	</em>
	<p>本行应用相邻选择器,幼园红色</p>
	</div>
	
	</body>
	</html>

效果

在这里插入图片描述

相邻选择器

相邻选择器的定义符号是加号（+），可以选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）

示例

代码

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	div + p {
	font-family: "幼圆";
	color: #F00;
	}
	</style>
	</head>
	<body>
	<div>相邻选择器是在CSS2.1以后的版本中增加的。</div>
	<p>本行应用相邻选择器,幼园红色</p>
	
	<p>本行不与div相邻,相邻选择器无效</p>
	**************************
	<div>相邻选择器是在CSS2.1以后的版本中增加的。
	<p>本行不属于相邻选择器，因为div标记和p标记不同级</p>
	</div>
	***************************
	<div>相邻选择器是在CSS2.1以后的版本中增加的。</div>
	本行无标记，不影响应用相邻选择器
	<p>本行应用相邻选择器,幼园红色</p>
	</body>
	</html>

效果

在这里插入图片描述

五、CSS3新增的选择器

属性选择器

通过各种各样的属性，可以给元素增加很多附加信息。例如，通过id属性，可以区分不同的元素；通过class属性，可以设置元素的样式。

为了扩展属性选择器的功能，可以使用^、$和*这三个通配符。

属性选择器及其功能

在这里插入图片描述

示例是关于属性选择器的一个例子

代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	* {
	/*网页中所有文字的格式*/
	text-decoration: none;
	font-size: 16px;
	}
	
	a[href^=http]:before {
	/*在指定属前之前插入内容*/
	content: "超文本传输协议: ";
	color: red;
	}
	
	a[href$=jpg]:after, a[href$=png]:after {
	/*在指定属前之后插入内容*/
	content: " 图像";
	color: green;
	}
	</style>
	</head>
	<body>
	<ul>
	<li><a href="http://dltravel.html">Welcome to DL</a></li>
	<li><a href="firework.png">Firework素材</a></li>
	<li><a href="photoShop.jpg">Photoshop素材</a></li>
	</ul>
	</body>

效果

在这里插入图片描述

伪类选择器

伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。

伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

1. 基本结构伪类选择器

基本结构伪类选择器

在这里插入图片描述

伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。

2. 与元素位置有关的结构伪类选择器

与元素位置有关的结构伪类选择器

在这里插入图片描述

示例

代码

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	table {
	border:none;
	font: 14px 宋体;
	}
	table caption { /*表格标题*/
	padding: 5px;
	background-color: lightgrey;
	font-size: 24px;
	}
	thead {/*表头定义*/
	background-color:dodgerblue;
	color: white;
	}
	tbody tr:nth-child(odd){/*表体定义，奇数行偶数行分别定义*/
	background-color:#cbcbcb ;
	}
	tbody tr:nth-child(even){
	background-color: #aaa;
	}
	td,th {
	padding: 5px;
	border-bottom: 1px solid white;
	}
	</style>
	</head>
	<body>
	<table cellspacing="0">
	<caption>大连广场</caption>
	<thead>
	<tr>
	<th>广场名称</th><th>特点描述</th>
	</tr>
	</thead>
	<tbody>
	<tr><td>星海广场</td><td>从星海广场沿中央大道北行500米左右是星海会展……</td></tr>
	<tr><td>人民广场</td><td>城雕前100双脚印揭示了大连一步一个脚印地走过了百年……</td></tr>
	<tr><td>中山广场</td><td>是一个购物，餐饮，休闲，娱乐一站式购物街区……</td></tr>
	<tr><td>友好广场</td><td>博物馆/纪念展览馆，主题公园/游乐场……</td></tr>
	<tr><td>五四广场</td><td>从百盛的兴起，到家乐福的进驻，再到罗斯福的开业……</td></tr>
	</tbody>
	</table>
	</body>
	</html>

效果

在这里插入图片描述

3.UI伪类选择器

常用的UI伪类选择器

在这里插入图片描述

示例

代码

	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Document</title>
	<style>
	input[type="text"]:enabled{
	background-color:#FF0;
	}
	input[type="text"]:disalbed{
	background-color:#F0F;
	}
	</style>
	</head>
	<body>
	<form>
	姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name="text1" disabled/> <br>
	身份证号码:<input type="text" name="text2" enabled />
	</form>
	
	</body>
	</html>

效果

在这里插入图片描述

示例是超级链接的伪类选择器的应用。

在这里插入图片描述

示例展示了伪类选择器:focus和:first-child的功能

代码

	<!DOCTYPE html>
	<head>
	<meta charset=" utf-8"/>
	<title>伪类选择器</title>
	<style>
	input:focus {
	background: #FF6;
	font-family: "黑体";
	font-size: 12px;
	}
	
	div:first-child {
	color: #060;
	font-family: "黑体";
	font-size: 12px;
	}
	</style>
	</head>
	<body>
	first-child 伪类选择器示例:
	<div>本块是body的first-child，按指定格式显示</div>
	<strong>
	<div>本块是strong的first-child，本行按指定格式显示</div>
	<div>本行非first-child，未按指定格式显示</div>
	</strong>
	
	<p>
	:focus伪类选择器示例：
	
	<form name="form1" method="get">
	请输入姓名：<input type="text" name="name"/>
	</form>
	</body>
	</html>

效果

在这里插入图片描述

伪元素选择器

1．:first-letter和:first-line

:first-letter用于选中元素内容的首字符。:first-line用于选中元素中的首行文本。

在这里插入图片描述

2．选择器:before和:after

:before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。

before选择器用于在某个元素之前插入内容。

: before {

content:文字或其他内容

}

after选择器用于在某个元素之后插入内容。

: after {

content:文字或其他内容

}

示例

代码

	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<style>
	li:after {
	content: "(仅用于测试，请勿用于商业用途。)";
	font-size: 12px;
	color: red;
	}
	
	p:before {
	content: "★ ";
	}
	</style>
	</head>
	<body>
	<h1>课程清单</h1>
	<ul>
	<li><a href="html.mp4">HTML5</a></li>
	<li><a href="css.mp4">CSS3</a></li>
	<li><a href="JS.mp4">JavaScript</a></li>
	</ul>
	<h2>HTML5</h2>
	
	<p>Canvas</p>
	
	<p>WebWorker</p>
	
	<p>WebStorage</p>
	
	<p>离线应用</p>
	
	<p>WebSocket</p>
	</body>
	</html>

效果

在这里插入图片描述

六、使用CSS设计网站页面

示例的布局使用表格，页面中的元素如文字、超级链接、表单、水平线等由CSS来控制，页面效果如图所示。

在这里插入图片描述

代码

	
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Web前端技术</title>
	<style type="text/css">
	<!--
	table[id="out"] {
	width: 760px;
	border: 1px solid #9fa1a0;
	margin: 0 auto;
	padding: 0;
	}
	.menu_style,.foot_style { /*菜单设置*/
	height: 23px;
	line-height: 23px;
	background-color: #90d226;
	text-align: center;
	vertical-align: middle;
	}
	.menu_style a {/*超级链接*/
	display: inline-block;
	width: 80px;
	text-decoration: none;
	}
	a:link {
	font-size: 12px;
	color: #336699;
	text-decoration: none;
	}
	table[id="main"] {
	width: 100%;
	height: 256px;
	border: 0;
	padding: 0;
	}
	.wodeweizhi { /*我的位置*/
	width: 550px;
	vertical-align: top;
	padding-top: 10px;
	padding-left: 10px;
	}
	hr { /*水平线*/
	width: 500px;
	text-align: center;
	}
	.zw { /*正文段落*/
	font-size: 12px;
	line-height: 1.75em;
	color: #666666;
	text-align: left;
	text-indent: 2em;
	}
	table[id="search"] {
	width: 170px;
	height: 110px;
	border: 1px solid #CCC;
	padding: 0;
	margin: 0 auto;
	}
	form { /*表单*/
	height: 110px;
	width: 170px;
	}
	input { /*输入域*/
	height: 17px;
	width: 67px;
	border: thin solid #467BA7;
	}
	.dianxingkuangjia { /*典型框架*/
	text-align: center;
	font-weight: bold;
	color: #06F;
	}
	.dianxingkuangjia a {
	text-decoration: none;
	}
	.dianjizheli { /*点击这里*/
	font-size: 12px;
	line-height: 1.75em;
	color: #666666;
	}
	-->
	</style>
	</head>
	
	<body>
	<table id="out">
	<tr>
	<td style="text-align:center;padding:0;"><img src="images/title3.jpg" style="width:760px; height:161px;"/>
	</td>
	</tr>
	<tr>
	<td class="menu_style">
	<a href=""> HTML</a>
	<a href=""> CSS</a>
	<a href="">JavaScript</a>
	<a href="">Ajax</a>
	<a href="">XML</a>
	<a href=""></a>
	</td>
	</tr>
	<tr>
	<td>
	<table id="main">
	<tr>
	<td class="wodeweizhi"><p class="zw">我的位置&gt;&gt;CSS</p>
	<hr/>
	<p class="zw">CSS(Cascading Style
	Sheets，层叠样式表)是标准的布局语言，用来控制元素的尺寸、颜色和排版，用来定义如何显示HTML元素，纯CSS的布局与XHTML相结合，可使内容表现与结构相分离，并使网页更容易维护，易用性更好。
	请参阅<a href="#">CSS详解</a>。</p>
	<p class="zw"> 常见的CSS开发工具有包括记事本、EditPlus文本编辑器；可视化网页开发工具Dreamweaver CS5、Frontpage等.</p>
	<p class="zw">关于CSS的一些问题，欢迎和我们交流<a href="#">Email me</a>. </p>
	</td>
	<td>
	
	<form id="form1" name="form1" method="post" action="">
	<table id="search">
	<tr>
	<td style="width:50%;"><img src="images/username.jpg" /></td>
	<td>
	<input type="text" name="uname" id="uname"/></td>
	</tr>
	<tr>
	<td><img src="images/password.jpg" /></td>
	<td>
	<input type="text" name="pwd" id="pwd"/></td>
	</tr>
	<tr>
	<td><span class="dianjizheli">点击这里</span><a href="#">注册</a></td>
	<td><img src="images/login_1.jpg" style="width:44px;
	height:17px;"/></td>
	</tr>
	</table>
	</form>
	<div class="dianxingkuangjia">
	<p>典型框架</p>
	<p><a href="#">JQuery</a></p>
	<p><a href="#">Dojo</a></p>
	<p><a href="#">Prototype</a></p>
	</div>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td class="foot_style"><p>版权所有</p></td>
	</tr>
	</table>
	</body>
	</html>

关注，即可提高学习效率。Perfect！

标签：伪类,样式,示例,就够,HTML,选择器,CSS
来源： https://blog.csdn.net/qq_51547965/article/details/122795707

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

学CSS选择器，看这篇文章就够了（近2万字详解）

文章目录

一、CSS3概述

二、CSS的基本选择器

1.标记选择器

2.类选择器

3.ID选择器

三、在HTML中使用CSS的方法

行内样式

嵌入样式

链接样式

导入样式

样式的优先级

1．行内样式和嵌入样式比较

2．嵌入样式和链接样式比较

3．链接样式和导入样式

四、CSS复合选择器

交集选择器

并集选择器

后代选择器

子选择器

相邻选择器

五、CSS3新增的选择器

属性选择器

伪类选择器

1. 基本结构伪类选择器

2. 与元素位置有关的结构伪类选择器

3.UI伪类选择器

伪元素选择器

1．:first-letter和:first-line

2．选择器:before和:after

六、使用CSS设计网站页面