CSS3 series one (overview, selectors, using selectors to insert content)_html/css_WEB-ITnose

CSS3 modular structure

Historical development of CSS

CSS (Cascading Style Sheet), cascading style sheet , a markup language used to control the style of web pages and allow the separation of style information from web content.

CSS3 attribute selector

1. E[attr=val] means having attribute att and its value is equal to val
2. E[attr*=val] means it has attribute attr and its value contains val
3. E[attr^=val] means it has attribute attr and its value starts with val
4. E[ attr$=val] means it has attribute attr and its value ends with val

In fact, in addition to the above four, there are two relatively less used attribute selectors, that is

E[attr|=val] is used to select elements that have attribute attr and the value of the attribute is val or starts with val- (where - is indispensable).

a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh-开头的a标签

E[attr~=val] When an attribute of an element has multiple attribute values ​​separated by spaces, use this E[attr~=val] As long as one of the multiple attribute values ​​​​of the attr attribute is equal to val, the matching element will be selected.

<a href="" id="test" title="test first"></a> a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签

Universal pseudo-class selector

1. E: first-line: used for the first line of text in an element Style
2. E:first-letter is used to use style for the first letter (European and American text) or the first character (Chinese or Japanese) of the text in an element
3. E:before Used to insert some content before an element
4. E:after is used to insert some content after an element

CSS3 structural pseudo-class selector

1. : The root selector binds the style to the root element of the page. The so-called root element refers to the element located at the top level of the document tree. In an HTML page, it refers to the entire page. The part
2. E:not want to exclude the substructure elements below this structural element
3. E:empty specifies the style used when the element content is blank
4. E:target specifies a style for a target element on the page. This style only takes effect after the user clicks a hyperlink on the page and jumps to the target element
5. E:first-child is used to select a specific The first child element of the element
6. E:last-child is used to select the last child element of a specific element.
7. E:nth-child is used to select one or more specific child elements of a parent element, where n can be a numerical value (starting from 1), or an expression containing n, or It can be odd (odd number) or even (even number).
8. E:nth-last-child Its usage is the same as nth-child, but the element selected by nth-last-child() starts from the last child element of the parent element.
9. E:nth-of-type only counts child elements of a certain type specified in the parent element (when an element has more than one child element type, using nth-of-type to select will More useful)
10. E:nth-last-of-type Its usage is the same as nth-of-type, but the difference is: nth-last-of-type() also starts from the last element of the parent element Counting begins with child elements.
11. E:only-child matches the element whose parent element has only one child element

CSS3 UI element status pseudo-class selector

1. E:hover{do something} //Select the matching E element where the mouse is hovering
2. E:active{do something} //Select the matching E element and the element is activated , commonly used on anchors and buttons
3. E:link{do something} //Select an element that has a hyperlink defined but the link has not been visited yet
4. E:visited{do something} //Select the element with a hyperlink defined and the link has been visited
5. E:focus{do something} //Select the matching E element, and the element gets focus
6. E:enabled{ do something} //Select the matching E element, and the element is in the available state
7. E:disabled{do something} //Select the matching E element, and the element is in the disabled state
8. E:read-only{do something} //Used to specify the style when the element is in the read-only state
9. E:read-write{do something} //Used to specify the style when the element is in the non-read-only state Style when in state
10. E:checked{do something} //Used to specify the style when the radio radio button or checkbox in the form is in the selected state
11. E:default {do something} //Used to specify the style of the radio button or check control that is in the selected state by default when the page is opened (even if the user sets the selected state of the check box or check box control to the non-selected state E :The style specified in the default selector is still valid)
12. E:indeterminate{do something} //Used to specify that when the page is opened, if any radio button in a group of radio button boxes is not set The style of the entire set of radio button boxes when it is set to the selected state (if the user selects any one of the radio button boxes, the style is unspecified)
13. E::selection is used to specify when the element is in the selected state Style

CSS3 hierarchical relationship selector

Descendant selector "E F" selects matching E All elements within the element that match F.

子选择器「E > F」 选择配配E的元素的匹配F的直系子元素。

相邻兄弟元素选择器「E + F」E和F是同辈元素，具有相同的父元素，并且F元素紧邻在E元素的后面，此时可以使用相邻兄弟选择器。（也就是说只会选择紧接着E元素的第一个F元素）

通用兄弟选择器「E ~ F」E和F是同辈元素，具有相同的父元素，并且F元素在E元素之后，E ~ F将选中E元素后面的所有F元素。

使用选择器来插入内容

        h1:before {            content: 'MYTEXT';        }        h2::after {            content: none;        }        h2::before {            content: normal;            /*            虽然normal和none属性值都表示不插入任何内容            但normal比none使用更广泛，            换句话的意思就是说none属性值只能应用到这两个选择器中，而normal属性值还可以应用到其它用来插入内容的选择器中            */        }        h3:before {           content:url(logo.png);        }        h3 {            background-image:url(logo.png);            /*            虽然两种方法都可以插入图像，但是使用background-image方法时，如果在打印的时候设定了不打印背景就不能正常打印图像了            但使用before选择器追加的图像文件却可以正常打印            */        }        img::after {            content:attr(alt);/*将alt属性的值作为图像的标题来显示*/        }

上面的几个用法可能都会，但下面的用法相信用的相对会比较少，但却很实用哦！

    <style type="text/css">        h1:before {            content: counter(mycounter,upper-alpha)'.';            /*后面的.可以为其指定样式 比如说color:blue                 upper-alpha为大写罗马字母 这里面的值可以是list-style-type中的任意一种             */            color: blue;            font-size: 42px;        }        h1 {            counter-increment: mycounter;        }    </style>    <h1 id="大标题">大标题</h1>    <p>示例文字</p>    <h1 id="大标题">大标题</h1>    <p>示例文字</p>    <h1 id="大标题">大标题</h1>    <p>示例文字</p>

界面显示如下图所示：（也就是说使用counter属性值来针对多个项目追加连续编号）

再来看一个相对上面稍微复杂一点的，也就是编号多层嵌套的例子

 <style type="text/css">        h1:before {            content: counter(mycounter)'.';            color: blue;        }        h1 {            counter-increment: mycounter;            counter-reset: subcounter;        }        h2:before {            content: counter(mycounter) '-' counter(subcounter) '.';        }        h2 {            counter-increment: subcounter;            counter-reset: subsubcounter;            margin-left: 40px;        }        h3:before {            content: counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter) '.';        }        h3 {            counter-increment: subsubcounter;            margin-left: 80px;        }    </style>    <h1 id="大标题">大标题</h1>    <h2 id="中标题">中标题</h2>    <h3 id="小标题">小标题</h3>    <h3 id="小标题">小标题</h3>    <h3 id="小标题">小标题</h3>    <h2 id="中标题">中标题</h2>    <h3 id="小标题">小标题</h3>    <h3 id="小标题">小标题</h3>    <h2 id="中标题">中标题</h2>    <h3 id="小标题">小标题</h3>    <h3 id="小标题">小标题</h3>    <h1 id="大标题">大标题</h1>    <h2 id="中标题">中标题</h2>    <h3 id="小标题">小标题</h3>

 

界面效果图如下：（相信你看了代码一看便明白了）

还有一个使用content的小技巧，那就是在字符串两边添加嵌套文字符号

        h1:before {            content:open-quote;        }        h1:after {            content:close-quote;        }        h1 {            quotes:"(" ")";            /*当如果要使用双引号的时候 需要用\转义字符*/            quotes:"\"" "\"";        }