CSS选择器（下）

微风洋洋
101 阅读6分钟

「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

一、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>

效果

QQ截图20220206075631.png

并集选择器

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

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

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

  selector1,selector2,… {

property:value;

}  

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

代码

QQ截图20220206080016.png

 

后代选择器

 在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>

效果

QQ截图20220206080157.png

 

子选择器

子选择器语法格式如下：

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>

效果

QQ截图20220206080339.png

相邻选择器

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

示例

代码

	<!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>

效果

QQ截图20220206081148.png

二、CSS3新增的选择器

属性选择器

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

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

属性选择器及其功能

QQ截图20220206083656.png

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

代码

	<!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>

效果

QQ截图20220206083815.png

 

伪类选择器

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

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

1. 基本结构伪类选择器

基本结构伪类选择器

QQ截图20220206084033.png

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

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

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

QQ截图20220206084215.png

示例

代码

	<!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>

效果

QQ截图20220206084254.png

3.UI伪类选择器

常用的UI伪类选择器

QQ截图20220206084510.png

示例

代码

	<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>

效果

QQ截图20220206084605.png

 

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

QQ截图20220206084805.png

 

示例展示了伪类选择器: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>

效果

QQ截图20220206084853.png

伪元素选择器

1．:first-letter和:first-line

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

QQ截图20220206085102.png

 

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>

效果

QQ截图20220206085205.png

 

三、使用CSS设计网站页面

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

  QQ截图20220206085711.png

代码

	
	<!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>
avatar
文章
阅读
粉丝