css选择器

css的选择器

1、基本选择器

id选择器、类选择器、通配选择器、群组选择器、层级选择器都是基本选择器，其中一般id选择器的优先级最高，类选择器次之，群组选择器和层级选择器要看具体使用什么选择器而定

2、伪类选择器

这是我要讲的重点，也是我以前比较疑惑的地方，伪类选择器并不改变DOM的内容，只是插入了一些修饰类的元素。伪类选择器我个人觉得它比较重于标签的一个状态，比如hover、link都是在特定的条件下才会出现的样式

3、伪元素选择器
伪元素的效果是通过添加一个实际的元素才能达到的。不用在特定的条件下才会出现效果，它的出现可以让我们实现一个标签三用，还可以使用before和after达到清除浮动的效果

4、下边让我们看看伪类和伪元素的妙用吧

1、常见伪类（link、hover、visited、active），也是我们通常所说的锚点伪类，我们对这四个伪类设置的时候一定要注意先后顺序，即爱恨原则，也就是要按照link-visited-hover-active，要不然有些伪类的效果就会看不到。
下边是一个实例

a{
     display: inline-block;
     width:200px;
     height:100px;
     background:pink;
 }
 a:link{
    font-size:16px;
 }
 a:visited{
     font-size:32px;
 }
 a:hover{
    font-size:20px;
 }
 a:active{
     font-size:40px;
 }
</style>

喜欢的童鞋们可以去github上下载源码查看结果

2、下边我要说说css3中新增的一些伪类，就是nth选择器，有

  • :first-child 选择某个元素的第一个子元素
  • :last-child 选择某个元素的最后一个元素
  • :nth-child() 选择某个元素的一个或者多个特定的子元素
  • :nth-last-child() 选择某个元素的一个或者多个特定的子元素
  • :nth-of-type()选择指定的元素

  • :empty 选择元素里边没有任何内容的元素

    我们下边对这些元素进行一一的介绍
    我们首先把li样式设置为下列的样式

      *{
 margin:0;
 padding:0;
 }
 ul{
     width:800px;
     height:50px;
     border:1px solid gray;
 }
 li{
     line-height:50px;
     width:50px;
     height:50px;
     text-align: center;
     border:1px solid gray;
     border-radius: 50%;
     list-style-type:none;
     float:left;
     margin-left:30px;
 }

 //html结构
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>


    1）first-child，选择某个元素的第一个子元素，比如我们想要下边的数字1背景色变为浅蓝色

    li:first-child{
    background:lightblue;
}


    2）last-child，选择某个元素的最后一个子元素，比如将最后一个li设置为粉红色

    li:last-child{
     background:pink;
 }


    3）nth-child，选择某个元素的某一个子元素，比如将第三个li设置为red

    li:nth-child(3){
    background:red;
}


    4）nth-last-child，从最后一个元素开始算，作用跟nth-child相似，比如我们将倒数第三个设置为蓝色

    li:nth-last-child(3){
    background:blue;
}


    5）nth-of-type，作用跟nth-child差不多，比如我们将1，3，5，7，9字体设置为黄色
    li:nth-of-type(even){

    color:yellow;

    }

    喜欢的可以联系我，非诚勿扰

Share
Comments