好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

2.css选择器_html/css_WEB-ITnose

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

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

   1.基本选择器

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

    1.1 通用选择器

* {    border: 1px solid red;             } 

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

    1.2 元素选择器   

p {    color: red;} 

    说明:这里的元素其实就是HTML里面的标签,例如这里的p,就是指

标签。通过使用元素选择器就可以选择特定的标签,但是要注意,元素选择器会选择HTML文档内的所有同名标签。样式的设置会对所有选中的对象生效。

    1.3 ID选择器

#abc {    font-size: 20px; }

//

段落

   说明:ID选择器会根据全局属性id的值,来选择对象,如上面的

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

    1.4 类选择器 

.abc {    border: 1px solid red; }

//加粗
// 无

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

    1.5 属性选择器

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

//
//

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

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

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

//

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

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

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

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

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

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

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

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

//

查看更多关于2.css选择器_html/css_WEB-ITnose的详细内容...

  阅读:29次