最常用的选择器类型是类型选择器和后代选择器.类型选择器用来寻找特定类型的元素,比如段落或者标题元素.有时候也被称为元素选择器或简单选择器.
p{color:black}
h1{font-weight:bold}
后代选择器可用了来寻找特定元素或元素组的后代.另外还有ID选择器和类选择器.ID选择器用#替代,类选择器用.替代.
#id{}
<p><span id="id">Harry Knowles</span></p>
.class{}
<p><span class="class">Harry Knowles</span></p>
通用选择器
可能是所有选择器中最强大却最少使用的.作用就像通配符,它匹配所有的元素.用型号代替.最常用的操作就是去除浏览器的padding和margin
*{
margin: 0px;
padding: 0px;
}
子选择器
后代选择器可以选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素.
<div id="mu">
<p>Harry Knowles</p>
<div>
<p>Harry Knowles</p>
</div>
</div>
//对于以上的代码,写成子选择器则最终背景颜色变化的只有第一个p标签.
#mu>p{
margin-top: 10px;
background-color: #cccc00;
}
//但是写成这样,也就是后代选择器,两个都有效
#mu p{
margin-top: 10px;
background-color: #cccc00;
}
相邻同胞选择器 可以定位同一个父元素下某个元素之后的元素
直接看代码理解
<h2>这是一个标题</h2>
<p>Harry Knowles</p>
<p>Harry Knowles</p>
对于以上的代码如何用相邻同胞选择器让第一个p标签变色呢.
h2 + p{
margin-top: 10px;
background-color: #cccc00;
}
属性选择器
根据某个属性是否存在或者属性的值来寻找元素.如果属性有多个值,用空格分开
<h2 title="标题">这是一个标题</h2>
//使用属性选择器改变h2的背景颜色
h2[title]{
background-color: #cccc00;
}
-----------------------------------------------------华丽的分割线-----------------------------------------------------------------
第二章能看的东西就这么多.我觉得内容太少了就把我看视频的笔记拿出来给大家看看
下面给出属性选择器另外一些写法.
*= 包含XXX
^= 首字母为xxx
$= 结束字符xxx
一个示例
<h2 title="a">这是一个标题</h2>
<h2 title="bba">这是一个标题</h2>
<h2 title="ab">这是一个标题</h2>
//比如这个会使第一个h2的标签背景变色,其他不变,另外两个可以试一下
h2[title~="a"]{
background-color: #cccc00;
}
结构性伪类选择器
first-line 某个元素的第一行
first-letter:某个元素首个字母
<p>这是第一行的内容<br/>这是第二行</p>
//这里p元素的第一个标签背景会改变,第二个不变
p:first-line{
background-color: #cccc00;
}
//这里第一个p元素的第一个字符会变成红色
p:first-letter{
color: #dc143c;
}
x:before{ //在某元素之前添加
content:
}
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
//这里将会在ul列表的上方添加一个"加的内容"的文字
ul:before{
content: "加的内容";
}
其他一些选择器
root:绑定到页面的根元素中 如果设置了root,那么body的作用域就只有内容区域,反之body沾满全屏()
not:如果想对某个结构元素使用样式,但想排除这个结构下面的子结构元素
empty:指定当前元素中内容为空白时使用的样式
x代表元素名称
x:first-child{}
x:last-child{}
x:nth-child(position){} 从上往下数 包括父级和子级 position可以是数字也可以是奇偶数等等可以表示位置的词语奇数(odd) 偶数(even)
x:nth-of-type(){}
x:nth-last-child(position){}从下往上数
nth-last-of-type 同上类似
这里写出root,not,x中的第三个,第四个示例.其他的一看便知.
root:
//以下的代码将会看到整个屏幕背景是黄色,body所设置的图片背景只会作用在<div>所占的空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root{
background-color: fuchsia;
}
</style>
</head>
<body background="1.jpg">
<div>哈喽,root</div>
</body>
</html>
not
<div><p>哈喽,root</p></div>
<div><h1>哈喽,root</h1></div>
<div><h2>哈喽,root</h2></div>
//以下代码将会使除了p标签之外的其他标签变色
div *:not(p){
color: fuchsia;
}
**x:nth-child(position){} **
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//以下代码将会使第二个li标签也就是2的文字变色.
//PS:一开始我以为X的部分要写ul,并且position从0开始.这里并不是,锁着这里是有先决条件的.必须是同一个父元素下.
li:nth-child(2){
color: fuchsia;
}
x:nth-of-type(){}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//以下代码将会使li标签中奇数li标签字体变色.偶数为even.这里括号的条件并不局限于奇数和偶数
li:nth-of-type(odd){
color: fuchsia;
}
选择器的内容大概就这些.
