CSS 属性选择器 通过属性来选择元素 #intro {font-weight:bold;}//id选择器 [title]{ color:red; }//选择有title属性的所有元素 [title=W3School]{ color:red; }//选择title=W3School属性的所有元素 [title~=hello] { color:red; }//选择title包含hello的所有元素,hello前后必须有空格 [title|=hello] { color:red; }//选择title包含hello的所有元素,hello后必须有—— [title*=hello]{ color:red; }//选择title包含hello的所有元素 [title^=hello]{ color:red; }//选择title以hello开头的的所有元素 [title$=hello]{ color:red; }//选择title以hello结尾的所有元素 input[type="text"]//选择type=text的所有input元素 a[href][title] {color:red;}//根据多个属性进行选择 planet[moons="1"][title="W3School"] {color: red;}//根据多个属性值进行选择 通配符选择器 * {color:red;}//与任何元素匹配 多个选择器 多个选择器一起写,用“,”隔开,相当于或的关系 .important.warning {background:silver;}//多个类选择器是and的关系,即要包含important也要包含warning <p class="important warning"> This paragraph is a very important warning. </p> 层级选择器 通过上下文关系来选择元素,父子,兄弟,祖先 CSS 后代选择器 li strong { font-style: italic; font-weight: normal; } CSS 相邻兄弟选择器 结合符是“+” h1 + p {margin-top:50px;} CSS 子元素选择器 h1 > strong {color:red;}//元素下的第一个元素叫子元素 CSS 伪类 (Pseudo-classes) 辅助选择元素 修饰选择器,用冒号表示 selector : pseudo-class {property: value} selector.class : pseudo-class {property: value} 锚伪类 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 点击时的样式*/ a.red : visited {color: #FF0000} p:first-child {font-weight: bold;}//元素下的首个子元素p first-child last-child nth-child(1)|(2n)|(2n-1)|(odd/even) nth-last-child(1)|(2n)|(2n-1)|(odd/even) CSS 伪元素 (Pseudo-elements) 辅助选择元素 修饰选择器,用冒号表示 selector:pseudo-element {property:value;} selector.class:pseudo-element {property:value;} p:first-line {color: #FF00FF} //首行 p:first-letter{color: #FF00FF} //首字母 p.article:first-letter{color: #FF00FF} CSS2-before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容 h1:before{content:url(logo.gif);} CSS2 - :after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容。 h1:after{content:url(logo.gif);}