css选择器总结

最新推荐文章于 2024-06-20 20:15:37 发布

hackerbaseing

最新推荐文章于 2024-06-20 20:15:37 发布

阅读量93

点赞数

分类专栏： css 文章标签： Css1 选择器

本文链接：https://blog.csdn.net/hackerbaseing/article/details/89303297

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们直到在前端开发里面，css式一门很重要的语言，利用css也就是我们的层叠样式表，可以让我们的网页更加的漂亮.在前端开发里面css的选择器，布局,都式很重要的知识，今天就来总结下css的选择器的知识。和大家一起学习.

首先来介绍通配符选择器,就是选则所有的元素或者标签。比如下面的代码.

  *{
      margin:0px;
      padding:0px;
    }

通配符选择器式以星号开头的选择器。如上面的代码.

2.标签选择器，就是某一个具体的标签来设置它的样式。比如下面的代码.

  p{
    color:red;
    font-size:50px;
    font-family:微软雅黑;
    text-align:center;
  }

<p>hello world</p>

3.类选择器，每一个元素都有一个属性就是class属性.我们可以使用这个属性来设置类选择器.比如下面的代码.

<div class="data">这是第二个盒子</div>
.data{
    width:100px;
    height:100px;
    margin:10px;
    border-top:dotted;
    border-color:red;
    border-left:solid red;
    border-bottom:dotted green;
    border-right:solid red;
    color:red;
    outline-width:10px;
    outline-color:puple;
  }

4.id选择器，每一个标签都可以设置一个id属性，这个可以成为css的选择器，就是我们说的id选择器，这里要注意的就是

标签的id式不能重名的。来看看代码.

<div id="test">这是第一个盒子</div>
#test{
      width:100px;
      height:100px;
      border:2px solid red;
      color:gray;
      text-align:center;

    }

5.后代选择器，我们还是来看看代码吧


<p class="father">
    黑色
   <label class="child">蓝色
      <b>也是蓝色</b>
   </label>
</p>

<style>
.father.child{
   color:#0000CC;
}
</style>

我们可以看到后台选择器式依照元素的顺序来实现的，包在一个元素里面的元素称之为子元素.这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素

6.子选择器（>）表示的就是元素或者式标签的所处的位置关系.请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：

第一个元素才是它的孩子，后面的都不是。来看看代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #links a{
      color:red;
    }
    #links>a{
      color:blue;
    }  
  </style>
</head>
<body>
<p id="links">
<a href="#">Div+CSS教程</a>>
<span><a href="#">CSS布局实例</a></span>
<span><a href="#">CSS2.0教程</a></span>
</p>
</body>
</html>

子选择器就后代选择器的第一个第一个元素，后代选择器就是该元素下面的所有的元素.后代选择器通常使用空格隔开，子选择器通常使用大于号(>)隔开，两者哟u很大的差别.

7.后代选择器，在上面说过了，据不多说了。

8.伪类选择器，一般主要用在链接哪里,有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

比如下面的代码.

a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
line-height:20px;
color:#c00;
}

上面的代码就是i我们的承租选择器的代码.

10.同袍选择器.我们来看看代码吧.

<div id="test">
    <p class="hello">hello world</p>
    <p>hello hacker</p>
    <p>hello hacking again.....</p>
  </div>

.hello+p{
      color:red;
      font-size:50px;
      font-family:微软雅黑;
      line-height:30px;
      padding:5px;
    }

我们可以看到第一个p和第二个p都处于一个级别的元素上面，并且是相邻的，式同胞的元素。我们称之为同袍选择器,同袍选择器使用+来表示的。

11属性选择器，更具元素的属性来设置元素的选择器,称之为属性选择器.看看下面的代码.

[attr]
　　[title] {margin-left: 10px}
　　//选择具有 title 属性的所有元素；
　　[attr=val]
　　[title = 'this'] {margin-right: 10px}
　　//选择属性 title 的值等于 this 的所有元素
　　[attr^=val]
　　[title ^= 'this'] {margin-left: 15px}
　　//选择属性title的值以this开头的所有元素
　　[attr$=val]
　　[title $= 'this'] {margin-right: 15px}
　　//选择属性title的值以this结尾的所有元素
　　[attr*=val]
　　[title *= 'this'] {margin: 10px}
　　//选择属性title 的值包含 this 的所有元素
　　[attr~=val]
　　[title ~= 'this'] {margin-top: 10px}
　　//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔
　　[attr|=val]
　　[title |= 'this'] {margin-bottom: 10px}
　　//选择属性 title 的值等于this，或值以 this- 开头的所有元素