CSS selectors

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}  //激活链接

✪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>

语法说明：

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="测试">

css:

input::-webkit-input-placeholder {color: green;}

 

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