CSS—选择符

版权所有,禁止匿名转载;禁止商业使用。


CSS通过选择符来选择某个对象,并对其进行修饰。

选择符的类别很多,我们究竟应该在编写程序时如何筛选,我之前在这里列举了几条基本需要注意的事项。 
元素选择符
 作用的范围是html标记

a{……} div{……} p{……}


 类选择符
 可以作用于一个或多个元素,使得这些元素有相同的样式。

.red{……} .blink{……} .but1{……}


使用前提,需要为html元素进行标记class属性    <a class="red" src="……">……</a>

 id选择符
 作用于网页中具有唯一标识的元素。

#red{……} #blink{……} #but1{……}


使用前提,需要为html元素进行标记id属性  

  <a id="red" src="……">……</a>


—总结:以上三个是最基本的选择符,其作用的优先级是:

id>类>tag标签

但是这三个都小于内联样式

<a style="……" id="red" src="……">……</a>

—注意:id本身是唯一标识的,class是将一个样式作用于很对对象。

但是在区分意识不强的情况下,有些人可能会这样

同时赋予div属性.png
同时赋予div属性.png

按照理论来说,浏览器应该只识别第一个标识id的,但是刚刚的代码,我在浏览器内分别作了测试后,发现浏览器对这两个元素均进行了渲染,但是当我在js内写脚本 document.getelementByID('q').style 进行设置时,发现js解释器只找到了第一个。
?通配选择符
 作用于所有html标签,缺点呢,这里写过,不赘述啦

*{……}

后代选择符
 

<div>111<p>11<span>1</span></p></div>
 div span{……}

发现div与span内有一个或多个空格,span并不是div的直接子元素,而是孙子辈的。当时不是不接受儿子辈的。


子元素选择符
 

<div>111<p>11<span>1</span></p></div>
 div span{……}
 div>p{……}//子元素选择器

对比后代元素选择器,通过 > 号来制定父子关系


—注意:推荐使用子元素选择符,原因,猛戳这里
?选择符分组
 将每个选择符用 , 分隔开,{}内的样式作用于前面的每个选择器的选择结果  

 p,.red,h1{……}


标签制定式选择符
 

p.red{……}//类为red中的p标签


组合选择符

p .red #big{……}

仔细看之间没有逗号,只是空格,意思是为id为big,且他包含在类为red的元素内,并且这个类也包含在p标签内。


伪类选择符

a:hover{……}


这里有详细的介绍伪类。

—总结:以上是用的比较多的选择器。


 相邻兄弟选择符

选择紧邻在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
 

h1 + p {margin-top:50px;}//中间是加好,不太好记

意思是选择一个段落p,且紧邻他的上级兄弟元素为h1


伪元素选择符

 :first-line 伪元素


 用于向文本的首行设置特殊样式。 p:first-line  {color:#ff0000;  }

:

first-letter 伪元素

 用于向文本的首字母设置特殊样式,作用于 块级 元素。  p:first-letter  {color:#ff0000;  }
伪元素可以与其他伪元素综合使用,也可以和其他选择器一起使用。
 以上文本修饰的文元素的优先级还是挺高的,大于id、大于内联。而且二者相比,-letter又大于-line。 

:before 伪元素

 在元素的内容前面插入新内容 

:after伪元素:

 在元素的内容后面插入新内容

 h1:before
 {
   content:url(logo.gif);
  }


这个的前后面指的是这样的

 <h1><img src="" />是在我内容的前面插入</h1>


属性选择符
 选择有某个属性的元素。  

   [title]{color:red;}

标签内具有属性的title的元素。

0 0