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的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did112285