0507 css选择器补充

来源：互联网发布：淘宝买彩票安全吗编辑：程序博客网时间：2024/06/05 04:07

关系选择器包括：

包含、子、相邻、兄弟选择器

相邻选择器E+F

选择紧贴在E后面的F元素

兄弟选择器E~F

选择E后面所有的兄弟元素F

<style>    p+p{        color: red;    }/*相邻选择器，只会命中符合条件的相邻的兄弟元素，p2、p5将会变成红色*/    p~p{        color: blue;    }/*兄弟选择器，命中所有符合条件的兄弟元素，p2、p3、p4、p5将会变成蓝色*/</style>

<body><p>p1</p><p>p2</p><h4>标题</h4><p>p3</p><h4>标题</h4><p>p4</p><p>p5</p></body>

伪类选择器

<style>    input:checked{        margin: 20px;    }/*匹配用户界面上处于选中状态的元素(用于input:type为radio与checkbox时) */    input:enabled{        outline-color: red;    }/*匹配用户界面上处于可用状态的元素*/    input:disabled{        outline-color: red;    }/*匹配用户界面上处于禁用状态的元素*/</style>

li:nth-child(n)/*匹配父元素的第n个子元素li，假设该子元素不是li，则选择符无效*/li:first-child/*匹配父元素的第一个子元素li*/li:nth-last-child(n)/*匹配父元素的倒数第n个子元素li*/p:nth-of-type(n)/*匹配同类型中的第n个同级兄弟元素p*/

属性选择器

E[att]：选择具有att属性的E元素。
E[att="val"]：选择具有att属性且属性值等于val的E元素。

E[att~="val"]：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。

E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。

E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。

E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

0 0