CSS3 新增选择器
CSS3 新增选择器
结构(位置)伪类选择器(CSS3)
- :first-child :选取属于其父元素的首个子元素的指定选择器
- :last-child :选取属于其父元素的最后一个子元素的指定选择器
- :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型
- :nth-last-child(n) :选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。 n 可以是数字、关键词或公式
-
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
属性选择器
选取标签带有某些特殊属性的选择器 我们成为属性选择器
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /* class^=font 表示 font 开始位置就行了 */
color: pink;
}
div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */
color: skyblue;
}
div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */
color: green;
}
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
input[type=text]
div[class*=tao]
伪元素选择器(CSS3)
- 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样式展现的行为,因此被称为伪元素。是伪元素在html代码机构中的展现,可以看出无法伪元素的结构无法审查
注意
伪元素:before和:after添加的内容默认是inline元素**;这个两个伪元素的content
属性,表示伪元素的内容,设置:before和:after时必须设置其content
属性,否则伪元素就不起作用。
CSS3 新增选择器的更多相关文章
- 认识CSS3新增选择器和样式
前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...
- CSS系列:CSS3新增选择器
1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...
- CSS选择器及CSS3新增选择器
转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...
- 利用css3新增选择器制作背景切换
之前写css3的时间都是捡项目需要的来用,没有系统的学习过,这几天好好的补了一下css3的知识,真的获益匪浅!觉得新增的那些选择器是有用至极的!今天就来所这几天的所学做一个点击标签切换背景的效果,是纯 ...
- css3新增选择器
1. img[alt]:匹配页面标签中任意一个含有alt属性的标签 2. 匹配开头:img[alt^="film"] 匹配包含内容:img[alt*="film" ...
- CSS3–1.css3 新增选择器
1.后代级别选择器 2.同辈级别选择器 3.伪类选择器 4.属性选择器 5.UI伪类选择器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- CSS3新增选择器:伪元素选择器
一. ::first-letter 第一个字 二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...
- CSS3 新增选择器:伪类选择器和属性选择器
一.结构(位置)伪类选择器( : ) 1.:first-child 2.:last-child 3.:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) &l ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
随机推荐
- vue定义data的三种方式与区别
在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...
- InnoSetup跨脚本传参数
需求:在a.iss脚本传递参数给b.iss 举例: a.iss:传程序安装路径给b.iss Parameters: /Path={app} b.iss:接收a.iss传过来的安装路径 DefaultD ...
- Flask 教程 第八章:粉丝
本文翻译自The Flask Mega-Tutorial Part VIII: Followers 这是Flask Mega-Tutorial系列的第八部分,我将告诉你如何实现类似于Twitter和其 ...
- ElementUI项目中怎样引用Jquery
场景 使用ElementUI的快速开始的项目模板搭建Element项目后, 要在vue页面中使用jquery的语法. 这里直接使用$.ajax会提示$找不到. 注: 博客:https://blog.c ...
- kmeans均值聚类算法实现
这个算法中文名为k均值聚类算法,首先我们在二维的特殊条件下讨论其实现的过程,方便大家理解. 第一步.随机生成质心 由于这是一个无监督学习的算法,因此我们首先在一个二维的坐标轴下随机给定一堆点,并随即给 ...
- Pandas:DataFrame数据选择方法(索引)
#首先创建我们的Series对象,然后合并到dataframe对象里面去 import pandas as pd import numpy as np area=pd.Series({,,,}) po ...
- iOS事件传递和事件响应者链 20170810
一.事件响应者链 事件传递和事件响应链 区别 事件的传递和响应的区别: 事件的传递是从上到下(父控件到子控件),事件的响应是从下到上(顺着响应者链条向上传递:子控件到父控件. 引出 当我们手指触摸屏幕 ...
- Spring Boot 2 使用Servlet、Listener和Filter配置
开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1.8 新建一个名称为demo的Spring Boot项目. 一.使用Servlet配置 1.修改启动类 Demo ...
- python列表转换为字符串
对于非纯字符串组成的列表,需要使用map(str, 列表)转换,纯字符串组成的列表则不需要转换 list1 = [1, 2, 3, 4, 5]c = ','.join(map(str,list1))p ...
- vue项目中引入特殊字体
特殊字体指的是默认电脑中没有的 1.下载字体 2.新建文件夹font,把字体放进去 3.新建font.css 4.使用@font-face设置字体 @font-face { font-family: ...