高级CSS样式选择器

CSS选择器,CSS样式选择器,CSS选择器详解,高级CSS选择器,高级CSS选择器参考手册,CSS选择器参考指南 我们知道CSS 2 开始引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单的说即在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。本文主要描述CSS样式表中选择器的一些用法，当然你可能已经对CSS样式选择器不在生疏，但是通过本文你将能更好的掌握CSS样式的一些高级选择器使用。 CSS是对网页设计师可用的最强大的工具之一，你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。本文向大家介绍一些常见的高级CSS样式选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。 在深入研究高级CSS选择器之前，理解CSS优先级是如何工作很重要，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题。当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。选择器的优先级别规则：一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100标示ID选择器的优先级。在本文中也会在相关选择器中进行标注。 一、基本选择器（兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera） *  通用元素选择器，匹配任何元素,在页面上的每一个元素上起作用 h4  标签选择器，匹配所有使用h4标签的元素.优先级仅仅比*高 .textbox  class(类)选择器，匹配所有class属性中包含textbox的元素，class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素 #mainWrapper  id选择器，匹配所有id属性等于mainWrapper的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？ 例如：
```css
*{margin:0;padding:0;} /*web设计者经常用它将页面中所有元素的margin和padding设置为0。 *选择符也可以在子选择器中使用*/

a{text-decoration:none;}

ul{color:red;}

#mainWrapper *{border-bottom:1px solid #ccc;}
/*上面的代码中会应用于id为container元素的所有子元素中。 除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源*/

层次选择器：
#content img {max-width: 600px;} /* 表示id为content时，下面的img元素最大宽度属性为600px（父选择器可以为类、Id选择器，子选择器也可以）*/

.line_tabel  tr{height:30px;} /* 表示table的class为line_tabel时，下面的tr元素height属性为30px  */

div input{background-color:red} /* 表示div下的input子元素（父选择器为元素） */

```

二、多元素的组合选择器/扩展选择器（兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera） E,F  多元素选择器/群组选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔,如div,span,img{}（值得注意的是兼容IE6+） E F  后代元素选择器--这也是我们最常用的一种选择器。要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的。匹配所有属于E元素后代的F元素，E和F之间用空格分隔（值得注意的是兼容IE6+） E > F  子元素选择器，匹配所有E元素的子元素F，与后代选择器E F不同的是，子选择器只对E下的直接子级F起作用 E + F  毗邻元素选择器，匹配所有紧随E元素之后的同级元素F(只匹配第一个元素) 例如：
```css
li a{
　　text-decoration:none;
　}
#去掉li下的所有a的下划线

ul + p{
　　color:red;
　}
#相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色(只匹配第一个元素)。

div#container > ul {
     border: 1px solid black;
　}

<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>
#子选择器。与后代选择器E F不同的是，子选择器只对E下的直接子级F起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲E > F是值得提倡选择器。
```

三、属性选择器（兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera） 属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。 CSS 2.1 属性选择器 （注意：由于博客程序问题，value值需要有双引号，下同） E[att]  匹配所有具有att属性的E元素，不考虑它的值。（注意：E元素在此处可以省略，比如 [cheacked] 。以下同）； E[att=value]  匹配所有att属性等于 value 的E元素，即：该属性有指定的确切的值； E[att~=value]  匹配所有att属性具有多个空格分隔的值、其中一个值等于 value 的E元素，即：该属性的值必须是一系列用空格隔开的多个值，(比如，class= title featured home )，而且这些值中的一个必须是指定的值 value ； E[att|=value]   匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、属性的值就是 value 或者以 value 开始并立即跟上一个 - 字符，也就是 value- 。(比如lang= zh-cn )； CSS 3 属性选择器 E[att^= value ]  属性att的值以 value 开头的元素，即：该属性的值以指定值开始。 E[att$= value ]  属性att的值以 value 结尾的元素，即：该属性的值包含指定的值(而无论其位置) E[att*= value ]  属性att的值包含 value 字符串的元素，即：该属性的值以指定的值结束。 例如：
```css
例1、匹配带有title属性的链接元素
a[title] {
 color: green;
　}

例2、匹配所有拥有href属性，且href为https://www.fity.cn的所有链接
a[href=https://www.fity.cn] {
     color: #1f6053; 
　}

例3、匹配data-info属性中包含“textimg”链接的字体颜色为红色。匹配data-info属性中包含“img”的链接设置黑色边框
<a href=path/to/image.jpg data-info=textimg img> Welcome to https://www.fity.cn </a> 
a[data-info~=textimg] {
 color: red;
　}
a[data-info~=img] {
 border: 1px solid black;
　}

例4、匹配href中包含 www.fity.cn 的所有链接
a[href*=www.fity.cn] {
     color: #1f6053;
　}

例5、匹配href中所有以http开头的链接 
a[href^=http] {
      background: url(path/to/external/icon.png) no-repeat;
      padding-left: 10px;
　}

例6、设定所有class属性值包含 article 并带 - 字符的div元素的背景色为#333
div[class|=article] {
  background-color: #333;
　}
```

四、 CSS 2.1中的伪类（兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera） E:first-child   匹配父元素的第一个子元素。 E:link  匹配所有未被点击的链接标签。 E:visited  匹配所有已被点击的链接标签。 E:active  匹配鼠标已经其上按下、还没有释放的E元素 E:hover  匹配鼠标悬停其上的E元素，即：当鼠标划过时E元素的样式。需要注意的是，在IE6中:hover只能用于链接元素。 E:focus  匹配获得当前焦点的E元素--最常用于表单元素 E:lang(c)  匹配lang属性等于c的E元素 例如：
```css
a:link{
　　color:yellow;
　}
#使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接

input:focus {
  background: #D2D2D2;
  border: 1px solid #5E5E5E;
　}
input:focus:hover {
  background: #C7C7C7;
　}
```

五、CSS 2.1中的伪元素/伪对象 [兼容性：IE6、IE7与IE8(怪异模式Quirks mode)不支持此伪元素，兼容浏览器IE9+、Firefox、Chrome、Safari、Opera] E::first-line  匹配E元素的第一行 E::first-letter  匹配E元素的第一个字母 E::before  在E元素之前插入生成的内容 E::after  在E元素之后插入生成的内容 例如：
```css
h1:after {
　　content:url(/i/logo.gif);
　}
#上面的代码实现了在h1标题的后面显示一张图片。
```

六、CSS 3的同级元素通用选择器（兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera） E ~ F 相邻选择器，与前面提到的E+F不同的是，E~F匹配与E相同级别的所有F元素，而E+F只匹配第一个。 例如：
```css
.article p ~ ul {
 color:red;
　}
#上面的代码设定所有的特定div属性为article里面并且跟在p标签后面的ul标签的字体颜色为红色
```
七、CSS 3中与用户界面有关的伪类（兼容浏览器：IE9+、Firefox、Chrome、Safari） E:enabled   匹配表单中激活的元素(比如，文本输入框)和 checked 或unchecked 状态(radio单选按钮和checkbox复选框) E:disabled  匹配表单中禁用的元素(同上) E:checked  匹配处于选定状态的界面元素(同上) E::selection   定义用户鼠标已选择内容的样式 例如：
```css
例1、设定任意一个禁用的(disabled)文本框使用浅灰色的背景和虚线边框呈现
input:disabled {
 border:1px dotted #999;
 background:#F2F2F2;
　}

例2、匹配所有处于选定状态的单选radio，设置1px的黑色边框
input[type=radio]:checked {
      border: 1px solid black;
　}

例3、设定让所有选中的复选框有个左边距(这样就可以在众多的复选框中很容易认出来)
input[type= checkbox ]:checked {
  margin-left: 15px;
　}

例4、设定了段落中第一个字母的样式
p::first-letter {
      float: left;
      font-size: 2em;
      font-weight: bold;
      font-family: cursive;
      padding-right: 2px;
　}

例5、设定了段落中第一行的样式
p::first-line {
      font-weight: bold;
      font-size: 1.2em; 
　}
```

八、CSS 3中的结构性伪类（兼容浏览器：IE9+、Firefox、Chrome、Safari） E:root   匹配文档的根元素，对于HTML文档，就是HTML元素 E:nth-child(n)  匹配其父元素的第n个子元素，第一个编号为1 E:nth-last-child(n)   匹配其父元素的倒数第n个子元素，第一个编号为1 E:nth-of-type(n)   与:nth-child()作用类似，不同的是它匹配的不是某个序列元素，而是元素类型 E:nth-last-of-type(n)  与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 E:last-child  匹配父元素的最后一个子元素，等同于:nth-last-child(1) E:first-of-type  匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) E:last-of-type   匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) E:only-child  匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)，这个伪类用的比较少 E:only-of-type  匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) E:empty  匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 例如：
```css
例1、整体页面灰色背景
html:root {
　　background-color:#DCDCDC;
　}

例2、匹配页面中出现的第三个元素，样式：○○●○○○○○○○
ul:nth-of-type(3) {
      border: 1px solid black;
　}

例3、只选择第五个元素，样式：○○○○●○○○○○
li:nth-child(5){
  color: green;
}#要选择第一个元素，你可以使用:first-child，或者你也可以改下上面的例子来实现。

例4、只选择最后一个元素，样式：○○○○○○○○○●
li:last-child {
  color: green;
　}

例5、选择除了前面的五个之外的所有元素。如果有超过10个元素，它将会选中超过5个的剩下所有元素，样式：○○○○○○●●●●
li:nth-child(n+6){
  color: green;
　}

例6、只选择前面的5个元素，样式：●●●●●○○○○○
li:nth-child(-n+5){
  color: green;
　}

例7、从开始的那个，选择每第四个，例如：●○○○●○○○●○
li:nth-child(4n-7) {
  /* or 4n+1 */
  color: green;
　}

例8、选择奇数或者偶数
li:nth-child(odd){  //奇数，例如：●○●○●○●○●○
  color: green;
　}

li:nth-child(even){  //偶数，例如：○●○●○●○●○●
  color: green;
　}

tr:nth-child(2n) {   //匹配第偶数个元素
      background-color: gray;
　}

例9、匹配倒数第二个元素，例如：○○○○○○○○●○
li:nth-last-child(2){
  color: green;
　}

例10、匹配标签div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
div p:only-child {
      color: red;
　}

例11、匹配仅有一个列表项的列表元素
li:only-of-type {
      font-weight: bold;
　}
```

九、CSS 3的反选伪类/否定伪类选择器（兼容浏览器：IE9+、Firefox、Chrome、Safari） E:not(value)   否定伪类选择器用来在匹配元素时排除某些元素,匹配不符合当前选择器的任何元素 例如：
```css
例1、设定除了id为container的div元素字体颜色为blue
div:not(#container) {
 color: blue;
　}

例2、设定你的article的div中的所有段落(p)有比较大的字体，除了表示时间和日期的段落
.article p:not(.date) {
  font-size: 13px;
　}
```

十、CSS 3中的 :target 伪类（不支持IE全系列） E:target  匹配文档中特定 id 点击后的效果 例如：
```css
h4:target {
 background: #F2EBD6;
　}
#上面代码设定单击h4文本链接时相应的文本以#F2EBD6高亮显示
详细可以阅读：http://htmldog.com/articles/suckerfish/target/
```

扩展阅读： 1、如何写出简洁、高效的CSS？ • 不要在ID选择器前使用标签名 　　一般写法：DIV#divBox 　　更好写法：#divBox 　　解释： 因为ID选择器是唯一的，加上div反而增加不必要的匹配。 • 不要再class选择器前使用标签名 　　一般写法：span.red 　　更好写法：.red 　　解释：同第一条，但如果你定义了多个.red，而且在不同的元素下是样式不一样，则不能去掉 • 尽量少使用层级关系 　　一般写法：#divBox p .red{color:red;} 　　更好写法：.red{..} • 使用class代替层级关系 　　一般写法：#divBox ul li a{display:block;} 　　更好写法：.block{display:block;} 2、样式表中定义CSS兼容IE6、IE7、FF
```css
* html #example{color:blue;} /* 对 IE6及以上版本 生效 */
*+html #example{color:green;} /* 对 IE7和IE5 起效 */
*:first-child+html #example{color:green;} /* 仅对 IE7 生效 */

_height 在 IE6 中为最小高度
min-height 在 IE7 中代表最小高度
height:auto 一般控制 div 自动调整高度使用 IE6/ IE7/ FF
```

PS：另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度。 CSS3选择器W3C参考手册： http://www.w3school.com.cn/cssref/css_selectors.asp

本文最后更新于 2019-06-27 14:11:18 并被添加「css css选择器高级css web前端技术」标签，已有 19244 位童鞋阅读过。

本文作者：未来往事

本文链接：https://felixway.cn/post/421.html

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处

未来往事

高级CSS样式选择器

相关文章

此处评论已关闭