你的位置:首页 > 网页设计

[网页设计]2.css选择器


  由第一节的语法结构可以看出css语言的核心思想就是:找到对象,然后对选定的对象进行属性赋值。其中,css中对象的选择,依靠的就是选择器。当掌握了选择器以后,就能够指哪打哪,弹无虚发了。

  css的选择器有许多种,下面来逐一介绍:

  1.基本选择器

    使用简单且频率高的一些选择器这里归类为基本选择器,而基本选择器有包含下的内容:


 

    1.1 通用选择器

* {  border: 1px solid red;       }

    说明:通用选择器的核心就是使用统配符*作为对象标识,在很多语言中,*的含义是指代所有对象,也就是所HTML文件中的所有标签都会被选中,包括<html> 和<body>标签。但这通常不是我们想要的结果,所有一般情况下也用不到。


 

    1.2 元素选择器   

p {  color: red;}

    说明:这里的元素其实就是HTML里面的标签,例如这里的p,就是指<p></p>标签。通过使用元素选择器就可以选择特定的标签,但是要注意,元素选择器会选择HTML文档内的所有同名标签。样式的设置会对所有选中的对象生效。


 

    1.3 ID选择器

#abc {  font-size: 20px; }

//<p id="abc">段落</p>

   说明:ID选择器会根据全局属性id的值,来选择对象,如上面的<p></p>标签所示。理论上选择到的元素是唯一的,因为根据html语言的标准,id值在一个页面中应该是唯一的。但是如果出现相同的id值,可能会选中相同id值的元素。(这个行为会根据浏览器的不同而不同,所以对不同的元素设置相同的id值要极力避免,以免发生不可估计的错误)


 

    1.4 类选择器 

.abc {  border: 1px solid red; }

//<b >加粗</b>
//<span >无</span>

  说明:类选择器针对的是元素内class属性的值,这是常用的多对象选择器,如果有多个元素的class属性含义同样的值,那么这些元素都会被选中。


 

    1.5 属性选择器

/*css2*/[href] {   color: orange;} 

//<a herf="..."></a>
//<a herf="..."></a>

  说明:属性选择器是css2版本新增的选择器,不过到了现在HTML5全面普及的时代,一般的主流浏览器的最新版本都应该支持。其意思是如果标签含有指定的属性,都会被选中,也就是选中多个。如上面的例子所示,其中href属性是所有<a></a>标签必须声明的属性,这种写法将选中HTML页面中的所有<a></a>标签。


    关于属性选择器还有下面这些扩展:

/*css2*/[type="password"] {   border: 1px solid red; } 

//<input type="password" />

    说明:该选择器进一步限制了除了要有相应的属性之外,其属性的值也要符合要求。当有多个对象符合要求时,也会选中多个对象。


 

/*css3*/[href^="http"] {   color: orange;} 

    说明:这是css3版本中新增的,加入了正则匹配的部分特性,如上面例子表示属性的值的开头必须是http。


 

/*css3*/[href$=".com"] {  color: orange; } 

    说明:与开头匹配相对的,这里是结尾匹配。


 

/*css2*/
[href*="baidu"] { color: orange; }

    说明:这里表示,只要属性的值中含有指定的字符就能匹配,不管字符是在开头还是结尾。


 

/*css2*/
[class~="edf"] { font-size: 50px; }

//<div ></div>

    说明:当一个属性含有多个值的时候,可以用这个方式选择。


 

/*css2*/
[lang|="en"] { color: red;}

//<span lang="en-us"></span>

    说明:当属性有多个值,且多个值间是使用-号分隔的时候,可以使用这个选择器。


 

2.复合选择器

  将不同的选择器进行组合形成新的特定匹配,我们称为复合选择器。

  2.1 分组选择器

p,b,i,span {   color: red; } 

    说明:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用 ID 选择器、类选择器、属性选择器混合使用。


  2.2 后代选择器

p b {  color: red; } 

//<p>
//  <b>a</b>
//  <b>b</b>
//  <div>
//    <b>c</b>
//  </div>
//</p>
//注意:这里标绿色不是css样式设置后的结果,只是表面选择器选中了哪个,下同。

    说明:选择<p>元素内部所有<b>元素。不在乎<b>的层次深度,也就是父级元素内不管嵌套了几级,只要有都会被选中。当然,后代选择器也可以混合使用ID选择器、类选择器、属性选择器。


 

  2.3 子代选择器

ul > li {  border: 1px solid red; }

//<ul>
//  <li>a</li>
//  <li>b</li>
//  <div>
//    <li>c</li>
//  </div>
//</ul>

    说明:子代选择器和后代选择器类似,但是子代选择器只能选择父级元素的下一级元素,而后代选择器不限制层次的深度。


 

  2.4 相邻兄弟选择器

p + b {  color: red; }

//<p></p>
//<b></b>
//<b></b>

    说明:相邻兄弟选择器匹配和第一个元素相邻的第二个元素,第三、第四之类的不会匹配。


 

  2.5  普通兄弟选择器

p ~ b {  color: red; } 
//<p></p>
//<b></b>
//<b></b>

    说明:普通兄弟选择器匹配和第一个元素后面的所有元素,不管有几个。
    注意:无论是相邻兄弟选择器还是普通兄弟选择器都不会先前选择。


 

3.伪元素选择器

  伪元素选择器是更具某些特征来选择的选择器,在css3中引入,其语法特征是包含两个冒号(::)具体如下:

  3.1 ::first-line 块级首行

div::first-line {   color: red; } 

    说明:块级,只要是针对<p>、<div>等带有块级属性的标签的选择器,将选中其首行的文本,进行特定的样式设置。若不在前指定特点的标签,则当前页面的所以块级元素将生效。


 

  3.2 .::first-letter 块级首字母

div::first-letter {  color: red;}

    说明:块级元素的首行字,若是中文文本,将选中第一个中文字符,其他同上。


 

  3.3 ::before 文本前插入

a::before {   content: '点击'; } 

//<a href="...">我</a>  //设置前
//<a href="...">点击我</a>  //设置后

    说明:这个倒不限制是否是块级元素,多配合content属性使用,在文本前插入内容。


 

  3.4 ::after 文本后插入

a::after {   content: '很帅';
}
//<a href="...">我</a>  //设置前
//<a href="...">我很帅</a>  //设置后

    说明:在文本后插入内容。(如上所示,能一秒成帅哥)


 

  3.5 ::selection 文字选择时触发

span::selection {  color:red;   }

    说明:所谓选择时触发,即是按住鼠标左键选择多个文字的时候。如上设置,表示选择后文字变成红色。


 

4.伪类选择器

  伪类选择器和为元素选择器类似,也是按照某些特征进行选择。其语法特点是包含一个冒号(:),所以和伪元素选择器很容易混淆。伪类选择器分为四种类型:结构性伪类、UI 伪类、动态伪类和其他伪类选择器,具体如下:
  4.1 结构性伪类选择器

  结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀(:)。

  4.1.1 根元素选择器

:root {  border: 1px solid red;}

    说明:匹配文档中的根元素,基本不怎么用,因为总是返回<html>元素。


  4.1.2子元素选择器

ul > li:first-child {  color: red;}
//<ul>
//  <li>a</li>
//  <li>a</li>
//</ul>

    说明:这里先用子代选择器选择里<ul>元素里的子代<li>元素,此时可能选中了多个子代元素,再用:first-child表示选择这些子代中的第一个。

 


 

ul > li:last-child {  color: red;} 

//<ul>
//  <li>a</li>
//  <li>a</li>
//</ul>

    说明:相对的,也能选择子代中的最后一个。


 

ul > li:only-child {  color: red;} 

//<ul>
//  <li>a</li>
//</ul>

//<ul>
//  <li>a</li>
//  <li>a</li>
//</ul>

    说明:选择只有一个子元素的那个子元素。如上面例子所示,第一个<ul>下只有一个<li>,而第二个<ul>下则有两个<li>,此时,第一个<ul>的子元素<li>将被选中。


 

ul > li:only-of-type {  color: red;}

//<ul>
//  <li>a</li>
//  <li>a</li>
//</ul>

//<ul>
//  <li>a</li>
//  <p>a</p>
//</ul>

    说明:这里的情况比较复杂,该选择器表面的是子代中只能有一个指定的类型是,才能被选择。如上面例子所示:第一个<ul>的子代只有<li>元素,而第二个<ul>的子代除了<li>之外,还有<p>。此时,只有第一个<ul>的子代<li>才能被选中。注意,选择的还是子代元素。


 

  4.1.3 nth-child(n)系列

ul > li:nth-child(2) {   color: red; }

//<ul>
//  <li>a</li>
//  <li>a</li>
//  <li>a</li>
//  <li>a</li>
//</ul>

    说明:选择子代元素中的第n个元素。


 

ul > li:nth-last-child(2) {  color: red;} 

//<ul>
//  <li>a</li>
//  <li>a</li>
//  <li>a</li>
//  <li>a</li>
//</ul>

    说明:选择子代元素中的倒数第n个元素。


 

div > p:nth-of-type(2) {  color: red;};

//<div>
//  <span>1</span>
//  <p>2</p>
//  <span>3</span>
//  <p>4</p>
//</div>

    说明:选择特定子元素的第n个。


 

div > p:nth-last-of-type(2) {  color: red;}; 
//<div>
//  <span>1</span>
//  <p>2</p>
//  <span>3</span>
//  <p>4</p>
//</div>

    说明:选择特定子元素的倒数第n个。


 

  4.2 UI 伪类选择器

  UI 伪类选择器是根据元素的状态匹配元素。

  4.2.1 :enabled

input:enabled {  border: 1px solid red;} 

//<input type="text" name=username />

    说明:选择启用状态的元素,多配合表单使用。


  4.2.2 :disabled

input:disabled {  border: 1px solid red;} 
//<input type="text" name=username />

    说明:选择禁用状态的元素。


  4.2.3 :checked

input:checked {  display: none;} 

    说明:选择勾选的input元素。


 

  4.2.4:default

input:default {  display: none;} 

    说明:从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。


  4.2.5 :valid 和:invalid

/*验证合法时*/input:valid {  border: 1px solid blue;}/*验证不合法时*/input:invalid {  border: 1px solid green;}

    说明:输入验证合法与不合法显示时选择的元素。


  4.2.6 :required 和:optional

/*当表单字段是必填项时*/input:required {  border: 1px solid blue;} /*当表单字段是非必填项时*/input:optional {  border: 1px solid green;}

    说明:根据是否具有 required 属性选择元素。


  4.3 动态伪类选择器

  4.3.1 link 和 visited

a:link {  color: red;} a:visited {  color: orange;} 

    说明: :link 表示未访问过的超链接,:visited 表示已访问过的超链接。


  4.3.2 :hover

a:hover {  color: blue;}

    说明: 表示鼠标悬停时。


  4.3.3 :active

a:active {  color: green;}

    说明:表示鼠标按下激活超链接时。


 

  4.3.4 :focus

input:focus {  border: 1px solid red;}

    说明:表示获得焦点时。


  4.4 其他伪类选择器

  4.4.1 :not

a:not([href*="baidu"]) {  color: red;}

    说明:对条件进行反选


  4.4.2 :empty

:empty {  display: none;}

    说明:匹配没有任何内容的元素


  4.4.3 :target

:target {  color: red;}

    说明:定位到锚点时,选择此元素


暂时总结到这里……