CSS选择器

css是网站布局的基础,掌握好css选择器的应用,可以有效的提高开发效率和编码水平。下面我整理了一些css选择器,大家可以按需选择。

一、 * 通配符选择器

css选择器
css选择器

通配符选择器是比较常见的选择器了,经常用于css的重置样式表。它在css中优先级是最低的。

*{margin:0;padding:0;}

二、#id(id选择器)

id选择器是我们日常最常用的选择器之一,一般用于绑定js事件(至少我是在这样用的)。id选择器的优先级比较高,重用性差。每个页面只能存在一个同名的id选择器。

#content{padding:10px;background:red;}

三、.class(类选择器)

class类选择器是我们日常最常用的选择器之一,与id选择器的区别是类选择器可以选择多个元素,可以重用。一般用来编写css样式。

.m_content{margin:10px 5px 0 20px;width:100px;height:50px;}

四、A B (后代选择器)

后代选择器是我们日常最常用的选择器之一,后代选择器会选取其下所有匹配的子元素。所以并不是所有的情况下都适合使用,当然你可以结合类选择器实现功能。

.content div{text-align:center}
ul.list li{text-align:center};

五、A (标签选择器)

标签选择器同样常用于重置样式表,优先级比*高

a{color:red}

六、A:link A:visited A:hover A:active A:before

(伪类选择器)

  • link未被访问的样式
  • visted已被访问过的样式
  • hover鼠标经过的样式

这三种伪类选择器常用于链接。、

七、A+B(相邻元素选择器)

相邻元素选择器,下面代码中就会匹配在ul后面的第一个div,将段落内的文字颜色设置为红色。注意此处只能匹配一个元素。

ul+div{float:left}

八、A > B(子元素选择器)

A > B 只匹配A下面的子元素B,不会包含孙子辈的元素。

ul>li{float:left}

九、A ~ B(相邻元素选择器)

相邻选择器,与A+B类似,不同的是A~B匹配的是元素集合。

ul ~ p{background:red}

十、A[title]    B[title=” “](属性选择器)

属性选择器匹配的是所有带有中括号元素的A标签

a[url]{color:red}
a[title="点击此处"]{color:red}

十一、A[title*=””]  A[title^=””] (模糊匹配属性选择器)

  • *,表示模糊匹配。
  • ^,表示排除。
a[title*="lidada"]{color:red}

 

后续还会继续补充,如有推荐请在留言回复。