CSS Selector detailed

Selectors are the core of CSS, from the initial elements, class/id selectors, to pseudo-elements, pseudo-classes, and the richer selectors available in CSS3, to locate any element on the page that begins to become more simple.

1. Element Selector

This is the most basic CSS selector, and the element in the HTML document itself is a selector:

p {line-height:1.5em; margin-bottom:1em;}

2. Relationship Selector

E F: Descendant selector, which locates all elements F in the descendants of element e:

ul li {margin-bottom:0.5em;}

E > F: Sub-selector, which locates all element F in the immediate child element of E, it ignores any further nesting:

ul > li {list-style:none;} //仅限ul的直接子元素li，如果li里面还嵌套着另一个 ul 结构时，最里面的 li 将被忽略

E + F: The adjacent sibling selector, which locates the element F with the same parent element as element E and immediately adjacent to E in the tag:

li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一个li之外的所有li

E ~ F: General sibling selector, which locates all elements F with the same parent element as element E and after E in the tag:

h1 ~ p {color:#f00;} //定位具有相同父元素的，h1标签之后的所有p标签

3. Attribute Selector

E[ATTR]: This selector locates any element with attribute attr e:

input[required] {border:1px solid #f00;} //定位页面里所有具有必填属性"required"的input

E[attr=val]: This selector locates any element e that has the attribute attr and the attribute value is Val:

input[type=password] {border:1px solid #aaa;} //定位页面里的密码输入框

E[ATTR|=AVL]: This selector locates any element that has an attribute attr and the property value is Val or begins with val-e:

p[class|=a] {color:#333;} //定位页面里所有的P段落里具有class属性且属性值为a或是a-开始的，比如class="a"以及class="a-b"

E[attr~=val]: This selector locates any element e that has the attribute attr and the property value is the full word val:

div[title~=english] {color:#f88;} //定位页面里所有具有属性title且属性值里拥有完整单词english的div容器，比如title="english"以及title="a english"

E[attr^=val]: This selector locates any element e that has the attribute attr and the attribute value begins with Val:

div[class^=a] {color:#666;} //定位页面里具有属性class且属性值以a开头的div容器，比如class="a"以及class="ab"

E[attr$=val]: This selector is the opposite of E[attr^=val], locating any element e that has an attribute attr and the attribute value ends in Val:

div[class$=a] {color:#f00;} //定位页面里具有属性class且属性值以a结尾的div窗口，比如class="nba"以及class="cba"

E[attr*=val]: This selector is similar to E[attr~=val], but further, locate the element that has the attribute attr and the attribute value anywhere containing Val E,val can be a complete word, or it can be part of a word:

a[title*=link] {text-decoration:underline;} //定位所有title里具有link字符串的a链接

4. Pseudo-Class

: Link: not visited;

: Visited: The link that has been visited is not recommended;

: hover: Mouse moves to the container, not limited to links, can be used in any element of the page;

: Active: The state when activated, not limited to links, can be used for any element with the TabIndex attribute;

: Focus: The state at the focal point, not limited to links, can be used for any wireless with TabIndex properties:

input:focus {border:1px solid #333;} //输入框获得焦点时的样式

: Enabled: An interface element that has been activated:

input:enabled {border:1px solid #899;}

:D isabled: Disabled interface elements:

input:disabled {background:#eee;}

: target: The selector locates the destination element of the anchor within the currently active page:

#info:target {font-size:24px;} //当访问的URL网址为 123.html#info 时，id="info"将加载这个字体样式

:d efault: A UI element applied to one or more of the default elements in a similar set of elements;

: valid: Applies to valid elements:

input:valid {border:1px solid #6a6;} //当输入框验证为有效时加载这个边框样式，基于type或pattern属性

: invalid: Applied to empty required elements, and elements that fail to match the requirements defined by the type or pattern property:

input:invalid {border:1px solid #f00;} //当输入框为空且必填时，或已填写但验证无效时，加载此边框样式

: In-range: Applies to an element with a range limit, where the value is within the limit, such as number and range input boxes with min and Max attributes;

Ut-of-range: In contrast to: In-range selection, where the value is outside the limit;

: Required: Applies to form controls that have required attribute required;

Ptional: Applies to all form controls that do not have required attribute required

: read-only: Applies to elements whose contents cannot be modified by the user;

: Read-write: Applies to elements whose contents can be modified by the user, such as the input box;

: root: An element that always refers to an HTML element;

e f:nth-child (n): The selector locates element F of the nth child element of element e:

div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3个元素p，如果第3个子元素不是p，此样式将失效

e f:nth-last-child (n): The selector locates element F of the reciprocal nth element of element E;

E:nth-of-type (n): The selector locates the nth specified type of element e as a sub-element;

E:nth-lash-of-type (n): The selector locates the derivative of element e the nth specified type child element:

.class p:nth-child(2) 与 .class p:nth-of-type(2) 的区别在于，如果.class里的第2个子元素不是P元素时，.class p:nth-child(2) 的样式将无效，而.class p:nth-of-type(2) 将定位在 .class 里的第2个p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)，这其中的 n 可以使用数字静态式，比如 .nth-child(2n+1) 将匹配第1、3、5...个元素

E:first-child: The first child element of the parent element, E, is the same as: Nth-child (1);

E:last-child: The second-to-last child element of the parent element e;

E:first-of-type: Same as: Nth-of-type (1);

E:last-of-type: Same as: Nth-last-of-type (1);

E:only-child: The only child element in the parent element, E;

E:only-of-type: The only element in the parent element that has that type E;

E:empty: element without child element, no child element including text node;

E:lang (en): an element with a language expressed using a double-letter abbreviation (EN);

E:not (Exception): The selector selects elements that do not match the selectors in parentheses:

p:not(.info) {font-size:12px;} //匹配所有class值不为info的p元素

5. Pseudo-Elements

Pseudo-elements can be used to locate text contained in a document, to differentiate against pseudo-classes, to use double colons:: Definitions, but single colons: can also be identified.

:: First-line: Matches the first line of text;

:: First-letter: Match text first letter;

:: Before with:: After: Use the Contnet property to generate additional content and insert in markup:

a[href^=http]::after {content:"link"} //在页面的a链接的后面插入文字link

:: Selection: Match highlighted text:

::selection {background:#444; color:#fff;} //定义选中的文本颜色与背景色

Of course, if you want to easily use these powerful CSS selectors, you can use Chrome, Firefox and other browsers, at least you have to abandon IE9 below the IE version of the browser bar.

Transferred from: http://www.uisdc.com/css-selector#

CSS Selector detailed