CSS3选择器

最新推荐文章于 2022-11-17 22:02:01 发布

白菜4220

最新推荐文章于 2022-11-17 22:02:01 发布

阅读量209

点赞数

分类专栏： H5+CSS3

本文链接：https://blog.csdn.net/qq_39263663/article/details/80708828

版权

H5+CSS3 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

1，CSS3选择器分类

CSS3选择器在CSS2.1选择器的基础上新增了属性选择器，伪类选择器，过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，使编写代码更简单轻松。

根据所获取页面元素的不同，可以把CSS3选择器分为5大类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。其中，伪类选择器又分为6种：动态伪类选择器，目标伪类选择器，语言伪类，UI元素状态伪类选择器，结构伪类选择器和否定伪类选择器。

2，基本选择器

2.1 标签选择器

直接使用HTML标签名称进行选择，如：

p{background-color:red;}

2.2 类选择器

使用.classname进行选择

.classname{background-color:red;}

2.3 ID选择器

使用#idName进行选择

#idname{background-clolor:red;}

2.4 通配选择器

使用*匹配HTML页面中的所有元素

*{margin:0;padding:0;}

3，组合选择器

3.1 包含选择器

使用父容器名子容器名{属性：属性值}来进行选择

div span{background-color:red;}

3.2 子选择器

使用尖角号（>）表示。

div>span{background-color:red;}

3.3 相邻选择器

通过+分隔符进行定义。

h2+p{backgrond-color:red;}

3.4 兄弟选择器

使用~分隔符定义

h2~h1{background-color:red;}

3.5 分组选择器

h1,h2,h3,h4{background-color:red}

4,属性选择器

E[attr]：只使用了属性名，但是没有确定任何属性值。
E[attr="value"]：指定了属性名，并指定了该属性属性值
E[attr~="value"]：指定了属性名，并且具有属性值，此属性值是一个词列表，并且一空格隔开，其中词列表中包含了一个value词，而且等号前面的"~"不能不写。
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的
E[attr$="value"]：指定了属性名，并且有属性值，属性值是以value结束的
E[attr*="value"]：指定了属性名，并且有属性值，属性值中包含了value。
E[attr|="value"]：指定了属性名，并且属性值是value或者以"value-"开头的值

下面是一个综合示例：

<html>
	<head>
	<style type="text/css">
		.pic_box{
			height:300px;
			width:400px;
			border:solid 1px red;
			position:relative;
			float:left;
			}
		.nav{
			background-color:#999;
			border:1px solid #ccc;
			padding:4px 12px;
			float:left;
			opacity:0.6;
			position:absolute;
			bottom:6px;
			right:12px;
			}
		.nav a{
			float:left;
			display:block;
			heigth:20px;
			line-height:20px;
			width:20px;
			border-radius:10px;
			text-align:center;
			background:#f36;
			color:green;
			margin-right:5px;
			text-decoration:none;
			}
		.nav a:hover{
			background:green;
			color:#fff;
			}
		.nav a[id]{
			background-color:blue;
			color:yellow;
			font-weight:bold;
			}
		.nav a[id="first"]{
			background-color:red;
			}
		.nav a[title~="website"]{
			background-color:black;
			}
		.nav a[title^="c"]{
			background-color:gray;
			}
		.nav a[title$="k"]{
			background-color:#789;
			}
	</style>
	</head>
	<body>
		<div class="pic_box">
			<div class="nav">
				<a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
				<a href="#2" class="links active item" title="website" target="_blank" lang="zh">2</a>
				<a href="#3" class="links item" title="this is a link" lang="zh-cn">3</a>
				<a href="#4" class="links item" target="_blank" lang="zh-tw">4</a>
				<a href="#5" class="links item" title="zh-cn">5</a>
				<a href="#6" class="links item" title="website link" lang="zh">6</a>
				<a href="#7" class="links item" title="open the website" lang="cn">7</a>
				<a href="#8" class="links item" title="close the website" lang="en-zh">8</a>
				<a href="#9" class="links item" title="http://www.baidu.com">9</a>
				<a href="#10" class="links item last" id="last">10</a>
	</body>
</html>

5，伪类选择器

CSS伪类选择器有两种用法：

单纯式, E:pseudo-class{property:value}

其中E为元素，pseudo-class为伪类名称，property是CSS的属性，value为CSS的属性值。例如：

a:link{color:red;}

混合式：

a.selected:hover{color:blue;}

CSS3的伪类选择器主要包括4种：动态伪类，结构伪类，否定伪类和状态伪类。

5.1 动态伪类

锚点伪类： :link :visited

行为伪类： :hover :active :focus

:hover :active :focus

5.2 结构伪类

:first-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type() :last-of-type() :only-child() :only-of-type() only-child() only-of-type() empty

5.3 否定伪类

input:not([type="submit"]){border:1px solid red;}

5.4 状态伪类

1，：enabled

:enabled伪类表示匹配指定范围内所有可用UI元素。在网页中,UI元素一般是指包含在form元素内的表单元素。例如，在下面表单结构中，input:enabled选择器将匹配文本框，但不匹配该表单中的按钮。

<form>
	<input type="text" />
	<input type="button" disabled="disabled" />
</form>

2，：disabled

:disabled伪类表示匹配指定范围类所有不可见UI元素。

3，：checked

:checked伪类表示匹配指定范围内所有可见UI元素。例如，在以下表单结构中，input:checked选择器将匹配片段中单选按钮，但不匹配该表单中的复选框。

<form>
	<input type="checkbox" />
	<input type="radio" checked="checked"/>
</form>

#IE6~8不支持这三种选择器

白菜4220

关注

0
点赞
踩
0

收藏

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

1，CSS3选择器分类 CSS3选择器在CSS2.1选择器的基础上新增了属性选择器，伪类选择器，过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，使编写代码更简单轻松。根据所获取页面元素的不同，可以把CSS3选择器分为5大类：基本选择器，组合选择器，伪类选择器，伪元素和属性选择器。其中，伪类选择器又分为6种：动态伪类选择器，目标伪类选择器，语言伪类，UI元素...
复制链接

扫一扫