Home > Web Front-end > HTML Tutorial > CSS Authoritative Guide Reading Notes Selector_html/css_WEB-ITnose

CSS Authoritative Guide Reading Notes Selector_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:43:52
Original
1009 people have browsed it

Selector

The rule structure of the selector includes: selector and declaration block. Each declaration block is an attribute key-value pair (remember that each declaration block is best added Ending with semicolon)

        p.warning {            font-weight:bold;            /*其class属性包含词warning的所有段落*/            /*记住解释一般是从左到右读*/        }        .warning.urgent {            background:red;            /*class同时包含warning和urgent的所有元素 其中warning和urgent class没有顺序之分*/            /*选择器当中是没有空格的,如果有空格就成了子元素选择器了*/        }        img[alt] {            font-weight:bold;            /*所有带有alt属性的图像*/        }        a[href="http://www.w3.org"][title="W3C Home"] {            font-size:20px;            /*href值为http://www.w3.org和title值为W3C Home的a链接-------属性值完全匹配才行*/        }        span[class~="barren"] {            font-style:initial;            /*根据属性值中出现的一个用空格分隔的词来完成选择--部分选择值   记住是以空格分隔的一个词*/        }
Copy after login

Substring matching attribute selector

Specific attribute selection type

Link pseudo-class

You may know that the :link and :visited pseudo-class selectors are functionally equivalent to the link and vlink of the body attribute .

Dynamic pseudo-class

Possibly using the wrong first-child

        /*这也就是为什么从右向左翻译解释的原因*/        p:first-child {            font-weight:bold;            /*作为某元素的第一个子元素的所有p元素设置为粗体*/        }        li:first-child {            text-transform:uppercase;            /*作为某元素的第一个子元素的所有li元素变为大写*/        }
Copy after login

Language selector

        *:lang(fr) {            font-style:italic;        }
Copy after login

Pseudo element selector

        p:first-letter {            color:red;/*让段落的第一个字母变成红色*/        }        p:first-line {            color:purple;/*让段落的第一行变成紫色*/        }        h3:before {            content:"[[";            color:silver;/*在每个h3元素前加一对银色的中括号*/        }        h3:after {            content:"  The end.";/*在h3元素后固定插入...*/        }
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template