CSS selectors_html/css_WEB-ITnose について

今天刚开通博客，先自我介绍一下，Mike，大学没填志愿就跑到某培训机构学了两年，2012年出道，工作历程可谓坎坷，就不多说了，反正最终选择从
事web前端的工作。
结合出道至今的工作以及学习，写下今天这篇博文，与大家分享，并希望各位指点一二，感激不尽。
当年语文没学好，文采不好，我就直奔主题了。（主要写一下属性以及伪类吧）
1、元素选择器。
这个东西最简单，也最常见，就是以元素为选择器来添加样式
例：
html {color:black;} //设置html元素颜色black
div {color:gray;} //设置div元素颜色gray
h1 {color:silver;} //设置h1元素颜色gray

就是说，你想让某个元素使用某个样式，就直接写 元素{样式} 即可。

2、选择器分组
分组就是把某几个元素写一起设置相同的样式即可
例：
div,p,strong{color:#FF0} //设置div,p,strong它们的颜色色值为 FF0
.part_one div a,.part_two a,.part_three p{color:#FFF} //设置.part_one div a 和 .part_two a 和 .part_three p 的文本颜色值为 FFF

3、类选择器
即元素中带有属性class在设置样式的时候可以使用 .classname{style} 这种方式来设置样式
例：

This is content.

.mydiv{color:#F00;}
这样就设置了class为mydiv的元素的文本颜色值为 F00

4、ID 选择器
即元素中带有属性id在设置样式的时候可以使用 #idname{style} 这种方式来设置样式
例：

This is content.

#mydiv1{color:#F00;}
这样就设置了id为mydiv的元素的文本颜色值为 F00
(其实跟类选择器没有什么大的区别，只是权重的区别，同一个元素id选择器的样式会覆盖类选择器的样式，这里就不做详细讲解了，)

5、后代选择器
这个也是很常见的一个选择器，只是可能名称听起来有点不太熟悉
举个例子大家就明白了
例：
div ul{color:#FF0}
这就是一个简单的后代选择器，就是谁下面的谁，就是这样了

6、子元素选择器
这个选择器，在最开始的时候，莫名其妙的就被我忽略了，知道后来，突然间看到了一个案例，才又想起来 - -、
还是用例子说话比较好
例：
div > h1{color:red;}

my h1

//这个有效

li h1

//这个有效

• li h1

この例では、div の 1 行目と 2 行目の h1 のみが選択されますが、3 行目の h1 は選択されません。
この子要素セレクターは直接の子要素のみを選択するため、選択されません。
3 行目の h1 は li の直接の子要素であり、div の直接の子要素ではないため、動作しません

7 隣接する兄弟セレクターは
を選択します。別の要素の直後にある要素であり、両方とも同じ親要素を持っています
h1 + p {color:red;}

header

text

text< ;/p>
h1 の下にある最初の p は選択されますが、2 番目の p は h1 の直後ではないため、選択されません

li + li {font-weight:bold;}

• li1


• li2


• li3

< /ul>



1. li1
;

2. li2


3. li3



このスタイルは、ul と ol の 2 番目と 3 番目の li 要素にのみ適用できます。最初の li はそのすぐ上に li がない場合は、効果はありません

8. 擬似クラス
は非常にハイエンドに聞こえますが、a:link、a:visited、a:hover、a:active がすべて擬似クラスである場合は、そうではありません。実際、これは擬似アンカー クラスと呼ばれています (名前は「より高度な」という意味です)
:focus
これはより実用的で、入力テキストの背景を設定するために使用できます
input :focus{background-color: yellow;}



この場合、クリックするとボタンの背景が黄色になりますが、これは少し不快ですが、自由に展開できます
例:
input[type] ="text"]:focus{background-color: yellow;}
こうすることで、送信ボタンをクリックしても黄色に変わりません


: first-child

は、:first-child が IE で有効になるように DOCTYPE を宣言する必要があります。
p:first-child {font-weight:大胆な;}
li:first-child {font-weight:大胆な;}


テスト単語1



• li1


• li2


• li3







テストワードul p



• li1


• li2


• li3





テスト単語2


テスト単語 4

最初の子疑似クラスを初めて理解したときは、その下の最初の要素が誰であるかいつも考えていました。それを理解するのに長い時間がかかりましたが、それが最初の要素であることがわかりました
上記の HTML と同じように、CSS は最初の p、つまり

test Words1

と p を選択します。 2 番目の ul 、残りの p は選択されません
各 ul の最初の li も、異なる親を持つため選択されます
注: !DOCTYPE が指定されている場合、 Internet Explorer 8 (以降) は :focus 疑似クラスをサポートします。

:lang
正直に言うと、どのような時に使えばいいのか本当に分かりません - -、見たことある人がみんなのためにも答えてくれると嬉しいです、ちくしょう～！

:lang クラスは、値 "no" の lang 属性を持つ q 要素の引用符のタイプを定義します
q:lang(no){quotes: "~" "~" }


text これは記事内の段落です。


上記の例では、クラス記事を含むすべての段落の最初の文字が赤色に変わります。

次の属性を「first-letter」疑似要素に適用できます:
font

color
background
margin
padding
border
text-decoration
vertical-align (float が none の場合のみ)
text-transform
線の高さ
float
clear


:first-line 向文本的首行添加特殊样式
这个我自己感觉没什么用，挺少见有只给首行加不同样式的
p:first-line{color:#0000ff;}

:before 在元素之前添加内容
这种我经常用在清楚浮动上面，效果挺不错
div:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}下面是网上的案例：
h1:before{content:url(images/logo.gif)}
在h1之前添加一个图片

:after 在元素之后添加内容
h1:after {content:url(images/logo.gif)}
在h1之后添加一个图片

10、属性选择器
对于 IE8 及更早版本的浏览器中的 [attribute=value]，必须声明 。
下面列举出来属性选择器的用法
[attribute] 用于选取带有指定属性的元素。
例：
[title]{color:F00;}


hello h1~!




hello h2~!


这样就可以设置元素带有title属性的文本颜色为 F00 ,即h1的颜色将会被设置为 F00 ，但h2的将不被控制
*[title]{color:F00;} //设置带有title属性的元素文本颜色为 F00
a[title]{color:F00;} //设置带有title属性的a元素颜色为 F00
.mydiv ul li a[title]{color:F00;} //设置类名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00
#mydiv ul li a[title]{color:F00;} //设置id名为mydiv下面的ul下面的li下面的带有title属性的a元素颜色为 F00

[attribute=value] 用于选取带有指定属性和值的元素。
这个功能在某些特定情况下是很实用的，比如高亮，就不用使用jq或者后台程序来判断，只用css来就可以实现
例：
a[target="_blank"]{color:yellow;} //这样就设置了所有target属性值为_blank的a元素的颜色为yellow
h1[title="mytitle"]{color:yellow;} //这样就设置了所有title属性值为mytitle的h1元素的颜色为yellow
上面两个例子看过之后，是否就会想出在某些特定情况下的高亮实现方法了呢？

[attribute~=value] 用于选取属性值中包含指定词汇的元素。
这种用法，第一次见到的时候还是在wordpress里面，这里就以一个简单的例子来看一下
img[title~="first"]{border:3px solid yellow} //这样就设置了下方图片title 属性中包含单词first的图片会带有黄色边框




[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[class|=my]{background:yellow;}


this is header




this is text




this is content




this is content




this is content




this is content




this is content


只有前四个才会应用样式，后三个都不行。但是我不明白为什么第五个就也不行，希望有能为为大家解答的大大出现

[attribute^=value] 匹配属性值以指定值开头的每个元素。
这个用法也是在wordpress里面常见的，控制性很强大
div[class^="my"]{background:#FF0;}


this is first
//这个会有效果

this is first
//这个会有效果

this is first
//这个会有效果

this is second


this is third

[attribute$=value] 匹配属性值以指定值结尾的每个元素。
这个功能就跟上面的差不多了，上一个是开头，这个是结尾
div[class$="my"]{background:#ffff00;}


this is first


this is second


this is third
//这个会有效果

this is third
//这个会有效果

this is third
//これはうまくいきます

[attribute*=value] は、属性値に指定された値が含まれるすべての要素と一致します。
上の 2 つ、最初と最後に 1 つありますが、これには
div[class*="my"]{background:#ffff00;}
div[class$="my"]{background:#ffff00 が含まれています;}


これが最初です
//これはうまくいきます

これが2番目です


これは 2 番目です
//これは効果があります

これは 2 番目です
//これは効果があります
< div class=" third_my">これは 3 番目です

//これは効果があります

これは 3 番目です

これは 3 番目です

//これは効果的です

ブログガーデンでどれだけの人がこれらを目にするかわからないので、一部を記録するものとして扱います。私自身のこと。

このブログ投稿は詳細ではなく、私自身の洞察もあまりありません。これは、私が仕事や勉強で見たり使用したりしたことの単なる要約です。間違いはありませんか、みんなができることを願っています
私を指摘し、お互いに学んでくれてありがとう。

最後に、これを書くのはかなり疲れることに気づきました。私が尊敬する何百、何千ものブログ記事を書いた偉大な人々がどのように書いたのかは本当にわかりません。