CSS选择器

2024-02-05 12:15:10

格式	名称	描述
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>

光标悬停在百度上的效果

码农公寓

相关文章