CSS selectors

高洛峰
Release: 2017-02-22 13:21:23
Original
1881 people have browsed it

CSS Selectors

[Wildcard Selectors]

*The asterisk selector will match every element on the page, but I recommend that you never use it in production code. It puts a lot of unnecessary burden on the browser.

*{

margin:0;

padding:0;

}

[Tag selector] (also called type Selector): That is, use the html tag name as the selector

demo: ul {}

[id selector]: The ID selector should be used with caution.

Customize the id name for the required style tag. Then write #custom id name {CSS style} in the css file. Note: Each id name must be different.

# IDname {width: 960px; margin: auto; }

The id selector is unique and reuse is not allowed. If possible, try using a tag name, a new HTML5 element, or even a pseudo-class first.

【Class selector】(class)

Customize the class name, how to use it: write .class name {css style}.

.className in the css file {border-color: blue; font-size:16px;}

Note: One label can use multiple class names, and one class name can be used by multiple labels.

The difference between id and class

id selector, an id name can only be used once and cannot be repeated. getElementById('')

class selector, a class name can be used repeatedly, for example, multiple elements in the page can use the same style definition.

[Group Selector]: Control multiple labels at the same time. Tag names are separated by

a,p,span{}

[combination selector]: We can also select by mixing and matching tag names, id names, and class names, and add Style

p .p {} represents all tags with class p under the p tag.

p,#a {} represents the tag with id a and all p tags.

[Relationship Selector]: Relationship selector can be divided into

Selector Name                     Description                 Version   English name

E F Contains selector Select all F elements contained by E elements . CSS1 (Descendant combinator) is also called the descendant selector.

E>F sub-selector selects all sub-elements F that are E elements. CSS2 (Child combinator)

E+F adjacent selector selects the F element immediately after the E element. CSS2 (Adjacent sibling combinator)

E~F sibling selector selects all sibling elements F of element E. CSS3 (General sibling combinator)

[Pseudo-class selector]

Not all tags can use pseudo-class selectors, here we only talk about the pseudo-class selectors of the a tag


a:link {color: #FF0000; text-decoration: none}         //未访问的链接
a:visited {color: #00FF00; text-decoration: none}     //已访问的链接
a:hover {color: #FF00FF; text-decoration: underline}   //鼠标在链接上
a:active {color: #0000FF; text-decoration: underline}  //激活链接
Copy after login

✪Note: You can write one or more of the above pseudo-classes. But you must write them in order, otherwise problems will occur!

Selector Version Version Description

E:link CSS1 Set the style of hyperlink a before it is accessed.

E:visited CSS1 Sets the style of hyperlink a when its link address has been visited.

E:hover CSS1/2 Set the style of the element when it is hovered by the mouse.

E:active                     CSS1/2 Set the style of the element when it is activated by the user (an event that occurs between mouse click and release).

E:focus                     CSS1/2 Set the style when the element becomes the input focus (the onfocus event of the element occurs).

E:lang(fr) CSS2 Matches the E element using a special language. Rarely used

E:not(s) CSS3 matches element E that does not contain the s selector.

E:root                     CSS3   Matches the E element in the root element of the document. Often refers to the html element

E:first-child CSS2 matches the first child element E of the parent element.

E:last-child CSS3 Matches the last child element E of the parent element.

E:only-child CSS3 Matches the only child element E of the parent element.

E:nth-child(n) CSS3 Matches the nth child element E of the parent element.

E:nth-last-child(n) CSS3 Matches the nth child element E from the bottom of the parent element.

E:first-of-type CSS3 Matches the first sibling element E of the same type.

E:last-of-type CSS3 Matches the last sibling element E of the same type.

E:only-of-type CSS3 Matches the only sibling element E of the same type.

E:nth-of-type(n)     CSS3    匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n) CSS3    匹配同类型中的倒数第n个同级兄弟元素E。

E:empty                 CSS3    匹配没有任何子元素(包括text节点)的元素E。

E:checked              CSS3    匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)

E:enabled               CSS3    匹配用户界面上处于可用状态的元素E。

E:disabled              CSS3    匹配用户界面上处于禁用状态的元素E。

E:target                  CSS3    匹配相关URL指向的E元素。

 

  ★first-child 与first-of-type的区别:

举例:

<p class="test">
<p>第一个子元素</p>
<h1>第二个子元素</h1>
<span>第三个子元素</span>
<span>第四个子元素</span>
</p>
Copy after login

语法说明:

p:first-child        匹配到的是p元素,因为p元素是p的第一个子元素;

h1:first-child      匹配不到任何元素,因为在这里h1是p的第二个子元素,而不是第一个;

span:first-child       匹配不到任何元素,因为在这里两个span元素都不是p的第一个子元素;

p:first-of-type      匹配到的是p元素,因为p是p的所有为p的子元素中的第一个,事实上这里也只有一个为p的子元素;

h1:first-of-type       匹配到的是h1元素,因为h1是p的所有为h1的子元素中的第一个,事实上这里也只有一个为h1的子元素;

span:first-of-type    匹配到的是第三个子元素span。这里p有两个为span的子元素,匹配到的是第一个。

所以,通过以上两个例子可以得出结论:

:first-child      匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

:first-of-type   匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。

✪注意:当然这些元素的范围都是属于同一级的,也就是同辈的。

同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。

【属性选择符】

选择符              版本     描述

E[att]                 CSS2  选择具有att属性的E元素。

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

E[att~="val"]    CSS2  选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

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

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

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

E[att|="val"]     CSS2  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

【伪对象选择符】

选择符                                  版本     描述

E:first-letter/E::first-letter   CSS1/3  设置对象内的第一个字符的样式。

E:first-line/E::first-line        CSS1/3  设置对象内的第一行的样式。

E:before/E::before      CSS2/3  设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E:after/E::after                   CSS2/3  设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E::placeholder                       CSS3    设置对象文字占位符的样式。

E::selection                         CSS3    设置对象被选择时的颜色。    

 

✪注意:CSS3的语法改成:: ,原本CSS1是: ,故还是直接用两个冒号为妥。

举例:

html:

<input type="search" placeholder="测试">
Copy after login

css:

input::-webkit-input-placeholder {color: green;}
Copy after login

 

更多CSS选择符 相关文章请关注PHP中文网!

Related labels:
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!