索鸟网

  1. 首页
  2. css3基础之基本选择器

css3基础之基本选择器


1,属性选择器
css3中继承了css2中的一般选择器,并且属性选择器有了通配符的概念

    1,   E[attr^ = "val"]{
    //选择元素E且有attr属性,并且属性是以val开头的所有元素;
    }
    2,   E[attr$="val"]{
    //选择元素E有属性attr属性,并且属性是以val结尾的所有元素;
    }
    3,   E[attr *="val"]{
    //选择元素E有属性attr属性,并且属性包含val的所有元素;
    }

2,结构性伪类选择器

1,根选择器   :root{}    
    :root{
//根选择器,相当于<html>
}
2, :not选择器   
input : not ( [ type = "submit" ] ) {
//选择input不是submit类型的标签
}     
3,  :empty选择器
//选择元素中没有任何内容的标签
div:empty{
display:none;
}
4,    :first-child选择器表示的是选择父元素的第一个子元素的元素E
ul>li:first-child{
//表示选择ul下的第一个li元素
}
5,   :last-child选择器选择的是元素的最后一个子元素。
ul>li:first-child{
//表示选择ul下的第一个li元素
}
6,  :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。
其中“n”是其参数,而且可以是整数值(1,2,3,4),
也可以是表达式(2n+1、-n+5)和关键词(odd、even),
但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,
选择器将选择不到任何匹配的元素。
ul>li:nth-child(2n-1){
//选择ul的第奇数位置的li元素
}
7,   :nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似,
只是这里多了一个“last”,所起的作用和“:nth-child(n)”选择器有所区别,
从某父元素的最后一个子元素开始计算,来选择特定的元素。
ul>li:nth-last-child(5){
//从最后一个开始计算,ul下的最后第五个li元素
}

3, :first-of-type选择器
“:first-of-type”选择器类似于“:first-child”选择器,
不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

.wrapper>div:first-of-type{
  background: orange;
//选择div的父元素下的第一个div元素
}

:nth-of-type(n)选择器
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,
不同的是它只计算父元素中指定的某种类型的子元素。
当某个元素中的子元素不单单是同一种类型的子元素时,
使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的
在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样,
可以是具体的整数,也可以是表达式,还可以是关键词。

.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
  background: orange;
//选择div的父元素下的第奇数位置的div元素,和父元素下的第偶数位置的p元素
}

last-of-type选择器
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的,
不同的是他选择是父元素下的某个类型的最后一个子元素。

.wrapper > div:last-of-type{
  background: orange;
//选择div父元素下的最后一个div元素
}

nth-last-of-type(n)选择器
“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的,
选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,
而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

.wrapper > div:nth-last-of-type(5){
  background: orange;
//选择div的父元素下的最后第五个div元素
}

4,表单选择器
在Web的表单中,有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态,比如输入框,密码框,复选框等。在默认情况之下,这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

input[type="text"]:disabled{
  box-shadow: none;
}
input[type="submit"]:enabled {
  background: #eee;
  border-color: #eee;
  color: #ccc;
}
input[type="radio"]:checked + span {
  opacity: 1;、
//选择类型为radio的被选的input相邻的span元素
}

::before和::after选择器
::before和::after这两个主要是给元素的前面或者后面插入元素,这两个常和“content”配合使用,使用的场景最多的是清除浮动

.clear:before,
.clear:after{
content: ".";
display:block;
height:0;
visibility:hidden;
//visibility可见性为隐藏
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;
}
.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }

.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }

<div >
<img src="news-pic.jpg" />
<p>some text</p>
</div>
相关标签: Html5 JavaScript CSS3

来源地址:http://www.imooc.com/article/20243 版权归作者所有!

相关教程

  • css3选择器css3选择器

    1:属性选择器, a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 2:根选择器 :root ==html 3:结构性选择器 input:not([ty
  • 基础选择器,CSS3选择器, 盒模型,浮动

    CSS新知识 CSS怎么学?有两个知识部分: 1、 选择器,怎么选择元素 2、 属性,样式什么,可以设置一些属性,完成网页的布局 1、 基础选择器 1.1 标签选择器 使用时会把所有的标签设置上该属性,不太安全,所以一般在初始化样式使用 不论藏多深多会被识别: 1.2 类选择器 1.3 ID选择器 选择符是# l 只能有字母、数字、下划线 l 必须以字母开头 l
  • 常用css3选择器

    <div > <p >1</p> <p >2</p> <p >3</p> <p >4</p> <p >5</p> </div> p{ width:40px; margin:8px au
  • css3 nth-child选择器

    css3 nth-child选择器 css3的nth-child选择器,乍看起来很简单,其实不是那么容易。 简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 <p> 元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数<p> 元素 p:nth-child(2n + 1)
  • JavaEE——CSS3选择器

    声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 CSS3选择器 选择器中的属性: 之前介绍过[ ]里可以定义属性或属性值,之后的标签中只要含有该定义的属性或属性值就会拥有该样式。所以继续介绍剩下的几种声明方式。 1.[attribute^=value],例如:[title^=”abc”],选择只
  • CSS3选择器总结(完整版)

    .class .intro 选择 class="intro" 的所有元素。 #id #firstname 选择 id="firstname" 的所有元素。 * * 选择所有元素。 element p 选择所有 p 元素。 element,element div,p 选择所有 div 元素和所有 p 元素。
  • jQuery 对象、基本选择器、筛选选择器

    DOM对象转化成jQuery对象 如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/h
  • jquery基础选择器,过滤性选择器

    **【jquery基础性选择器】** 1、#id选择器 2、element选择器 3、class选择器 4、*选择器 5、select1、select2、selectN选择器 6、ance desc选择器,返回子元素和孙元素 7、parent>child选择器,返回子元素 8、prev+next选择