ホームページ > 記事 > ウェブフロントエンド > 強力な CSS3 selector_html/css_WEB-ITnose
強力な CSS3 selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:221061ブラウズ
すべてのフロントエンド エンジニアは毎日何らかの CSS を書くかもしれませんが、その中でセレクターは非常に重要な部分です。ただし、おそらく毎日作成するもののほとんどは、#id、.class などのセレクターです。これは驚くべきことではありませんが、CSS3 が提供する強力でエレガントなセレクターを理解し、慣れていれば、コードを簡素化できます。
CSS3 セレクターを学習して整理するときは、そのブラウザーのサポートについては考慮しません。必要に応じて、「caniuse.com」でブラウザーのサポートを確認できます。
1. 基本セレクター
1. ワイルドカード セレクター "*"
*{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0 .demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色
2. 要素セレクター "Element"
body{background:#ccc} //选择body元素 ul{background:#fff} //选择列表ul元素
3 .ID セレクター " #id"
html: <div id="demo"></div> css: #demo{do something}
4. クラスセレクター ".class"
html: <ul class="demo"></ul> css: .demo{do something} ul.demo{do something} //这样只会选择有demo类名的ul元素 複数のページ要素は同じクラス名を持つことができますが、要素の ID は一意である必要があることに注意してください。ページ内で。
5. グループ セレクター "selector1,..., selectorN"
html:<div class="section-1"></div><div class="section-2"></div><div class="section-3"></div>ccss:.section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式
2. 階層セレクター
6. 子孫セレクター
E要素に一致するものを選択してくださいその中のすべての要素は F と一致します。
html：<div class="parent"> <div class="child"></div> <div class="child"> <div class="c-child"> <div class="c-c-child"></div> </div> </div> </div>css:.parent div{do something} //会选择parent里面的所有div，不管是子元素.child还是孙元素.c-child和.c-c-child
7. サブセレクター "E > F"
F に一致する E に一致する要素の直接の子要素を選択します。
html： <div class="parent"> <div class="child"></div> <div class="child"> <div class="c-child"> <div class="c-c-child"></div> </div> </div> </div> css: .parent > div{do something} //只会选择.parent元素的直系子元素，也就是只会选择到 .child元素
8. 隣接する兄弟要素セレクター「E + F」
E と F は同じ親要素を持つ兄弟要素であり、F 要素は E 要素のすぐ後ろにあります。隣接する兄弟セレクターを使用できます。
html:<div> <div class="demo">1</div> <div>2</div> <div>3</div></div>css:.demo + div {do something}//会选中内容为2的div
9. ユニバーサル兄弟セレクター「E ~ F」
E と F は同じ親要素を持つ兄弟要素であり、F 要素は E 要素の後にあり、E ~ F は E を選択しますelement 後続のすべての F 要素。
html: <div> <div class="demo">1</div> <div>2</div> <div>3</div> <div>4</div> </div> css: .demo ~ div {do something}//会选中内容为2,3,4的div
3. 擬似クラスセレクター
10. 動的擬似クラスセレクター "E:link,E:visited,E:hover,E:focus"
E:link{do something} //选择定义了超链接但链接还未被访问过的元素 E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素 E:active{do something} //选择匹配的E元素，且元素被激活，常用在锚点和按钮上 E:hover{do something} //选择鼠标停留的匹配的E元素 E:focus{do something} //选择匹配的E元素，且元素获得焦点
11. ターゲット疑似クラス セレクター "E:target"
は E に一致するすべての要素を選択し、一致する要素は関連する URL によってポイントされます。
平たく言えば、ページの URL に #something (https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1) という単語が含まれている場合: target は、次の ID と一致するために使用されます。 #something(section-1) の要素のページ。
これは、:target を使用して純粋な CSS アコーディオン効果を実現するデモです: [ソース コードを表示][デモを実行]
12. 言語擬似クラス セレクター "E:lang(言語)"
is used 値が language である lang 属性で指定された要素を選択します。
html: <html lang="en-US"></html> css: :lang(en-US) {do something} Web ページが別の言語バージョンに切り替わるとき、このセレクターを使用して特別な処理を実行できることがあります。
13. ステータス擬似クラス セレクター "E:checked,E:enabled,E:disabled"
E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮 E:enabled{do something} //匹配所有起用的表单元素 E:disabled{do something} //匹配所有禁用的表单元素
14. 構造体擬似クラス セレクター "E:first-child" 、 E:最後の子、E:ルート、E:n番目の子(n)、E:n番目の最後の子(n)、E:n番目のタイプ(n)、E:n番目の最後のタイプ(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty"
14.1 [E:first- child]
は、特定の要素の最初の子要素を選択するために使用されます。
rrree
14.2 [E:last-child]
特定の要素の最後の子要素を選択するために使用されます。
html:<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>css:ul > li:first-child {do something} //用来选取ul中的第一个li元素 14.3 [E:nth-child()],[E:nth-last-child()]
親要素の 1 つ以上の特定の子要素を選択するために使用され、n は次のとおりです。数値 (1 から始まる)、n を含む式、または odd (奇数) または Even (偶数)。
E:nth-last-child() セレクターの使用方法は E:nth-child() と同じです。違いは、E:nth-last-child() で選択される要素が最後の要素であることです。親要素のカウントは子要素から始まります。
html: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> css: ul > li:last-child {do something} //用来选取ul中的最后一个li元素 14.4 [E:root]
は、要素 E が配置されているドキュメント内のルート要素と一致するために使用されます。HTML ドキュメントでは、ルート要素は常に html です。
14.5 [E:nth-of-type(),E:nth-last-of-type()]
E:nth-of-type() は、親で指定された特定の型のみをカウントしますelement サブ要素のタイプ。要素に複数のサブ要素タイプがある場合、nth-of-type を使用して選択すると便利です。
E:nth-last-of-type() の使用法は E:nth-of-type() と同じですが、違いは:nth-last-of-type() も最後の子から始まることです。親要素の要素をカウントアップします。
li:nth-of-type(3)的话就会标识它只会选择第三个li元素，别的元素会忽略掉，如：
html:<ul> <li>1</li> <li>2</li> <div>3</div> <div>4</div> <li>5</li> <li>6</li> <li>7</li> <li>8</li></ul>ul > li:nth-of-type(3){do something} //会选中内容为5的li元素
但是使用nth-child就会是这样：
html:<ul> <li>1</li> <li>2</li> <div>3</div> <div>4</div> <li>5</li> <li>6</li> <li>7</li> <li>8</li></ul>ul > li:nth-child(3){do something} //会选中内容为3的div元素
14.6 [E:first-of-type,E:last-of-type]
:first-of-type和:last-of-type这两个选择器类似于:first-child和:last-child，不同的就是指定了元素的类型。
html: <ul> <div>1</div> <div>2</div> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> CSS： ul > li:first-of-type{do something} //会选中内容为3的li元素
14.7 [E:only-child]
匹配的元素E是其父元素的唯一子元素，也就是说匹配元素的父元素只有一个子元素。
html:<div class="demo"> <p>1-1</p> <p>1-2</p></div><div class="demo"> <p>2-1</p></div>css:.demo > p:only-child{do something}//会选取到内容为2-1的p元素
14.8 [E:only-of-type]
:only-of-type用来选择一个元素，他的类型在他父元素的所有子元素中是唯一的。也就是说，一个父元素有很多子元素，而其中只有一个子元素的类型是唯一的，那么就可以使用:only-of-type来选取这个元素。
这个属性说起来有点绕口，写了个简陋的demo说明意思：[查看源码][运行demo]
14.9 [E:empty]
:empty用来选择没有任何内容的元素，哪怕是一个空格都没有的元素。
15 否定伪类选择器「E:not(F)」
可以用来选取所有除了F外的所有元素。
input:not([type=submit]){do something} //可以用来给表单的所有input元素定义样式，除了submit按钮之外
四、伪元素
以前我们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号，主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法，但是其他现代浏览器两种表示方法是都可以的，也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。
16. 「::first-letter」
::first-letter用来选择文本块的第一个字母,常用于文本排版方面。
html： <div> <p>this is test line.....</p> </div>css:div p::first-letter{do something} //将会选中<p>中的第一个字母t
17. 「::first-line」
::first-line用于匹配元素的第一行文本，也是常用于文本排版。
html： <div> <p> this is first line..........省略....... this is the second line ...省略.... </p> </div> css: div p::first-line{do something} //将会选中<p>中的第一行文字
18. 「::before,::after」
::before,::after同我们之前熟用的:before和:after使用方法相同，它们不是指存于标记中的内容，是配合使用content属性可以插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。
19. 「::selection」
css3新定义的伪元素::selection用来匹配突出显示的文本。但是使用前需要确认浏览器对它的支持程度。
浏览器默认的情况下，我们选中的文本背景是蓝色，字体是白色。通过使用::selection，我们可以改变它的效果。
::selection{background:#ccc;color:red} //这样改写后我们选中的文本背景颜色和文字颜色就可以自定义了 但是需要注意的是，::selection仅接受两个属性，一个是background，一个是color。
五、属性选择器
在html中，通过给元素添加属性，给以给元素添加一些附加的信息，属性选择器就可以通过定位属性来选取特定的元素。
20. 「 E[attr] 」
用来选择有某个属性的元素，不论这个属性的值是什么。
html:<div id="demo"> <a href="" id="test"></a> <a href="www.taobao.com" class="taobao"></a> <a href="#" id="show"></div>css:a[id]{do something} //将会选择具有id属性的a标签
21. 「 E[attr=val] 」
用来选取具有属性attr并且属性值为val的元素。
html: <div id="demo"> <a href="" id="test" title="test"></a> <a href="www.taobao.com" class="taobao"></a> <a href="#" id="show" title="test"></div> css: a[id=test][title]{do something} //将会选择具有id属性值为test且具有title属性的a标签
22. 「 E[attr|=val] 」
E[attr|=val]用来选择具有属性attr且属性的值为val或以val-开头的元素(其中-是不可或缺的)。
html: <div id="demo"> <a href="" id="test" title="test" lang="zh"></a> <a href="www.taobao.com" class="taobao" lang="zh-cn"></a> <a href="#" id="show" title="test"> </div> css: a[lang|=zh]{do something} //将会选择具有lang属性值为zh或属性值以zh开头的a标签
23. 「 E[attr~=val] 」
当某个元素的某个属性具有多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。
html: <div id="demo"> <a href="" id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="second test"></a> <a href="#" id="show" title="test"> </div> css: a[title~=test]{do something} //将会选择具有title属性且其中一个属性值为test的a标签
24. 「 E[attr*=val] 」
这个属性选择器使用了通配符，用来选择具有属性attr并且只要属性值中包含val字符串的元素。也就是说只要所选属性中有val字符串，不管是不是多个用空格分隔的属性值，都将被选中。
html: <div id="demo"> <a href="" id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[title*=test]{do something} //将会选择具有title属性且其属性值包含test字符串的a标签
25. 「 E[attr^=val] 」
用来选择属性attr的属性值是以val开头的所有元素，注意它与E[attr|=val]的区别，attr|=val中-是必不可少的，也就是说以val-开头。
html: <div id="demo"> <a href=" http://zhangmengxue.com" id="test" title="test first"></a> <a href="www.taobao.com" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[href^=http]{do something} //将会选择href属性以http开头的a标签
26. 「 E[attr$=val] 」
这个选择器刚好跟E[attr^=val]相反，用来选择具有attr属性且属性值以val结尾的元素。
html: <div id="demo"> <a href=" http://zhangmengxue.com/header.png" id="test" title="test first"></a> <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a> <a href="#" id="show" title="testlink"> </div> css: a[href$=png]{do something} //将会选择href属性以png结尾的a标签