コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > css3 セレクター note_html/css_WEB-ITnose

css3 セレクター note_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:41:21
オリジナル
1064 人が閲覧しました

css3 セレクター

取得したページ内のさまざまな要素に従って、css3 セレクターは 5 つのカテゴリに分類されます:

  1. Basic selector
  2. Hierarchical selector

  3. Pseudo-class selector

    1. Dynamic ps eudo クラスセレクター
    2. ターゲット擬似クラスセレクター
    3. 言語擬似クラスセレクター
    4. UI要素状態擬似クラスセレクター
    5. 構造擬似クラスセレクター
    6. 否定擬似クラスセレクター
  4. 疑似要素

  5. 属性セレクター

基本セレクター

基本セレクターは、CSS で最も頻繁に使用される基本的なセレクターであり、CSS で最も早く定義されたセレクターでもあります。基本セレクターを使用して、HTML ツリー構造内の最も主要な DOM 要素ノードを決定できます。

ワイルドカードセレクター

ワイルドカードセレクター(*)は、すべての要素を選択するために使用されます。もちろん、特定の要素の下にあるすべての要素を選択することもできます。 

*{	margin:0;	padding:0;}
ログイン後にコピー

すべての要素の内外マージンが0ということです。

要素セレクター

要素セレクター(E)は、CSSセレクターの中で最も一般的で基本的なセレクターです。ドキュメントの要素には、html、body、p、div などが含まれます。 

div{	background：blue；}
ログイン後にコピー

すべての div 要素の背景色が青であることを示します。

ID セレクター

ID セレクターを使用する前に、HTML ドキュメント内の対応する要素の id 属性と値を設定して、対応する要素を見つける必要があります。 ID セレクターは一意であり、同じ ID を持つ属性値をページ上に同時に表示することはできません。 CSS スタイルで ID セレクターを使用する場合は、(#id) のように、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>
ログイン後にコピー

id属性値「yxz」を持つ要素の幅と高さが100pxで、背景が赤色であることを示します。

クラスセレクター

クラスセレクター(.class)は、文書要素から独立した方法で要素スタイルを指定します。使用方法はIDセレクターと同様で、まずHTML内で必要な要素のclass属性を定義し、その属性値を設定します。ただし、ID セレクターとは異なり、クラス セレクターはページ内で複数の同一のクラス名を持つことができますが、ID セレクターはページ全体で 1 つの ID 名のみを持つことができます。 CSS スタイルでクラス セレクターを使用する場合は、ピリオド ( .) を属性値の前に置きます ((.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>
ログイン後にコピー

クラス属性値「yxz」を持つ要素の幅と高さが100pxで、背景が赤色であることを示します。

クラスセレクターを使用する別の方法として、マルチクラスセレクターがあります。 2 つ以上のクラス セレクターをマージすることで、1 つのクラス名とは異なる要素の効果を定義できます。 

<!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>
ログイン後にコピー

クラス名「yxz」の2つのdivの幅、高さ、背景は同じですが、最初のdivは別のクラス名「sx」を持ち、それを通じて最初のdivにborder属性が追加されます。このようにして、複数の属性に一般的なスタイルと特別なスタイルを設定できます。

クラス名は HTML 文書内の異なる要素タグに同時に存在できるため。つまり、HTML ドキュメントでは、div にクラス名「yxz」を付けることができ、ul にもクラス名「yxz」を付けることができますが、場合によっては、クラス名を使用するために div にスタイルを設定するだけで十分な場合があります。 「Selector」というラベルが付いています。 

div.yxz{/*样式*/}
ログイン後にコピー

こうすることで、クラス名「yxz」を持つ div 要素のみを照合することができます。

グループセレクター

グループセレクター(selector1、selectorN)は、同じスタイルの要素をグループ化し、各セレクターをカンマ(,)で区切ります。 

<!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>
ログイン後にコピー

h1とh2が同じスタイルであることを示します。

階層セレクター

階層セレクターは、HTML DOM 要素間の階層関係を通じて要素を取得します。主な階層関係には、要素を簡単に選択するために使用できます。必要な要素。

Descendant Selector

子孫セレクター(EF)は、スペースで区切られた包含セレクターとも呼ばれ、その機能は、特定の要素の子孫要素を選択することです。 

<!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>
ログイン後にコピー

div の子孫要素のスパンと一致します。

サブセレクター

サブセレクター(E>F)は、大なり記号(>)で区切られた特定の要素のサブ要素のみを選択できます。 

<!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>
ログイン後にコピー

選択できるのはdiv配下の子要素spanだけです。spanの子要素spanはdivの子孫要素なのでマッチングできません。

隣接兄弟セレクター

隣接兄弟セレクター (E+F) は、別の要素の直後の要素を選択でき、それらは同じ親要素を持ちます。 

<!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>
ログイン後にコピー

後続の兄弟要素のspanと隣接するspanと一致します。 3 番目のスパンは 2 番目のスパンに隣接し、4 番目のスパンは 3 番目のスパンに隣接しているため、これらも一致する可能性があります。

ユニバーサル兄弟セレクター

ユニバーサル兄弟セレクター（E〜F）はCSS3で新しく追加され、要素の後ろにあるすべての兄弟要素を選択するために使用されます。また、同じ親要素を持ちます。 

<!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>
ログイン後にコピー

最初のspan要素以降の兄弟span要素をすべて選択します。

伪类选择器

　　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选择器完，但其中运用奥妙，却永无止

関連ラベル：
css3 选择器记
ソース：php.cn
前の記事：css3 プログレスバー_html/css_WEB-ITnose 次の記事：モバイル端末開発の必須知識（再版）_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
SUM を選択するときに隣接する列の順序を制御する SUM 経由で選択すると、返されるデータは 1 つのレコードにグループ化されますが、これは問題ありません。以下のクエリは合計を正しく返しますが、隣接する列の値は常に最も古いレコード...
から 2024-04-04 23:26:33
0
1
402
ベアラー トークンを処理するために適切なアプリケーション アーキテクチャを選択する OAuth2.0 を使用する API を使用したい つまり、サーバーが私の身元を確認できるように、後続のすべてのリクエストに含める必要があるアクセス トークンを取得する必要がありま...
から 2024-04-04 08:55:57
0
1
353
JS を使用して再生品質を制御する Javascript を使用してビデオの再生品質を制御する方法はありますか?より正確に言うと、JavaScriptを使用してビデオの品質を選択したいと考えています。 Chrome ...
から 2024-04-04 00:21:55
0
1
384
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート