Home  >  Article  >  Web Front-end  >  CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose

CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:07:091360browse

一:css3属性选择器:

img[alt]{    border:2px dashed #000;}  

这个选择器会匹配页面标签中任何一个含有alt属性的图片标签。

还可以通过设定属性值来缩小匹配范围:如下代码:

    img[alt="atwi_oscar"]{     border:2px dashed #000;}

css3的子字符串匹配属性选择器
(1)‘匹配开头’的属性选择器依法如下:
Element[attribute^="value"],实例代码如下:

   img[alt^="filem"]{        border:2px dashed #000;    }

(2)'匹配包含内容'的属性选择器
Element[attribute*="value"],实例代码如下:

img[alt*="filem"]{    border:2px dashed #000;}

(3)'匹配结尾'的属性选择器
Element[attribute$="value"],实例代码如下:

img[alt$="filem"]{    border:2px dashed #000;}

二:(:not)选择器:

否定伪类选择器,用于选择不满足某些条件的元素,例如:

nav ul li:not(.internal) a{color:#000;}

多提一点关于伪元素的:

对伪元素的修正
P:first-line 会选中

标签的第一行内容,
P:first-letter会选中其中第一个字母。
css3要求对伪元素使用2个冒号以便对伪类进行区别。但IE8及更低的版本无法识别2个冒号的语法,它们只识别一个冒号。

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn