css3-新增选择器

2020-01-02 本文已影响0人前端辉羽

本文目录

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的厉害之处：不仅仅是个选择器，而且是个能插入元素的选择器。