初学入门 html/css 的有用知识点简单总结（五）

                                       详细介绍css中的选择器

 

CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计，我们能轻而易举的改变颜色、布局、制作出漂亮的影音效果等等，css中的选择器用于选择你想要的元素的样式的模式。我给大家归纳了常用的20个CSS选择器，希望你能够喜欢我的总结。

 

1、*{}  ：通用选择器

针对初学者来说，我们还是从简单的开始学起，首先我们来认识下通用选择器，通用选择器，可以匹配页面所有的元素。让页面中所有的元素都具有相同的属性。

* {
 margin: 0;
 padding: 0;
}

 

2、#div：ID选择器

ID选择器的开头使用#号，但是你在使用的时候，需要谨慎。id选择器比较局限，不能重用。

#container {
 width: 960px;
 margin: auto;
}

<div id='container'>
</div>

 

3、.div：类选择器

类选择器的开头用.（点）进行表示。与ID选择器的区别就是可以重用。定义多个元素的样式，好比按组进行归类，同一类的样式统一定义。如果把两个类串在一起，选择的就是同时具有两个类名的元素，类名的顺序则无所谓，比如 class="urgent warning" , css 选择器你也可以这样写 .warning .urgent。

.foot_logo img {
     width: 168px;
     height: 60px;
     margin-top: 20px;

 }

 

4、div p：后代选择器

后代选择器就是我们要选择在li元素中包含a标签的链接（不是所有的链接），取消下划线的默认样式，如果你的选择器看起来像X Y Z A B.error这样就错了。问问自己是否真的需要加入这么多负荷, 这样写的可读性也太差了。还有一个需要注意的，后代元素的层级问题，可能会很深。

li a {
text-decoration: none;
}

 

5、div：元素选择器

假如你想针对Html预定义的标签，比如类似：p,h3,em,a这些标签，我们可以快速为某类标签定义样式。如下段代码所示：

a { color: red; }
ul { margin-left: 0; }

 

6、div:visited and div:link ：链接伪类选择器

:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式，示例代码如下：

a:link { color: red; }
a:visted { color: purple; }

 

7、 X + Y：紧邻同胞选择器

若想选择同一个父元素中，相邻的同级别的元素，我们可以使用紧邻同胞选择器）。如想去掉紧跟在h1元素后的p元素的外边距：

h1 + p { margin-top:0 }

 

8、 div > p：子元素选择器

有时候我们并想选择所有的后代元素，而是想缩小范围，只选择一个元素的子元素，比如我们只想选择 #container>ul 定义id为container的div里的ul元素，而不是曾经更深的后代元素比如li里的ul。

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

 

div#container > ul {
background-color:red
}

在这种情况下选择的话，只能选择最邻近div_container的一个ul，改变此ul的一个背景颜色。

 

9、 div ~ p：后续同胞选择器

后续同胞选择器使用 ~ 表示，选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像，但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子，我们选择所有ul后面的P元素。

ul ~ p {
 color: red;
}

 

10、div[title]：简单属性选择器

如果想选择具有某个属性的元素，而不管属性的值是什么，我们可以使用简单属性选择器。例如想让带有title属性的链接标签才会被匹配，没有title属性的标签不会受到影响。你可以这么写代码：

a[title] {
 color: green;
}

 

11、div[href="foo"]：属性值选择器

我们学习了 X[title] 这样的简单属性选择器，如果你想对属性的值进行精准匹配如何做呢，不用担心，CSS为我们提供了精准的属性选择器，比如我们想把特定网址的链接变成绿色，如下代码所示：

a[href="http://www.qianduandaren.com"] {
color: #1f6053; /* green */
}

 

12、div[foo~="bar"]：匹配带有空格属性的值

 

波浪号可以选择带有空格的属性，接着上面的例子，比如我们的自定义属性data-info含有external，image 这两个值，并以空格隔开，html结构如下段代码所示：

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

接下来我们使用波浪号，进行选择其中的一个属性值，css代码如下：

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
 color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
border: 1px solid black;
}

 

13、div:checked：选中状态选择器

css单选按钮和复选按钮的默认样式很有限，如果定义个性化的选择后的状态样式，可以使用选中状态选择器：

input[type=radio]:checked {
 border: 1px solid black;
}

 

14、 Div:not(selector) 否定伪类选择器

能够快速选择不想选择的元素 ，如：

div:not(#container) {
 color: blue;
}

 

15、div::after 后置内容元素选择器

伪元素前置元素选择器::before 和 后置内容元素选择器 :: after 属于CSS的高级用法，常用于添加装饰符或者清除浮动：（注意此时的选择器在x后面跟的是两个   ：）

添加装饰符：

.header ul li:not(:last-of-type):after {
            content: "|";
            font-size: 6px;
            margin: 0 5px;
            color: #424242;
        }

after清除浮动：

<style>
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.floated {
  float: left;
}
</style>

<div class="clearfix">
<div class="floated">float a</div>
<div class="floated">float b</div>
<div class="floated">float c</div>
</div>

 

16、 div:nth-child(n) ：选择每第 n 个元素选择器

如果你要匹配一组序列元素每第几个元素，你可以使用 :nth-child 选择器满足这个需求，要注意的是nth-child指序列里的第n个元素，从1开始。如果你要匹配第二个元素，可以使用li:nth-child(2)。li:nth-child(2n)：按倍数进行选择。或者可以用even和odd代表偶数和奇数进行选择！

<style>
a:nth-child(1) {
  width: 72px;
  height: 40px;
  border：1px;
}
</style>

 

17、 div:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器

和 X:nth-child(n) ： 的选择机制一样，但是加了last之后，变成了从后往前进行选择。

<style>
div:nth-last-child(5) {
  width: 72px;
  height: 40px;
  border：1px;
}
</style>

（这里选择的是倒数第五个元素）

 

19、 div:hover 鼠标悬停状态选择器

常用于给页面中的a标签添加在鼠标浮动到a标签的时候显示下划线，让页面更加美观：

 a:hover {
            color: #ff6700;
            text-decoration: underline;
        }

 

20、div[href$=".jpg"]：匹配属性值结尾的选择器

比如我们将要匹配所有指向以jpg结尾的图片链接的文本以设置下划线，要记住的是这些样式对gif和png结尾的图片链接是无效的。如下段代码所示：

a[href$=".jpg"] {
 text-decoration: underline;
}