XML入门教程:CSS样式表-XML/XSLT

2019-03-28 14:19:00丽君

ID选择符,与属性选择符类似,但它只指对ID属性,用"#"语法。
<style> #myid {color: red;} </style> <div id="myid">应用红色样式</div>
:first-child伪类,当标记是另一个标记的第一个子标记时,应用样式。
<style> p:first-child {color: red;} </style> <p>p是body的第一个子标记,应用红色样式</p> <div>测试</div> <p>p标记是body的第三个子标记,不应用红色样式</p>
:link和:visited伪类只作用于a标记,在指定href属性的前提下,:link表示a标记还没被点击时的样式,:visited表示被当点后的样式。
<style> a:link {color: blue;} a:visited {color: red;} </style> <a href="http://www.ringkee.com">链接没点击前是蓝色的,点击后是红色的</a>
:hover,:active和:fouce伪类也只能作用于a标记,且也要指定href属性。:hover指定当用户把鼠标移到a标记上并且指针变成手型时应用的样式。:active指定点击a链接并放开鼠标时所显示的样式。:fouce指定用户点击a标记瞬间,即链接成为焦点时所显示的样式。:hover要放在:link和:visited之后,否则:hover的样式会覆盖:link和:visited的样式。
<style> a:link {color: blue;} a:visited {color: red;} a:haover {color: green;} a:focus {color: black;} a:active {color: white;} </style> <a href="http://www.ringkee.com">应用样式</a>
:left及:right伪类只作用于页面内容。当页面在左边时应用:left指定的样式,当页面在右边时应用:right指定的样式。
:first-line只对div和p标记不效,样式只应用于这两个标记内的第一行内容。
<style> :first-line {color: red;} </style> <div width:50px;> 该元素内的第一行内容应用红色样式。 </div>
:first-letter伪类也只能作用于div和p标记,与:first-line不同的是它只作用于标记内的第一个字符。如果我们想要每一行的开头字符大一点就可使用该伪类。
<style> :first-letter {font-size: 40pt;} </style> <p>这行文字开头第一个字符的大小是40pt</p>
:before和:after伪类可在内容的前面或后面增加特定的内容或指定样式。
<style> p:before {content: "("; color: red;} p:after {content: ")"; color: green;} </style> <p>这行文字前后会增加一对括号,前括号为红色</p> <p>这行文字前后会增加一对括号,后括号为绿色</p>
层叠选择符是指当有多个选择符的样式都应用于同一个标记时的选择规则。该规则利用一个三位数来确定,数字最大的就可选中。这三位数的确定规则的这样的,如果选择符中有ID选择符,则百位数加1,否则为0。如果有属性选择符、类选择符或伪类选择符,则十位数加1,否则为0。如果有类型选择符,则个位数加1,否则为0。如果选择符是#div div,这三位数则是101。让我们分析一下,#div是ID选择符,所以在百位数上加1,div是类型选择符,所以个位数上加1变成101。"*"表示0,优先级最低。