CSS选择器分类（有例⼦⾮常全）1.基础选择器
单个选择器组成
1）标签选择器
指⽤HTML标签名称作为选择器，为页⾯中某⼀类标签指定统⼀的CSS样式。
p{
color: green;
}
div{
color: pink;
}
缺点：不能设计差异化样式
2）类选择器（开发最常⽤）
差异化选择不同的标签，单独选择⼀个或者某⼏个标签
⼝诀：样式点定义，结构类调⽤
注意
1. 不能⽤标签当类名
2. 可以使⽤中横线
3. 不要使⽤纯数字，中⽂定义类名
4. 命名要有意义
.red{
color: red;
}
.
green{
color: green;
}
.blue{
color: blue;
}
.yellow{
color: yellow;
}
<ul>
<li class="red">格兰芬多</li>
<li class="green">斯莱特林</li>
<li class="blue">拉⽂克劳</li>
<li class="yellow">赫奇帕奇</li>
</ul>
多类名：给⼀个标签指定多个类名，从⽽达到更多的选择⽬的
1. 使⽤⽅式：⽤空格隔开
.red{
color: red;
}
.font35{
font-size: 35px;
}
<div class="red font35">格兰芬多</div>
2. 使⽤场景：可以抽取公⽤的样式，标签同时调⽤公有和私有样式
3）id选择器
⼝诀：样式#定义，结构id调⽤，只能调⽤⼀次，别⼈切勿使⽤
#pink{
color: pink;
}
<div id="pink">迈克尔杰克逊</div>
类选择器id选择器
⼈的名字，同⼀个名字可以被多⼈使⽤⾝份证号，唯⼀的，不能重复
可使⽤多次只能使⽤⼀次
在修改样式中使⽤最多⼀般⽤于页⾯唯⼀性的元素上，经常和JavaScript搭配使⽤4）属性选择器
根据标签的属性进⾏筛选的选择器
<body>
<main>
<article>
<h1 title="yooo ">Yooo*</h1>
<h1 title="yooo"id="">yooo</h1>
<h1 title="mjjj">Mjjj*</h1>
<h1 title="yooo-com">mjjj</h1>
<h2>alison</h2>
<aside>
<h2>andy</h2>
</aside>
<h2>ruby</h2>
</article>
</main>
</body>
body{
background-color: black;
color: white;
}
/
* 有title、id属性 */
h1[title][id]{
color: orange;
}
/* 有title属性 */
h1[title]{
font-size: 50px;
}
/* title属性值是yooo */
h1[title="yooo"]{
font-style: italic;
}
/* title属性值以yooo开头 */
h1[title^="yooo"]{
font-weight: 400;
}
/* title属性值以com结尾 */
h1[title$="com"]{
color: olivedrab;
}
/* title属性值包含yooo */
h1[title*="yooo"]{
font-family:'Gill Sans','Gill Sans MT', Calibri,'Trebuchet MS', sans-serif;
}
/* title属性值包含独⽴的词yooo */
h1[title~="yooo"]{
text-decoration: line-through;
}
/* title属性值以yooo开始或者yooo紧接着-连接 */
h1[title|="yooo"]{
text-align: center;
}
5）通配符选择器
使⽤*定义，表⽰选取页⾯中所有元素
不需要调⽤，特殊情况才使⽤
*{
color: red;
}
<div>我的</div>
<span>我的</span>
<ul>
<li>我的</li>
</ul>
2.复合选择器
建⽴在基础选择器之上，对基本选择器进⾏组合形成的，更准确更⾼效。1）后代选择器（重要）
包含选择器，可选择⽗元素⾥的⼦元素。
⽗⼦元素⼀定使⽤空格隔开，修改的是⼦元素的样式。
ol li{
color: pink;
}
ol li a{
color: red;
}
.nav li a{
color: yellow;
}
<ol>
<li>我是ol的孩⼦</li>
<li>我是ol的孩⼦</li>
<li>我是ol的孩⼦</li>
<li><a href="#">我是li的孩⼦</a></li>
</ol>
<ul>
<li>我是ul的孩⼦</li>
<li>我是ul的孩⼦</li>
<li>我是ul的孩⼦</li>
</ul>
<ul class="nav">
<li>我是ul的孩⼦</li>
<li>我是ul的孩⼦</li>
<li>我是ul的孩⼦</li>
<li><a href="#">我是li的孩⼦</a></li>
</ul>
2）⼦选择器（重要）
只能选择某元素的最近⼀级⼦元素，选亲⼉⼦。
.nav>a{
color: red;
}
<div class="nav">
<a href="#">我是⼉⼦</a>
<p>
<a href="#">我是孙⼦</a>
</p>
</div>
使⽤>隔开
只选亲⼉⼦，孙⼦重孙⼦都不管
3）并集选择器（重要）
可以选择多组标签，同时为他们定义相同的样式
div,
p,
.pig li{
color: pink;
}
<div>熊⼤</div>
<p>熊⼆</p>
<span>光头强</span>
<ul class="pig">
<li>⼩猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
⽤逗号隔开
任何形式的选择器都可以成为并集选择器的⼀部分
4）兄弟选择器
<body>
text align center<main>
<article>
<h1>Yooo*</h1>
<h2>alison</h2>
<aside>
<h2>andy</h2>
</aside>
<h2>ruby</h2>
</article>
</main>
</body>
~选择同级标签，如下选择article的后代h1的所有h2兄弟
body{
background-color: black;
color: white;
}
article h1~h2{
color: orange;
}
+选择同级标签，如下选择article的后代h1紧贴的h2兄弟
body{
background-color: black;
color: white;
}
article h1+h2{
color: orange;
}
5）伪类选择器
为元素的不同状态或不确定存在的元素设置样式规则，如链接伪类、结构伪类等。使⽤冒号：隔开

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。