选择器
1.结构选择器
1.1后代选择器
这个选择器可以选中content中所有的a标签,并对标签a应用相应的样式
<style>
.content a{
font-size: 30px;
}
</style>
1.2子元素选择器
这个选择器可以选中
所有的子元素a,也就是直接后代,下下代都不行。
<style>
.content > a{
font-size: 30px;
}
</style>
2.并选择器
将相同的样式放在一起,中间用逗号隔开。
.div1,.div2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid blue;
}
.div2{
border: 1px solid red;
}
3. 通配符选择器
通配符选择器可以选中页面中页面所有的标签,可以把一些默认的属性给清空。
使用方式:*{}
注意:通配符选择器对页面所有的元素都会设置对应的样式,而是实际上呢,有很多元素默认是不带任何的样式的。
4.兄弟选择器
使用方式 类名 +/~标签名{}
~会选中他所有的弟弟;+会选中最近的弟弟
5.伪类选择器
条件一、根据元素不同的状态,自动选择不同的样式
或 条件二、直接添加一个class(类),给这个class设定特殊样式
下面是一些简单的伪类选择器
li:first-child、
a:hover:鼠标滑过的是有添加样式
a:active:被激活的时候添加样式。点击那一时刻(按住鼠标左键不放)
a:link:链接地址未被访问时候添加的状态,必须设置href属性
a:visited:链接地址点击之后添加的样式,必须设置href属性
input:focus:拥有键盘输入获取焦点时候添加的样式
2、伪元素选择器
(1)需要设置特殊效果的内容放到一个元素(标签)里面span
(2)在添加一个class,对class设置特殊样式
p:first-line、p:first-letter、p:before、p:after
总结
和规律:使用添加元素的方法实现结果的,就叫伪元素选择器;使用添加class类的方法实现结果的,就叫伪类选择器。
下面这种就是通过添加class实现的,所以叫伪类选择器
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:first-child{
color: red;
}
.c{
color: red;
}
</style>
</head>
<body>
<h3>伪类的概念</h3>
<h5>第一种方法</h5>
<h6>今晚菜单</h6>
<ul>
<li>红烧排骨</li>
<li>西红柿鸡蛋</li>
<li>小鸡炖蘑菇</li>
<li>红烧肉</li>
</ul>
<h5>第二种方法</h5>
<h6>今晚菜单</h6>
<ul>
<li class="c">红烧排骨</li>
<li>西红柿鸡蛋</li>
<li>小鸡炖蘑菇</li>
<li>红烧肉</li>
</ul>
<p>结论:方法二通过一个 <strong>类</strong>来实现方法一的效果
所以方法一的选择器就做伪类选择器</p>
</body>
下面就是使用添加元素实现的叫做伪元素选择器
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p:first-letter{
font-size: 90px;
}
span{
font-size: 90px;
}
</style>
</head>
<body>
<h3>伪元素的概念</h3>
<h5>第一种方法:伪元素</h5>
<p>This is a test</p>
<h5>第二种方法:不使用伪元素,通过增加一个标签(元素)来实现</h5>
<p><span>T</span>his is a test</p>
<p>结论:方法二通过一个 <strong>元素</strong>来实现方法一的效果
所以方法一的选择器就做伪元素选择器</p>
</body>
通过以上代码,我们就能很好的区别伪类与伪元素的区别,更好的分辨。