本文目录
- 1.属性选择器
- 2.伪类选择器（普通伪类、目标伪类、链接伪类）
- 3.伪元素选择器
1.属性选择器
E[attr] 匹配所有具有att属性的E元素，不考虑它的值,例如： input[name]，只要有name属性的input元素都会被选中，input [name]中间带空格则代表后代选择。
input[name]{
border:red solid 1px;
}
E[attr = val] 匹配所有attr属性值等于val的E元素 input[id=ipt2] 属性值一般不加引号，下面的代码会把id值为ipt2的input元素的边框设置成蓝色
input[id=ipt2]{
border:blue solid 1px;
}
E[attr ~= val],"~"包含的意思，只要属性值包含了val的E元素都会被选中
[title~=flower]
{
//title属性中包含单词 "flower" 的图片会获得黄色边框。
border:5px solid yellow;
}
E[attr ^= val],"^"以某个值开头的意思，只要属性值以val开头的E元素都会被选中
div[class^=test]
{
/*第三个div元素的背景会被设置成红色*/
background:red;
}
E[attr$=val],以某个值结尾的意思，只要属性值以val结尾的E元素都会被选中
<style>
div[class$=test]
{
/*第一个div的背景会被设置成蓝色*/
background:blue;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test_three">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
2.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{}
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式
另外需要注意的是，伪元素选择器
li（没有空格）:first-child li的父盒子中的第一个li元素
li（有空格）:first-child li里面的第一个元素
ul（有空格）li:first-child ul里面的第一个li元素
li（没有空格）:nth-child（even） li的父盒子中的偶数li元素
li（没有空格）:nth-child（odd） li的父盒子中的奇数li元素
（n）全部
（2n）偶数
（2n+1）奇数
（4n）4,8,12...
目标伪类选择器
:target目标伪类选择器 :选择器可用于选取当前活动的目标元素
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</body>
点击效果示意图：
点击了“跳转至内容1”.png
链接伪类选择器
- :link /* 未访问的链接 */
- :visited /* 已访问的链接 */
- :hover /* 鼠标移动到链接上 */
- :active /* 选定的链接 */
注意写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。 lv 包包 非常 hao
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
3.伪元素选择器
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
4、E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。
注意
伪元素::before和::after添加的内容默认是inline元素；默认的inline元素可以通过display转换为block或者是inline-block，然后可以设置height，width等样式，其实就相当于在原盒子的内部又创造出了新的盒子。**
利用伪元素插入图标字体可减少在html中放入太多杂乱无章的内容。
但实际运用中大多还是html中直接书写元素，因为伪元素存在兼容性问题。
伪元素::before和::after的厉害之处：不仅仅是个选择器，而且是个能插入元素的选择器。
网友评论