css选择器部分

子串匹配属性选择器：

foo[href^="baidu.com"]{color:red} /*选择foo标签的href属性值以baidu.com开头的所有元素*/
    foo[href$=".com"]{color:red} /*选择foo标签的href属性值以.com结尾的所有元素*/
    foo[href*="baidu"]{color:red} /*选择foo标签的href属性值中包含有baidu的所有元素*/

根据部分属性值来选择：

<p class="example reposting">you ensure that the value of "i" remains as you intended</p>
<p class="example">Security is one of the major concerns in the development of web applications</p>

p[class~="reposting"]{color:red} /*波浪线'～'是选择部分的关键，如果省略就会完全匹配*/

选择包含title属性所有标签：

*[title]{color:red}/*img[title]是选择标签为img并且包含属性title的元素*/

特定属性的选择：

<img src="oschina1.jpg" />
<img src="oschina2.jpg" />
<img src="www.oschina2.jpg" />

img[src|="oschina"]{border:1px solid gray;}/*tag[att|="val"]适合任何属性的选择，选择完全匹配的值的元素*/

后代选择器：

上面是一副文档树结构图。

p em {color:red } /*em在p中找到,并且加属性*/

ul li ol li{color:blue} /*在ul中的li中，找到ol，并在ol中找到li最后对该元素颜色设置为blue*/     

blockquote b,p b{color:gray} /*使blockquote标签中的b标签和p中的b标签包含的字体变为灰色*/

选择子元素：

div > p{background:red}/*选择div的子元素p并且把背景设置为红色*/

伪类选择器：

a:link{color: #FF0000} /* 未访问的链接 */

a:visited{color: #00FF00} /* 已访问的链接 */ 

a:hover{color: #FF00FF} /* 鼠标移动到链接上 */

a:active{color: #0000FF} /* 选定的链接 */

a:first-child{color:red} /*向元素的第一个子元素添加样式。*/
a:first-letter{color:red}/*第一个字母*/
a:first-line{color:red}/*第一行*/

a:lang {color:red}/*向带有指定 lang 属性的元素添加样式。*/

注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ 建议顺序： Link-visited-focus-hover-active

哈哈哈

转载于:https://my.oschina.net/websec/blog/164225