首页手记 css3基础之基本选择器

css3基础之基本选择器

标签：

Html5 JavaScript 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 class="news clearfix">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="news-pic.jpg" />
<p>some text</p>
</div>

点击查看更多内容