CSS选择器

最新推荐文章于 2022-05-12 14:02:04 发布

Sudley.su

最新推荐文章于 2022-05-12 14:02:04 发布

阅读量142

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/sudley/article/details/111132085

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

格式	名称	描述
a,b	Multiple Element Selector	同时选中a,b元素
a b	descendant selector	如果第二个选择器所选择的元素的一些祖先元素为第一选择器所匹配，那么它就会选择出那些满足该条件的，由第二个选择器所选择出的那些元素。使用后代组合因子的选择器称为后代选择器
a > b	child selector	仅当第二个选择器所匹配的元素是第一个选择器所匹配的元素的子节点时，该子元素选择器才会匹配那些子元素。
a + b	adjacent sibling selector	仅当第二个元素直接跟随第一个元素，且两者都是相同父element的孩子节点时，它匹配该第二个元素。
[a = b]	attribute selector	根据给定属性是否存在或属性的值匹配元素。
a:b	pseudo classes selector	伪类是一个添加到选择器的关键字，它指定所选元素的特殊状态。例如，当用户悬停在上面时，:hover可以用来改变元素的背景颜色等。
a :: b	pseudo element selector	CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。

<!DOCTYPE html>
<html>
	<head>
    	<style>
            h1,h4 {
               color:   Olive;
            }            
            ul li {
				color: red;
			}
            ul > li {
				background-color: yellow;
			}
            div + li {
				background-color: SkyBlue;
			}
            h1 + h2 {
				background-color: SkyBlue;
			}
            a[href="https://www.baidu.com"]{
            	font-size: 25px
            }
            a:hover{
            	background-color: red;
            }
            ul + h3::first-letter {
   				font-size: 2em;
			    color: red;
			}
            h3:first-letter {
   				font-size: 2em;
			}
        </style>
	</head>
	<body>
    	<h1>Heading a</h1>
		<h2>Heading b</h2>
        <ul>
  			<li>One</li>
			<li>Two!</li>
            <ol>
            	<div>This is a ol</div>
          		<li>One</li>
				<li>Two!</li>
				<li>Three</li>
        	</ol>
			<li>Three</li>
		</ul>
        <h3>Heading c</h3>
        <h3>Heading d</h3>
        <ol>
          	<li><a href="https://www.baidu.com">百度</a></li>
			<li><a href="https://google.com">谷歌</a></li>
        </ol>
        
	</body>
</html>

光标悬停在百度上的效果
在这里插入图片描述

Sudley.su

关注

0
点赞
踩
0

收藏

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

介绍CSS常用选择器（Multiple Element Selector | descendant selector | child selector | adjacent sibling selector | attribute selector | pseudo classes selector | pseudo element selector）
复制链接

扫一扫