欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css选择器总结

程序员文章站 2022-05-01 17:05:37
...

我们直到在前端开发里面，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不支持，所以一般伪类都只会被应用在链接的样式上。

9.

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
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- 开头的所有元素

 

相关标签： Css1 选择器

上一篇： css选择器总结

下一篇： css选择器总结

推荐阅读