CSS 选择器 总结

最新推荐文章于 2024-07-06 20:00:00 发布
最新推荐文章于 2024-07-06 20:00:00 发布
阅读量902 收藏 3
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cbkting/article/details/77720637
版权

文章目录


备注：

  1. E、F、G代表任意元素；
  2. attribute【简写成attr】代表任意元素的属性，value代表属性的属性值；
  3. 浏览器测试： Chrome 60.0.3112.113、IE 11.0、Firefox 55

基本选择器

基本选择器符号/其他标记语法名称说明范例版本
*（星号）* {property:value;}通用选择器匹配所以元素p *{color:#00FF00}CSS2
EE{property:value;}类型选择器匹配指定标记的元素p{color:#00FF00}CSS1
#（井号）#myid{property:value;}
E#myid{property:value;}		ID选择器匹配唯一标识id属性为myid的E元素#intor{text-align:center}CSS1
.（实点）.myclass{property:value;}
E.myclass{property:value;}		类选择器匹配class属性为myclassd的所有E元素.important {color:red;}
p.important {color:red;}
.important.urgent {background:silver;}		CSS1

通用选择器（*）

  在通用选择，写有*，匹配任意元素类型的名称。它匹配文档树中的任何单个元素。
如果通用选择器不是简单选择器的唯一组件，则可以省略*。例如：

  • *[lang=fr] 并且[lang=fr]是相当的。
  • *.warning并且.warning是相当的。
  • *#myid并且#myid是相当的。

注意：
1、任意元素或选择器的前面放在 *；
2、* 和任意元素或选择器之间添加空格；

CSS 代码，通用选择器有四种用法：

  • 用法一
    单独使用。
    语法：* { 执行代码 }
    示例：
*{
  font-family:"Microsoft YaHei"; /
}

备注：Microsoft YaHei ：微软雅黑字体呈现效果：使用"YaHei":Chrome、Firefox呈现效果，而IE无法显示；使用"Microsoft YaHei"：Chrome、Firefox、IE都能呈现效果。*/

  • 用法二
    星号(*) + 空格 + 元素 组合使用。
    语法：* p{ 执行代码 }
    示例：
* p{
    color:#0000FF;
    text-decration:underline;
}

用法二，HTML 和 CSS 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test测试</title>
	<style type="text/css">
	* .container{
	    border: 1px solid #0000ff;
	}
	</style>
</head>
<body>
	<p><span class="container">通用选择器</span>全体元素都受到影响</p>
	<p>这个段落不受该样式的影响。</p>
	<hr/>
	<ul class="container">雪糕味道：
	    <li>芒果味</li>
    	<li><strong>茉莉</strong>味</li>
		<li>草莓味</li>
		<li>巧克力味</li>
	</ul>
	<p class="container">h1~h2 标题效果：</p>
	<h1 class="container">一级标题</h1>
	<h2>二级标题</h2>
</body>
</html>

运行结果，Chrome、Firefox、IE呈现效果一样。：
这里写图片描述

  • 用法三
    星号(*) + 空格 + 其他类型选择器 组合使用。
    语法：* .box{ 执行代码 }，* #box{ 执行代码 }等
    示例：
* .container{
    border: 1px solid #0000ff;
}
  • 用法四
    前面加了*的属性，解决浏览器兼容的问题。IE（IE6、IE7 ）浏览器才认可这个样式，其它浏览器不会认。也是css hack。
    语法：.box{ * 属性 : 值; }
    示例：
.container{
    border:1px solid #0000ff;
    width:220px;
    *width:300px;
}

关于CSS hack问题：
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。

用法四，HTML 和 CSS 代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test测试</title>
	<style type="text/css">
	.container{
    	border:1px solid #0000ff;
    	width:220px;
    	*width:300px;
    }
	</style>
</head>
<body>
	<p><span class="container">通用选择器</span>全体元素都受到影响</p>
	<p>这个段落不受该样式的影响。</p>
	<hr/>
	<ul class="container">雪糕味道：
	    <li>芒果味</li>
    	<li><strong>茉莉</strong>味</li>
		<li>草莓味</li>
		<li>巧克力味</li>
	</ul>
	<p class="container">h1~h2 标题效果：</p>
	<h1 class="container">一级标题</h1>
	<h2>二级标题</h2>
</body>
</html>

运行结果，Chrome、Firefox、IE呈现效果一样：
这里写图片描述

类型选择器

类型选择器就是以元素为名的选择器。
比如 p段落元素，h1 标题元素，ul li 无序列表元素等
语法：``

p{ color:#0000FF; text-decration:underline; }
h1{ color:color:#01eecc; }
li{ color:#07aa00; }

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>test测试</title>
	<style type="text/css">
		p{
			color:#0000FF;
			text-decration:underline;
		}
		h1{
			color:#01eecc;
		}
		li{
			color:#07aa00;
		}		
	</style>

</head>
<body>
	<ul>雪糕味道：
	    <li>芒果味</li>
    	<li><strong>茉莉</strong>味</li>
		<li>草莓味</li>
		<li>巧克力味</li>
	</ul>
	<p>h1~h2 标题效果：</p>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
</body>
</html>

运行结果：
这里写图片描述

Chrome、Firefox、IE呈现效果一样。

关系选择器：

关系选择器语法名称说明版本
, （逗号）E,F,G{property:value;}选择器分组选择所有的E元素、F元素和G元素CSS1
空格E F{property:value;}包含选择符/后代选择器选择所有被E元素包含或者后代的F元素CSS1
>（大于）E>F{property:value;}子元素选择器选择所有作为E元素的子元素FCSS2
+（加号）E+F{property:value;}相邻选择器选择紧贴在E元素之后的F元素CSS2
~（波浪号）E~F{property:value;}间接相邻选择器选择紧跟E元素之后相邻的全部元素FCSS3

###属性选择器：
注意：E 代表任意元素。
这里写图片描述

简单属性选择：E[attr]
CSS 代码：

<style src="text/css">
/*两个[]方括号之间不能有空格，否者无法呈现效果*/
    *[title] {color:red;}
    a[href][title]{color:#ff0000;}
    img[alt]{border: 10px solid #32db18;}
</style>

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test测试</title>
    <style type="text/css">
        a[href][title]{color:#ff0000;}
        img[alt]{border: 10px solid #32db18;}
    </style>
</head>
<body>
    <p>被应用样式：</p>
    <a href="http://new.baidu.com" title="百度新闻搜索——全球最大的中文新闻平台">百度新闻</a>
    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a><br/><br/>
    <img src="./time.png" align="baseline" alt="头像"/>

    <p>无法应用样式：</p>
    <a href="http://new.baidu.com/society" name="百度新闻">社会新闻</a>
    <a href="http://http://www.csdn.net" >CSDN官网</a>
    <a title="CSDN首页">CSDN官网</a>
</body>
</html>

运行结果：
这里写图片描述

根据具体属性值选择
CSS 代码：

<style src="text/css">
	a[href="http://new.baidu.com"]{color: #e20600;}
	/*两个[]方括号之间不能有空格，否者无法呈现效果*/
	a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}
	/*结合class选择器使用*/
	p[class="important warning"] {color:#24CC03;} 
</style>

HTML 代码1：

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8">
	<title>test测试</title>
	<head>
    <meta charset="utf-8">
    <title>test测试</title>
    <style type="text/css">
        a[href="http://new.baidu.com"]{color: #e20600;}
    </style>
</head>
<body>

    <p class="important warning">被应用样式：</p>
    <a href="http://new.baidu.com" title="百度新闻">百度新闻</a>


    <p class="important">无法应用样式：</p>
    <a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>
    <a href="http://new.baidu.com/gouji" title="百度新闻">国际新闻</a>
    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>
    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
</body>
</html>

运行效果：
这里写图片描述

HTM 代码2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test测试</title>
    <style type="text/css">
        a[href="http://new.baidu.com"][title="百度新闻"]{color: #CC2582;}
        p[class="important warning"] {color:#24CC03;}
    </style>
</head>
<body>
    <p class="important warning">被应用样式：</p>
    <a href="http://new.baidu.com" title="百度新闻">百度新闻</a>

    <p class="important">无法应用样式：</p>
    <a href="http://new.baidu.com/gounei" title="百度新闻">国内新闻</a>
    <a href="http://http://image.baidu.com" title="百度图片-发现多彩世界">百度图片</a>
    <a href="http://http://www.csdn.net" title="CSDN首页">CSDN官网</a>
</body>
</html>

运行结果：
这里写图片描述

根据部分属性值选择
CSS 代码：

<style src="text/css">
	p[class~="important"]{color:#24CC03;}
</style>

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test测试</title>
    <style type="text/css">
        p[class~="important"]{color:#24CC03;}
    </style>
</head>
<body>
    <p class="important warning">第一段落被应用样式</p>
    <p class="important">第二段落被应用样式</p>
    <p class="warning">第三段落无法应用样式：</p>
</body>
</html>

运行结果：
这里写图片描述

部分值属性选择器与点号类名记法的区别
CSS 代码：

<style src="text/css">
	img[title~="Figure"]{border: 1px solid gray;}
</style>

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test测试</title>
    <style type="text/css">
        img[title~="Figure"]
        {
            border: 10px solid gray;
        }
    </style>
</head>
<body>
	<h2>可以应用样式：</h2>
	<img title="Figure 1" src="松鼠.png" />
	<img title="Figure 2" src="兔子.png" />
	<hr />
	<h1>无法应用样式：</h1>
	<img src="松鼠.png" />
	<img src="兔子.png" />
</body>
</html>

运行结果：
这里写图片描述

子串匹配属性选择器

  • E[attr*=“value”] 选择器
    CSS 代码：
<style src="text/css">
	a[href*="http://new.baidu.com"][title="百度新闻"]{color: #136c97;}
</style>
  • E[attr^=“value”] 选择器**
    CSS 代码：
<style src="text/css">
	a[href^="http"]{color:#ff0000;}
</style>
  • E[attr$=“value”] 选择器
    CSS 代码：
<style src="text/css">
	/*匹配属性值以指定值结尾的每个元素。如下两个CSS样式，效果不同*/
	p[class$="test"]{background:#ffff00;}
	[class$="test"]{background:#FF8329;} 
	
</style>

HTML 代码一：

<!DOCTYPE html>
<html>
<head lang="zh-HK">
	<meta charset="utf-8">
	<title>test测试</title>
	<style type="text/css">
		p[class$="test"]
		{
			background:#ffff00;
		}
	</style>
</head>
<body>

	<p class="first_test">第一段落有应用样式。</p>
	<p class="second">第二段落无法应用样式。</p>
	<p class="test">第三段落有应用样式。</p>
	<h2 class="test">标题无法应用样式。</h2>

</body>
</html>

HTML 代码二：

<!DOCTYPE html>
<html>
<head lang="zh-HK">
	<meta charset="utf-8">
	<title>test测试</title>
	<style type="text/css">
		[class$="test"]
		{
			background:#FF8329;
		}
	</style>
</head>
<body>

	<p class="first_test">第一段落有应用样式。</p>
	<p class="second">第二段落无法应用样式。</p>
	<p class="test">第三段落有应用样式。</p>
	<h2 class="test">标题无法应用样式。</h2>

</body>
</html>
  • E[attr|=“value”]选择器

CSS 代码：

<style src="text/css">
[lang|=en]{background:yellow;}
[class|=top]{background-color:yellow;}
</style>

HTML 代码:

<!DOCTYPE html>
<html>
<head>
	<style>
		[class|=top]
		{
			background:yellow;
		}
	</style>
</head>

<body>
	<h1 class="top-header">Welcome</h1>
	<p class="top-text">Hello world!</p>
	<p class="content">Are you learning CSS?</p>

	<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。</p>
</body>
</html>

结构伪类选择器：

注意：E 代表任意元素。

伪类选择器语法说明版本
:rootE:root{property:value;}选择匹配E 元素所有文档的根元素CSS2
:not(s)E:not(s){property:value;}选择匹配所有不匹配简单选择器s 的E 元素CSS3
:emptyE:empty{property:value;}匹配没有任何子元素（包括text节点）的元素ECSS3
:targetE:target{property:value;}匹配当前链接地址指向的E 元素CSS3
:first-childE:first-child{property:value;}匹配父元素的第一个子元素ECSS3
:last-childE:last-child{property:value;}匹配父元素的最后一个子元素ECSS2
:n-child(n)E:n-child(n){property:value;}匹配父元素的第n 个子元素ECSS3
:n-last-child(n)E:n-last-child(n){property:value;}匹配父元素的倒数第n 个子元素ECSS3
:only-childE:only-child{property:value;}匹配父元素的仅有的一个子元素ECSS3
:first-of-typeE:first-of-type{property:value;}匹配同类型中的第一个同级兄弟元素ECSS3
:last-of-typeE:last-of-type{property:value;}匹配同类型中的最后一个同级兄弟元素ECSS3
:only-of-typeE:only-of-type{property:value;}匹配同类型中的唯一一个同级兄弟元素ECSS3
:nth-of-type(n)E:nth-of-type(n){property:value;}匹配同类型中的第n 个同级兄弟元素ECSS3
:nth-last-of-type(n)E:nth-last-of-type(n){property:value;}匹配同类型中的倒数第n 个同级兄弟元素ECSS3

其中，E:nth-child(n)中的参数n，可以是一个数字，可以是关键字odd或even，可以是公式2n 或 2n-1等，n的索引起始值为1。

状态伪类选择器：

伪类选择器语法说明版本
:linkE:link{property:value;}设置未访问的链接CSS1
:visitedE:visited{property:value;}设置已访问的链接CSS1
:hoverE:hover{property:value;}设置光标移动到链接上时CSS1/CSS2
:activeE:active{property:value;}设置选定的链接CSS1/CSS2
:focusE:focus{property:value;}设置元素在成为焦点（onfocus事情发生）时的样式CSS1/CSS2
:checkedE:checked{property:value;}匹配表单上处于选中状态的元素E (radio 和 checkbox)CSS3
:enabledE:enabled{property:value;}匹配表单上处于可以状态的元素ECSS3
:disabledE:disabled{property:value;}匹配表单上处于禁用状态的元素ECSS3

伪元素选择器：

伪类选择器语法说明版本
:first-letter/::first-letterE :first-letter{property:value;}设置对象内的第一个字符的样式CSS1/CSS3
:first-line/::first-lineE :first-line{property:value;}设置对象内的第一行的样式CSS1/CSS3
:before/::beforeE :before{property:value;}设置在对象前发生的内容，与content 属性一起用CSS2/CSS3
:after/::afterE :after{property:value;}设置在对象前发生的内容，与content 属性一起用CSS2/CSS3
::selectionE ::selection{property:value;}设置在对象被选择时的颜色CSS3
cbkting
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html&css实验4.css子女选择器
I feel lost
04-05 773
这次实验主要熟悉css中的后代选择器：nth-child,nth-of-type ,  >, (空格), + 之类的用法： 复合选择器： 后代选择器： p span {font-size: 14px;} 选择p元素的所有子孙元素中的span元素 子女选择器： p>span {font-size: 14px;} 选择p元素的所有子女元素中的span元素 组合选择器： p#star
CSS选择器总结（代码实例+执行效果图）
Leeon的博客
11-22 5705
CSS样式选择器代码实例： 1、标签选择器 2、类选择器 3、ID选择器 4、子选择器 5、包含选择器 6、通用选择器 7、伪类选择器
CSS选择器总结
进击的Coder
03-02 523
CSS选择器总结 一、基本选择器 1.1、标签选择器 标签属性和值用:隔开，定义多个属性的时候使用;隔开 标签选择器作用于html标签 /* 标签{属性:值} */ div{ font-size: 28px; } 1.2、类选择器 类选择器是被通过class的方式调用 一个标签可以同时调用多个类选择器，用空格隔开 多个标签可以同时调用同一个类选择器 /* .类名...
CSS：选择器 / 14种类型
最新发布
snowball的博客
07-06 2977
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
CSS 中的选择器总结
huangxy10的专栏
11-12 1262
主要应用的选择器就三类：元素选择器，ID选择器，类选择器。 选择器的结合关系有三种：后代结合、子元素结合、相邻兄弟结合。 元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如： h1 {color:red; font-size:14px;} ID选择器，以元素的唯一ID作为选择器标志。如： #red {color:red;} #green {colo
CSS选择器总结~
mango_12345的博客
05-04 1061
  在前端页面中，CSS起到了对html骨架的装饰作用。通过使用 CSS 我们可以大大提升网页开发的工作效率，同时能够控制多重网页的样式和布局。CSS的基本语法为： 选择器 {属性：属性值；属性：属性值} <style> p { color:red; text-align:center; } </style> 一般将style标签放置在head标签中 CSS的创建方法有以下三种： 外部样式表 档样式需要用到很多页面上时，可以通过link或@import引入外部样式文件
css选择器总结！
qq_34740408的博客
12-25 238
1、基本选择器 *、element、class、id 2、多元素组合选择器(E,F指element) E,F 多元素选择器，用逗号分开，同时匹配E和F！ E F 后代元素选择器，用空格隔开，指所有后代元素！ E>F 子元素选择器，用>隔开，指第一代后代元素！ E+F 相邻元素选择器，用+隔开，指紧接着E后的另一个元素！ E~F css3同级元素通用选择器，用~隔开，指匹配任何在E元素
CSS中的选择器种类总结及效率比较
09-24
CSS选择器是根据特定规则选中页面元素的方法，它们的种类繁多，不同的选择器类型具有不同的特性和用途，同时也伴随着性能上的差异。在本文中，我们将对CSS中的选择器种类进行总结，并对它们的效率进行比较。 首先，...
CSS3选择器总结CSS3选择器总结
11-05
CSS3选择器总结 CSS（层叠样式表）是用于控制网页样式和布局的一种技术。随着互联网的发展，CSS规范也在不断更新。CSS3作为最新版本的CSS，引入了许多新的选择器。选择器是CSS中用来指定哪些HTML元素应该被特定样式...
关于CSS选择器优先级的判断题附结果截图
09-25
总结一下，CSS选择器优先级的计算对于确定元素的最终样式至关重要。在实际应用中，应尽量避免使用高优先级选择器来减少样式的冲突，提高代码的可读性和维护性。理解并熟练运用选择器优先级能够帮助开发者更有效地...
关于css选择器的总结
huan的博客
07-26 387
关于css选择器的总结 css选择器大体上可以分为三种分别是：简单选择器、属性选择器还有伪类选择器。 （一）简单选择器中可以通过三种分类：id、class、type，这三种选择器分别是按重要性递减来排序，id选择器可以视为身份证，class和type都可以当成分类，这就说明id可以当成唯一标识符， 在相同的分量时：在相同规则时，后加载的会覆盖先加载的规则 。 （二）属性选择器是指根据
CSS选择器学习小结
weixin_33881050的博客
01-12 185
前言： 半途出家做Front End，以前只是大概知道点，现在就必须从头把css好好看看啦，呜呜~~~~~~ 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器，匹配任何元素 2. E 标签选择器，匹配所有使用E标签的元素 3. .info class选择器，匹配所有class属性中包含info的元素 4. #f...
CSS3选择器的总结
读心悦
01-26 397
CSS3选择器分类 css3常见常用的选择器 选择器 类型 说明 * 通配选择器 选择文档中所有的HTMl元素 E 元素选择器 选择指定类型的HTMl元素 ...
CSS选择器详细总结
weixin_30414635的博客
06-29 126
一、基本选择器序号选择器含义1.*通用元素选择器，匹配任何元素2.E标签选择器，匹配所有使用E标签的元素3..infoclass选择器，匹配所有class属性中包含info的元素4.#footerid选择器，匹配所有id属性等于footer的元素实例： * { margin:0; padding:0; } p { font-size:2em; } .info { background...
CSS选择符总结
weixin_34234823的博客
11-03 120
本文简单全面地介绍CSS中的各种类型的选择符。包括 上下文选择符、ID和类选择符、属性选择符、伪类、伪元素等。 我的博客原文链接：anytimekaka.github.io/archivers/c… 上下文选择符 一般上下文选择符： article h1 em {color:green;} //选中的em 必须有一个祖先是h1，后者进而还要有一个祖先是article复制代码子选择符：label1&...
HTML&CSS实验(3)---掌握CSS选择器的使用方法
weixin_30719711的博客
04-09 371
【实验题目】HTML&CSS实验(3) 【实验目的】掌握CSS选择器的使用方法。 　　　　　　　　　　　　　　----------------------个人作业，如果有后辈的作业习题一致，可以参考学习，一起交流，请勿直接copy 【调试工具】浏览器和编辑器。三种可选编辑方式： (1) 本地调试：记事本 (2) 在线调试：http://172.18....
30个必知CSS选择器总结：提升前端开发效率
本文档总结了30个在CSS开发中不可或缺的选择器，帮助开发者提升编写样式表的效率和精确度。首先，我们介绍了几种常见的选择器类型： 1. 全浏览器支持的选择器： - 通配符选择器(*)：虽然早期用于清除默认样式，但...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值