一、Css选择器有哪些
基本选择器(8种),伪元素选择器,伪类选择器
基本选择器包括:
1、元素选择器 5、包含选择器
2、属性选择器 6、子元素选择器
3、ID选择器 7、兄弟选择器
4、class选择器 8、选择器的组合
二、基本选择器:
1、元素选择器
语法:E{
}// 注:E代指 element(元素名称)
*{
} 注:*是元素选择器中的特例代表所有类型的元素
例如 常用的*{
margin:0;
padding:0
} 一般加在代码的第一句,用于取消所有浏览器自带的内外边距
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
则常用于将元素居于浏览器中央显示
2、属性选择器
E[attr属性]{}
设置body部分代码为
<div id="ID">id</div>
<div class="class">class</div>
<div id="ID">id</div>
<div id="ID">id</div>
<div class="class">class</div>
<div class="class">class</div>
<div id="ss">ss</div>
<div id="ssa">ssa</div>
<div id="assa">assa</div>
<div id="assasw">assasw</div>
<1>div[id]{} 这个选择器会选择带有id属性的div
div[id] {
font-size: 24px;
color: red;
margin: 6px;
}
效果如下图所示
<2>div[id^="ss"]选择id属性值的前缀为ss的div
div[id^="ss"] {
font-size: 24px;
color: red;
margin: 6px;
}
<3>div[id$="ss"]选择id属性值的后缀为ss的div
div[id$="ss"] {
font-size: 24px;
color: red;
margin: 6px;
}
<4> div[id*="ss"]选择id属性值内容包含ss的div
div[id*="ss"] {
font-size: 24px;
color: red;
margin: 6px;*
<5>div[id="ss"]选择id属性值为ss的div 这个等价于第三类id选择器中的div#ss{}
div[id="ss"] {
font-size: 24px;
color: red;
margin: 6px;
}
3、ID选择器
在上面的body中添加如下内容
<h1 id="ID">H1H1</h1>
语法:#id值{}
ID选择器是属性选择器的严格等于下的简化
将元素选择器改为下面的内容
#ID {
margin: 7px;
font-size: 25px;
color: aqua;
}
效果如下图所示
h1#id 选择更精确 注:元素选择器和id选择器结合使用时没有空格
若将选择器改为h1#id如下
h1#ID{}
则效果如下,可以看到只有h1标签并且值为ID的元素改变了样式
4、Class选择器
语法:.class名{}
.class {
margin: 7px;
font-size: 25px;
color: aqua;
}
效果如下
5、包含选择器
语法为...... 爷爷级 父级 子{} 嵌套性
body ul li a {
color: red;
}
<ul>
<li>
<a href="#">一个链接</a>
<div>
<a href="#">1314111111111</a>
</div>
</li>
</ul>
这句代码的意思是:去找<body> 下的<ul>标签下的<li>标签下的a链接,也就是“一个链接”四个字会变成红色。
但是这样其实并不准确,使用了上面的选择器后会出现这样的效果
聪明的你一定发现了,是因为<ul>标签下不仅有它的一个子元素<li>下的子元素a标签,而且它的一个孙元素<div>标签里面也有一个a标签。那有没有办法,让选择器准确指向内容为“一个链接”的a标签,这里就可以使用下面这个子元素选择器。
6、子元素选择器
语法:selector1>selector2>selector3{}
对上面的a标签使用下面的选择器
body>ul>li>a {
color: red;
}
可以看到,这种选择器,指向了body的子元素ul的子元素li的子元素内容为一个链接的<a>标签
body>ul>li>a{}
<ul>
<li>
<a href="">一级菜单</a>
</li>
<ul>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="">二级菜单</a>
</li>
<li>
<a href="二级菜单">二级菜单</a>
</li>
</ul>
</ul>
<ul>
<li>
<a href="一级菜单">一级菜单</a>
</li>
<ul>
<li>
<a href="二级菜单">二级菜单</a>
</li>
<li>
<a href="二级菜单">二级菜单</a>
</li>
<li>
<a href="二级菜单">二级菜单</a>
</li>
</ul>
</ul>
<ul>
<li>
<a href="一级菜单">一级菜单</a>
</li>
<ul>
<li>
<a href="二级菜单">二级菜单</a>
</li>
<li>
<a href="二级菜单">二级菜单</a>
</li>
<li>
<a href="二级菜单">二级菜单</a>
</li>
</ul>
</ul>
body>ul>li>a {
color: red;
font-size: 30px;
}
body>ul>ul>li>a {
color: black;
}
使用上面的选择器效果如下:
7、兄弟选择器
语法:selector~selector2{}
从selector1向下查找具有共同父级元素的selector2的元素
<style>
.Cpp~.php {
color: red;
font-size: 28px;
}
</style>
<body>
<span class="java">java</span>
<span class="php">php</span>
<span class="java">java</span>
<span class="php">php</span>
<span class="Cpp">C++</span>
<span class="php">php</span>
<span class="java">java</span>
<span class="php">php</span>
<span class="java">java</span>
<span class="php">php</span>
<span class="java">java</span>
<span> <span class="php">php</span></span>
</body>
效果如下
可以看到只有和Cpp处于同一父级下且位于其后面的类名为php元素生效了。
8、选择器的组合 selector,selector2,sele......
某几个选择器如果添加的样式相同,就可以合并来写,选择器之间用逗号隔开
div>a{
color:red
}
.gg{
color:red;
}
可以合并为 div>a,.gg{
color:red}