css3选择器有哪些类型,分别举例语法格式在html标签中使用的方法

html-css014

css3选择器有哪些类型,分别举例语法格式在html标签中使用的方法,第1张

1. 属性选择器

属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

有6个不同类型的属性选择器：

[att=value]

该属性有指定的确切的值。

[att~=value]

该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。

[att|=value]

属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)

[att^=value]

该属性的值以指定值开始。

[att$=value]

该属性的值包含指定的值(而无论其位置)。

[att*=value]

该属性的值以指定的值结束

比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：

div[class|="post"] { background-color: #333 }

代码laycode - v1.1

该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)

属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：

input[type="text"] { width: 200px }1

代码laycode - v1.1

这将匹配所有type属性值等于“text”的input元素。

现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：

a[href*=".jpg"] { background: url(jpeg.gif) no-repeat left 50% padding: 2px 0 2px 20px } a[href*=".pdf"] { background: url(pdf.gif) no-repeat left 50% padding: 2px 0 2px 20px } a[href*=".doc"] { background: url(word.gif) no-repeat left 50% padding: 2px 0 2px 20px }

代码laycode - v1.1

在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》

浏览器支持

除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。

2. 子选择器

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：

div#sidebar >h2 { font-size: 20px }1

代码laycode - v1.1

你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：

body >div >div blockquote { margin-left: 30px }

代码laycode - v1.1

浏览器支持

和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

li:{list-style-type:circle}

也可以用image代替type位置，链接你喜欢的图片

circle:是空心圆点。square：方形

disc：默认实心圆。

不知道你说的是不是这个意思

可以这么写，举个例子就很容易弄明白：

<div>

<p id="p1"></p>

<b><p id="p2"></p></b>

<ul>

<li><p id="p3"></p></li>

<li><div><p id="p4"></p></div></li>

</ul>

</div>

这个例子中如果是div p{font-size:5em}，那div中所有的p（p1,p2,p3,p4）都会加上字体大小5em。

但是如果是div>p这种写法，那只有p1、p4会加上这个属性。

在这里小于号表示只有p是跟在div后面的一级子元素，属性才会起作用。