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 番目です