Home >Web Front-end >HTML Tutorial >css3 selector (1)_html/css_WEB-ITnose
css3 selector (1)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:091256browse
Start the text directly.
1. Attribute selectorAttribute selector selects elements based on their attributes and attribute values. Using attribute selectors well can elevate your level to a higher level.
1. Select elements based on attributes only
is suitable for selecting elements with a certain attribute, only caring about the attribute and not caring about the attribute value. .
Note: There is no colon or space between the element and the square brackets, and there can be no space between square brackets.
a. Select [E[Attr]] according to an attribute:
*[title]{color:blue;} can be set for all elements with title style.
a[href]{color:red;} only applies styles to anchors with href (a elements).
b. Select [E[Attr1][Attr2]] based on multiple attributes :
a[href][title]{color: red;} for the same time Styles are applied by anchors (a elements) with href and title attributes.
A very practical way to debug styles : img[alt] {border: 5px solid red;} applies styles to all images with alt attributes, thereby highlighting these valid images . This method can be used to diagnose whether the image is indeed valid.
When matching elements based on attribute selectors, these attributes can be customized values. For example:
Define an attribute haha, assign it a value of test, and then pass div[haha] this Attribute selectors can be used to match and add styles.
<style>div[haha]{ background-color: green;}</style><div haha="test">一个测试的div元素</div> The reason why I chose the name so casually is to illustrate that in the attribute selector, custom attributes can also be used, of course this is Not recommended.
2. Select based on attribute values
Select based on attribute values to further narrow the selection range.
a. Select [E[Attr=Val]] based on one attribute value. :
b. Select [E[Attr1=] based on multiple attribute values. Val1][Attr2=Val2]】:
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
The above are all exact matches, and you can also choose based on some attribute values.
c. Match a word in the word list of attribute value [E[Attr~=Val]]
For multiple attributes separated by spaces value, you need to use the tilde (~) for matching.
[title~=hello]{color:red;} can select3231d9bb3309b9de0d61e4a49ffd4125Hello world2e9b454fa8428549ca2e64dfac4625cd, but cannot select
d. Specific attribute selection type [E[Attr|=Val]]
E[Attr|=Val] selects the attribute Attr And the attribute value of Attr is an element starting with Val or Val-.
*[lang|="en"]{color: red;} can match all elements whose lang attribute is equal to en or starts with en-.
Hello!
Greetings!
G'day!
Bonjour!
Jrooana!
e. Attribute selector using wildcard characters [E[Attr^=Val]][E[ Attr$=Val]][E[Attr*=Val]]
The big boss in the css3 attribute selector makes the selector function improve every minute.
E[att^="val"], the selector matches the element E, and the E element defines the attribute att. The attribute value of att is any string starting with val.
E[att$="val"], the selector matches the element E, and the E element defines the attribute att, and the attribute value of att is any string ending with val.
E[att*="val"], the selector matches the element E, and the element defines the attribute att, and the att attribute value contains "val" anywhere.
These wildcard characters are the same as those in jquery.
For example:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">a[class^=icon]{ background: green; color:#fff;}a[href$=pdf]{ background: orange; color: #fff;}a[title*=more]{ background: blue; color: #fff;}</style></head><body><a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a></body></html> f. Attribute selectors can also be used in HTML5. data attribute, but its use is not recommended.
div[data-myid="123456"]{ background-color: green;}<div id="xxx" name="test" data-myid="123456">div</div> 2. Structural pseudo-class selection [:root] :root is the root selector, matching the root element of the document tree where the element is located, and in the html document, the root element It is html, so :root is equivalent to html.
The following three ways of writing are equivalent:
html:root { background:orange;}:root { background:orange;}html { background:orange;} I don’t know why it says “It is recommended to use: root method” on the Internet, but there is no one. Reason, haha. I have reservations about :root because I really don’t think it’s of any use.
3. Structural pseudo-class selector [:not]:not selector is the same as the :not selector in jquery. It selects all elements except a certain element. It is a relatively easy-to-use selector. .
Notes on using the :not selector:
Note: [:not] must immediately follow the element and cannot have spaces. :not is followed by parentheses, which are not found in attribute selectors.
A useful example: add a red border to the input in the form except the submit button.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">form{ width: 200px; margin: 20px auto;}div{ margin-bottom: 20px;}/*input[type="text"]{ border:1px solid red;}*/input:not([type="submit"]){ border:1px solid red;}</style></head><body><form> <div> <label for="name">昵称:</label> <input type="text" id="name" placeholder="starof"> </div> <div> <label for="password">密码:</label> <input type="text" id="password" placeholder="******"> </div> <div> <input type="submit" value="提交"> </div></form></body></html> 4. Structural pseudo-class selector [:empty] : The empty selector represents empty and is used to Select elements without any content. There really is no content at all, and there can be no spaces.
举例：第一个e388a4556c0f65e1904146cc1a846bee有文字内容，第二个e388a4556c0f65e1904146cc1a846bee只有一个空格，第三个e388a4556c0f65e1904146cc1a846bee为空。:empty就可以选中第三个e388a4556c0f65e1904146cc1a846bee给它添加样式。
<style type="text/css">p{ background-color: orange; min-height: 30px;}:empty{ background-color: red;}</style><p>我是一个段落</p><p> </p><p></p>? 在jquery中empty()和remove([expr])都用来移除元素，但是empty()是移除了指定元素中的所有子节点，仍保留其在dom中所占的位置。$("p").empty()，就会剩下e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3这样一个空标签，此时就可以用css3中的:empty为其添加样式。remove([expr])则是把其从dom中删除，而不会保留其所占的位置。
五、结构性伪类选择器【：target】：target为目标选择器，用来匹配相关URL指向的元素。
：target是个很有意思的结构化伪类选择器，可以很轻松的实现点一个标题显示内容，而且还可以用#brand:target p{}这样配合选择target下的后代选择器。
举例：简洁版手风琴效果。
这样.accordion :target p{display: block;}一行代码就可以实现手风琴的效果。
<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>css手风琴效果</title> <style type="text/css">.accordion p{ display: none;} .accordion :target p{ display: block;}/*和下面这种写法是等价的*//*#section-1:target p,#section-2:target p,#section-3:target p{ display: block;}; */ </style></head><body> <div class="accordion"> <div id="section-1"> <h2> <a href="#section-1">section-1</a> </h2> <p>第一部分内容</p> </div> <div id="section-2"> <h2> <a href="#section-2">section-2</a> </h2> <p>第二部分内容</p> </div> <div id="section-3"> <h2> <a href="#section-3">section-3</a> </h2> <p>第三部分内容</p> </div> </div></body></html>
MDN相关资料:target
Using the :target selector
六、结构性伪类选择器【first-child】":first-child"选择器表示的是选择父元素的第一个子元素E。
举个例子：对比后代元素，子元素和第一个子元素。
后代元素：选择所有后代。
子元素：只选择第一代。
:first-chid：选择第一代中的第一个元素【这个站在父元素的角度理解的，如果站在元素自身的角度理解就是，如果该元素是其父元素的第一个子元素，就选中，通俗理解就是如果小明是他爸爸的大儿子就选中】。
代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>结构性伪类选择器?first-child</title> <style type="text/css"> ul.ancestor li{ background-color: yellow; } ul.ancestor >li{ background-color: green; } ul.ancestor >li:first-child{ color: orange; } </style></head><body> <ul class="ancestor"> <li> <a href="##">Link1</a> 文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色 </li> <li> <a href="##">Link2</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link3</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <ul> <li> <a href="##">Link4</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link5</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link6</a> 关注文字颜色，不要关注超链接颜色 </li> </ul> </li> <li> <a href="##">Link7</a> 不要关注超链接颜色 </li> </ul></body></html> 分析：
说明：ul.ancestor是为了意思更明确这些写的，各位正式写嗲吗只要写.ancestor就好了。
ul.ancestor li：是后代选择器，所以样式会应用到所有的后代li元素，让它们背景色变黄。
ul.ancestor >li:是子选择器，所以样式会应用到第一代li元素，让它们背景色变绿，覆盖前面样式。
ul.ancestor >li:first-child：选择第一代中的第一个li元素，让其文字颜色变为橘色。
补充内容
为什么我要写这句话：文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色。
因为慕课网出的一道题：将无序列表的第一个项目符号设置为红色。答案是ul li:first-child{ color: red;}。导致我以为只能选中项目符号，所以就测试了一下，确实是选择第一代中第一个元素。
有兴趣的可自行测试：
<p style="color:red">文字<a href="#">a</a></p>
效果为：，
原因是浏览器默认样式覆盖了继承自p的color样式。
Note:
看第一眼我以为我以为ul:first-child会是选中第一个li呢，但其真正的含义是，如果ul是它父元素的第一个子元素，就选中加样式。所以避免出错推荐像我这样ul.ancestor >li:first-child非常明确的写出，而不用自己去推测。
:last-child和:first-chld类似，用来选择第一代中最后一个元素，是个很实用的选择器。
举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">ul{ list-style-type: none; border:1px solid grey; display: inline-block; padding: 0; width: 200px;}li{ padding: 5px; border-bottom: 3px solid grey;}ul >li:last-child{ border-bottom:none;}</style></head><body><ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li></ul></body></html>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。