常用选择器`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
id选择器
-通过元素的id属性值选中唯一的一个元素-语法:
#id属性值{(}
*/
/*
类选择器
-通过元素的class属性值选中一组元素
-语法:
.class属性值{}
*/
/*
选择器分组(并集选择器)
-通过选择器分组可以同时选中多个选择器对应的元素
-语法:选择器1,选择器2,选择器N{门l
*/
/*
通配选择器
-他可以用来选中页面中的所有的元素
-语法:*{}
*{
color: red;
}
*/
/*
复合选择器（交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:
-选择器1选择器2选择器N{}
为拥有class p3 span元素设置一个背景颜色为黄色
span.p3{
background-color: yellow;
}
对于id选择器来说，不建议使用复合选择器
*/
#p1 {
font-size: 20px;
}
.p2 {
color: red;
}
.hello {
font-size: 50px;
}
</style>
</head>
<body>
**<!--
我们可以为元素设置class属性，
class属性和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->**
<h1>悯农</h1>
<p id="p1">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2 hello">锄禾日当午</p>
<p>锄禾日当午</p>
</body>
</html>
复合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*将class为red的元素设置为红色（字体）*/
.red{
color: red;
}
/*将class为red的div字体大小设置为30px*/
/*
交集选择器
作用:选中同时复合多个条件的元素
语法:选择器1选择器2选择器3选择器n{}
注意点:
交集选择器中如果有元素选择器,必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.a.b.c{
color: blue;
}
/*
选择器分组（并集选择器)
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{}
*/
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>
</body>
</html>
关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为div的子元素span设置一个字体颜色红色
(为div直接包含的span设置一个字体颜色)
子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素>子元素
*/
/*
div.box>span {
color: orange;
}
*/
/*
后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先后代
*/
/*
div span{
color: skyblue;
}
*/
/*
选择下一个兄弟
语法:前一个+下一个
选择下边所有的兄弟
语法:兄 ~ 弟
*/
p+span{
color: red;
}
</style>
</head>
<body>
<!--
父元素
-直接包含子元素的元素叫做父元素子元素
-直接被父元素包含的元素是子元素祖玫元素
-直接或间接包含后代元素的元素叫做祖先元素-一个元素的父元素也是它的祖先元素
后代元素
-直接或间接被祖先元素包含的元素叫做后代元素-子元素也是后代元素
兄弟元素
-拥有相同父元素的元素是兄弟元素
-->
<div class="box">
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
<span>
我是div外的span元素
</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素的元素
*/
/*
p[title]
p[title=abc]
p[title^=abc]
p[title$=abc]
*/
p[title*=abc]{
color: orange;
}
</style>
</head>
<body>
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="hellloabc">儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
将ul里的第一个li设置为红色工
*/
/*
伪类（不存在的类,特殊的类)
-伪类用来描述一个元素的特殊状态
比如:第一个子元素、被点击的元素、鼠标移入的元素...
·伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(()选中第n个子元素
特殊值:
n 第n个 n的范围0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
:first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
- :not()否定伪类
-将符合条件的元素从选择器中去除
*/
/*要用:first-of-type，因为第一个元素是span*/
/*
ul > li:first-child{
color: red;
}
*/
ul > li:not(:nth-of-type(3)){
color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<span>我是第一个span</span>
<li>第0个 </li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置)
伪元素使用 ::开头
::first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
*/
p::first-letter {
font-size: 50px;
}
p::first-line {
background-color: yellow;
}
p::selection {
background-color: greenyellow;
}
/*
::before元素的开始
::after元素的最后
- before和 after必须结合content属性来使用
*/
div::before{
content: 'abc';
color: red;
}
div::after{
content: 'abc';
color: blue;
}
</style>
</head>
<body>
<div>Hello Hello How are you</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi veritatistempore laborum nemo ipsa itaque optio.
ld odit consequatur mollitia excepturi, minus saepenostrum vel porro.
</p>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
