CSS._html/css_WEB-ITnose で知っておく必要があるもう 1 つのセレクター

CSS には、まだ知らない人もいるかもしれないいくつかの優れたセレクターもあります。たとえば、偶数と奇数を選択するなど、実際のプロジェクトで Web ページを簡単に制御できるようになります。この記事では、ID やクラスなどの既知の CSS セレクターを適用しません。

これらのセレクターの仕組みと、さらに高度な内容について説明します。

2. 最初の行と最初の文字

p:first-letter	给段落中的第一个字母样式
p:first-line	选择段落中的第一行

3. 兄弟と子

:before	CSS中使用content属性添加一个元素到当前元素之前
:after	CSS中使用content属性添加一个元素到当前元素之后

4. ターゲット疑似クラス

body > p	选择仅直接孩子 p 标签(不能是嵌套的)
h1 + p	选择紧跟在h1标签后面的兄弟节点p
h1 ~ pre	找到所有跟在h1后面的pre标签

特別な疑似クラス: target

セレクター	URL	Div
*:target	http://example.com/about.html #thebox	この DIV に設定します

これを使用すると便利です。サイト http:// にアクセスしてください。 example.com/about.html#thebox, :target を実行し、設定されたボックスの ID を使用してスタイルを設定します。

选择器	URL	Div
*:target	http://example.com/about.html#thebox	设置在这个DIV

たとえば、ページが非常に長く、コメントに直接ジャンプする必要がある場合は、これを実行します。このとき、ページの#id(リンクに記載)で設定され、そのidに対応する位置にジャンプする際に、そのジャンプ位置にスタイル効果を与えることができます。 . :nth-child pseudo-class

6. 属性セレクター

tr:first-child / tr:last-child	第一个或者最后一个
tr:nth-child(odd) / tr:nth-child(even)	选择奇数或者偶数元素
tr:nth-child(10n-1)	每9, 19, 29, 等元素
tr:nth-child(-n+6)	表格的前6行
tr:nth-child(-n+6)	表格的前6行

その他のセレクターもありますが、ここにはリストされていません。例: nth-of-type。すべてのセレクターは W3C Web サイト (http://www.w3.org/TR/selectors/#attribute-selectors) にリストされています。

この記事は Wu Tongwei のブログに属します。

[attr~=”value”]	a[rel~=”copyright”]	任何元素的一系列属性设定,以空格分割
[attr|=”value”]	a[hreflang|=”en”]	任何a以en开头的属性
[attr^=”value”]	img[src^=”images/”]	一个特定字符串开始匹配
[attr$=”value”]	a[href$=”.html”]	一个特定字符串结束匹配

WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233

元の記事、転載する場合は出典と対応するリンクを明記してください: http://www.wutongwei.com/front/infor_showone.tweb?id=181、ようこそ拡散して共有してください。