Home >Web Front-end >HTML Tutorial >css3 selector note_html/css_WEB-ITnose
css3 selector note_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:211061browse
css3 selector
Based on the different elements in the obtained page, css3 selectors are divided into five categories:
- Basic selector
- Hierarchical selector
-
Pseudo-class selector
- Dynamic pseudo-class selector
- Target pseudo-class selector
- Language pseudo-class selector
- UI element state pseudo-class selector
- Structure pseudo-class selector
- Negative pseudo-class selector
- Dynamic pseudo-class selector
- pseudo-element
Attribute selector
Basic selector
The basic selector is the most frequently used and basic selector in CSS, and it is also the earliest defined selector in CSS. Basic selectors can be used to determine most prime DOM element nodes in the HTML tree structure.
Wildcard selector
The wildcard selector (*) is used to select all elements. Of course, it can also select all elements under a certain element.
*{ margin:0; padding:0;} Indicates that the inner and outer margins of all elements are 0.
Element selector
The element selector (E) is the most common and basic selector among CSS selectors. The elements of the document include html, body, p, div, etc.
div{ background：blue；} Indicates that the background color of all div elements is blue.
ID Selector
Before using the ID selector, you need to set the id attribute and value for the corresponding element in the HTML document to find the corresponding element. The ID selector is unique, and attribute values with the same ID cannot appear on a page at the same time. When using the id selector in CSS styles, you need to add a "#" sign in front of the id attribute value, such as (#id).
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> <title></title><style> #yxz{ width:100px; height:100px; background:red; }</style></head><body> <div id="yxz">我有id</div> <div>呵呵</div></body></html> Indicates that the element with the id attribute value "yxz" has a width and height of 100px and a red background.
Class selector
Class selector (.class) specifies element style in a way that is independent of document elements. The usage method is similar to the ID selector. First, define the class attribute for the required element in HTML and set the attribute value for it. But unlike the ID selector, the class selector can have multiple same class names in a page, while the ID name of the ID selector can only have one in the CSS style in the entire page. When using the class selector, you need to add a period (.) in front of the attribute value, such as (.class).
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> <title></title><style> .yxz{ width:100px; height:100px; background:red; }</style></head><body> <div class="yxz">我有类名</div> <div>呵呵</div></body></html> Indicates that the element with the class attribute value "yxz" has a width and height of 100px and a red background.
Another way to use class selectors is multi-class selector. By merging two or more class selectors, you can define element effects that are different from one class name.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> <title></title><style> .yxz{ width:100px; height:100px; background:red; } .yxz.sx{ border:1px solid black; }</style></head><body><div class="yxz sx">我有两个类名</div><div class="yxz">呵呵</div></body></html> The two divs with the class name "yxz" have the same width, height and background, but the first div has another class name "sx", through which the class name is added to the first div The border property. In this way we can set general styles and special styles for multiple attributes.
Since class names can exist on different element tags at the same time in an HTML document. In other words, in an HTML document, the div can have the class name "yxz", and the ul can also have the class name "yxz", but sometimes we only need to set the style on the div to use the class name with the label selector.
div.yxz{/*样式*/} In this way, you can only match div elements with the class name "yxz".
Group selector
Group selector (selector1, selectorN) groups elements with the same style together, separated by commas (,) between each selector.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> h1,h2{ background:black; color:white; width:200px; float:left; margin-right:20px; }</style></head><body><h1>胸无大志者，必受制于人</h1><h2>丈夫生不五鼎食，死则五鼎烹耳</h2></body></html> Indicates that h1 and h2 have the same style.
Hierarchical selector
Hierarchical selector obtains elements through the hierarchical relationship between HTML DOM elements. Its main hierarchical relationships include descendant, parent-child, adjacent brothers and common brothers. The required elements can be easily selected through certain relationships.
Descendant selector
Descendant selector (E F) is also called the containing selector, separated by spaces, and its function is to select the descendant elements of an element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div span{ background:black; color:white; float:left; margin-right:20px; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html> Matches the descendant element span of the div.
Sub-selector
Sub-selector (E>F) can only select the sub-elements of a certain element, separated by a greater than sign (>).
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div span{ background:black; color:white; float:left; margin-right:20px; }</style></head><body><div> <span>胸无大志者，必受制于人<span>丈夫生不五鼎食，死则五鼎烹耳</span></span></div> </body></html> Only the sub-element span under the div can be selected. The sub-element span of span is the descendant element of the div and cannot be matched.
Adjacent sibling selector
The adjacent sibling selector (E F) can select elements immediately following another element, and they have the same parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> span+span{ background:black; color:white; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html> Matches the sibling element span that follows and is adjacent to the span. Because the third span is adjacent to the second span, and the fourth span is adjacent to the third span, they can also be matched.
Universal sibling selector
Universal sibling selector (E~F) is newly added in CSS3 and is used to select all sibling elements behind an element. They also have the same parent element.
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> span~span{ background:black; color:white; }</style></head><body><div> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span> <span>胸无大志者，必受制于人</span> <span>丈夫生不五鼎食，死则五鼎烹耳</span></div> </body></html> Selects all sibling span elements after the first span element.
伪类选择器
css3中的伪类选择器可以分成6种：动态伪类选择器，目标伪类选择器，语言伪类选择器，UI状态伪类选择器，结构伪类选择器和否定伪类选择器。
伪类选择器语法书写时和其他的CSS选择器写法有所区别，都以冒号(:)开头。
动态伪类选择器
动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> a:link{ color:red; text-decoration:none; } a:visited{ color:yellow; } a:hover,a:focus{ color:blue; text-decoration:underline; } a:active{ color:black; }</style></head><body><a href="#">胸无大志者，必受制于人</a> </body></html> 未访问时为红色且取消下划线，访问后为黄色，用户停留在链接，或链接获得焦点时显示下划线并设置蓝色，点击链接时为黑色。
设置动态伪类选择器时，必须遵循一定的循序。因为这几个选择器具有相同的特殊性，所以根据在文档中的顺序来决定更特殊的选择器。那么选择器的循序就至关重要了，正常的循序应该是:link，:visited，:hover，:active。
目标伪类选择器
目标伪类选择器“:target”用来匹配文档链接中的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号(#)，后面带有一个标志符名称，例如“#yxz”，“:target”就是用来匹配ID为“yxz”的元素。":target"伪类选择器选取链接的目标元素，然后定义样式。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> p{ font-size:16px; line-height:20px; width:0; height:20px; overflow:hidden; -moz-transition:width 2s ease-in-out; -webkit-transition:width 2s ease-in-out; transition:width 2s ease-in-out; position:absolute; visibility:hidden; } /*假如目标被选中，后面的P元素如此如此*/ div:target p{ width:220px; visibility:visible; }</style></head><body> <!--链接目标分别指向两个div--> <a href="#yxz">点我</a> <a href="#sx">点我</a> <div id ="yxz"> <p>胸无大志者，必受制于人</p> </div> <div id="sx"> <p>丈夫生不五鼎食，死则五鼎烹耳</p> </div></body></html> 语言伪类选择器
语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。为文档指定语言，有两种方法可以表示。
如果使用HTML5，直接可以设置文档的语言。
<!DOCTYPE HTML><html lang="en-US">
另一种方法就是手工在文档中指定lang属性，并设置对应的语言值。
<body lang="fr">
E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。
UI元素状态伪类选择器
主要用于form表单元素上，UI元素的状态一般包括：启用，禁用，选中，未选中，获得焦点，失去焦点，锁定和待机等。在HTML元素中有可用和不可用状态，例如表单的文本输入框，还有选中和未选中状态，例如表单的复选和单选按钮。这几种状态都是CSS3选择器中常用的状态伪类选择器。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*被禁用的表单元素显示轮廓*/ input:disabled{ outline:1px solid red; } </style></head><body><form> <fieldset> <legend>观海云远</legend> <label for="ysg">杨肃观</label> <input type="checkbox" name="yxz" id="ysg" /> <label for="qzh">秦仲海</label> <input type="checkbox" name="yxz" id="qzh" disabled="disabled"/> <label for="ly">卢云</label> <input type="checkbox" name="yxz" id="ly" /> <label for="wdy">伍定远</label> <input type="checkbox" name="yxz" id="wdy" /> </fieldset></form></body></html> 结构伪类选择器
根据元素在文档树中的某些特性(如相对位置)定位到它们。
结构伪类选择器中的参数n可以是整数，关键词或公式。
整数：nth-child(3)，选择第3个子元素。
关键词：odd代表奇数子元素，even代表偶数子元素。
公式：默认值为0，每次递增1。如：n+1,当n=0时，0+1=1，选择第1个子元素，当n=1时，1+1=2，选择第2个子元素，到选完所有子元素为止。
:first-child
选择父元素中的第一个子元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*选择ul中第1个li元素，改变它的项目符号为空心圆*/ ul li:first-child{ list-style-type:circle; }</style></head><body><ul> <li>杨肃观</li> <li>秦仲海</li> <li>卢云</li> <li>伍定远</li></ul></body></html> :last-child
选择父元素中的最后一个子元素。
/*选择ul中最后一个li元素，他的项目符号变为空心圆*/ul li:last-child{ list-style-type:circle;} :nth-child(n)
选择父元素中的一个或多个子元素。
当n为整数时：
/*选择ul中第三个li*/ul li:nth-child(3){ list-style-type:circle;} 当n为关键词时：
/*选择ul中第奇数个li*/ul li:nth-child(odd){ list-style-type:circle;} 当n为公式时：
/*选择ul中第奇数个li*/ul li:nth-child(n*2-1){ list-style-type:circle;} :nth-last-child(n)
与:nth-child类似，但却是从倒数选择子元素。
当n为整数时：
/*选择ul中倒数第三个li*/ul li:nth-last-child(3){ list-style-type:circle;} 当n为关键词时：
/*选择ul中倒数第奇数个li*/ul li:nth-last-child(odd){ list-style-type:circle;} 当n为公式时：
/*选择ul中倒数第奇数个li*/ul li:nth-last-child(n*2-1){ list-style-type:circle;} :nth-of-type(n)
也与:nth-child类似，不同的是它只计算父元素中指定某种类型的子元素。
<ul> <li>杨肃观</li> <span>王一通</span> <li>秦仲海</li> <li>卢云</li> <li>伍定远</li></ul>
当结构中不止一种类型时，使用nth-child就不能够准确的指定元素了，假如我要匹配第2个li，写作li:nth-child(2)是不能够匹配的，因为文档中第2个子元素是span，所以匹配失败。
ul li:nth-of-type(2){ list-style-type:circle;} :nth-of-type能够从指定类型的子元素开始计数，第2个元素span不是li，所以被忽略。
:nth-last-of-type(n)
与nth-of-type一样，都是用来选择指定某种类型的子元素，但它的计数方向却是从最后一个指定类型的子元素开始，使用方法与之前提到的nth-last-child一样。
:only-child
表示一个元素是它父元素的唯一子元素。换句话说，匹配元素的父元素中仅有一个子元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /匹配第2个ul中的li，因为它的父元素只有一个子元素/ ul li:only-child{ list-style-type:circle; }</style></head><body><ul> <li>杨肃观</li> <li>秦仲海</li> <li>卢云</li> <li>伍定远</li></ul><ul> <li>王一通</li></ul></body></html> :only-of-type
用来选择一个元素是它父元素唯一一个指定类型的子元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*选择第2个ul中的span，因为它的父元素中只有1个span元素*/ ul span:only-of-type{ color:red; }</style></head><body><ul> <li>杨肃观</li> <li>秦仲海</li> <li>卢云</li> <li>伍定远</li> <span>小白龙</span> <span>伍崇卿</span></ul><ul> <li>卢一云</li> <li>卢二云</li> <li>卢三云</li> <li>卢四云</li> <span>卢五云</span></ul></body></html> :empty
用来选择没有任何内容的元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*匹配第2个div，因为它没有任何内容*/ :empty{ width:100px; height:100px; background:red; }</style></head><body><div>胸无大志者，必受制于人</div> <div></div></body></html> 否定伪类选择器
否定伪类选择器“:not()”主要用来定位不匹配该选择器的元素。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*匹配所有div元素中除了id名为yxz的所有元素*/ div:not([id="yxz"]){ color:red; }</style></head><body><div>胸无大志者，必受制于人</div><div id="yxz">丈夫生不五鼎食，死则五鼎烹耳</div><div>大丈夫一生碌碌无为，与朽木腐草无异</div> </body></html> 伪元素
伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪元素早在css中就存在了，“:first-letter”，“:first-line”，“:before”，“:after”。在css3中对伪元素进行了一定的调整，在以前的基础上增加了一个冒号，相应的变成了“::first-letter”，“::first-line”，“::before”，“::after”，还增加了一个“::selection”。
::first-line
选择文本块中的第一个字母。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*选择p段落文本中的第一个字*/ p::first-letter{ font:normal 900 2em/2em serif; float:left; }</style></head><body><p>胸无大志者，必受制于人</p></body></html> ::first-line
与::first-letter类似，也是用来选择文本，不同的是，::first-line选择文本块的第一行。
/*选择段落文本中的第一行*/ p::first-line{ color:blue; } ::before和::after
可以在文本块之前(::before)或文本块之后(::after)插入额外的内容(content)或样式，生成的内容不会成为DOM的一部分。
/*在段落文本前加入内容"《",置为蓝色*/
p::before{
content:"《";
color:blue;
}
/在段落文本后加入内容"》",置为红色/
p::after{
content:"》";
color:red;
}
::selection
匹配突出显示的文本。伪元素::selection仅接受两个参数，一个是background，一个是color。浏览器默认情况下，选择突出的网站文本是深蓝色背景，白色的字体。
/*背景色为灰色，前景色为白色*/p::selection{ background:#808080; color:#ffffff;}/*为了支持火狐浏览器，需要加上特别的前缀*/ p::-moz-selection{ background:#808080; color:#ffffff;} 属性选择器
在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。css2中引入了一些属性选择器，这些选择器可基于元素的属性来匹配元素，而css3在css2的基础上扩展了这些属性选择器，支持基于模式匹配来定位元素。
E[attr]
选择具有属性attr的元素E。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*选择a元素中具有href属性的元素*/ a[href]{ text-decoration:none; color:black; }</style></head><body><a href="http://www.baidu.com" id=“yxz-1” class="hello world">胸无大志者，必受制于人</a><br /><a href="http://www.taobao.com" id="yxz-2" class="hello yxz">大丈夫一生碌碌无为，与朽木腐草无异</a></body></html> E[attr=val]
选择E元素中属性attr的值为val的元素。
/*选择a元素中的href属性且属性值为http://www.baidu.com的属性*/ a[href="http://www.baidu.com"]{ text-decoration:none; color:black; } E[attr|=val]
选择E元素中属性attr的属性值以val开头或以val-开头的元素。
/*选择a元素中的id属性且属性值以yxz或以yxz-开头的元素*/a[id|="yxz"]{ text-decoration:none; color:black;} E[attr~=val]
选择E元素中属性attr的值val是被空格隔开的字符串。
/*选择a元素中的class属性且属性值yxz是被空格隔开的*/a[class~="yxz"]{ text-decoration:none; color:black;} E[attr*=val]
选择E元素中的属性attr，且值val在字符串的任意处。
/*选择a元素中的class属性且属性值yxz在字符串的任意处*/a[class*="yxz"]{ text-decoration:none; color:black;} E[attr^=val]
选择E元素中的属性attr，且值以val开头。
/*选择a元素中的href属性，且值以http开头*/a[href^="http"]{ text-decoration:none; color:black;} E[attr$=val]
选择E元素中的属性attr，且值以val结尾。
/*选择a元素中的href属性，且值以com结尾*/a[href$="com"]{ text-decoration:none; color:black;} css3选择器完，但其中运用奥妙，却永无止