ホームページ > 記事 > ウェブフロントエンド > 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} 这种方式来设置样式
例:
4、ID 选择器
即元素中带有属性id在设置样式的时候可以使用 #idname{style} 这种方式来设置样式
例:
5、后代选择器
这个也是很常见的一个选择器,只是可能名称听起来有点不太熟悉
举个例子大家就明白了
例:
div ul{color:#FF0}
这就是一个简单的后代选择器,就是谁下面的谁,就是这样了
6、子元素选择器
这个选择器,在最开始的时候,莫名其妙的就被我忽略了,知道后来,突然间看到了一个案例,才又想起来 - -、
还是用例子说话比较好
例:
div > h1{color:red;}
この例では、div の 1 行目と 2 行目の h1 のみが選択されますが、3 行目の h1 は選択されません。
この子要素セレクターは直接の子要素のみを選択するため、選択されません。
3 行目の h1 は li の直接の子要素であり、div の直接の子要素ではないため、動作しません
7 隣接する兄弟セレクターは
を選択します。別の要素の直後にある要素であり、両方とも同じ親要素を持っています
h1 + p {color:red;}
text
text< ;/p>
h1 の下にある最初の p は選択されますが、2 番目の p は h1 の直後ではないため、選択されません
li + li {font-weight:bold;}
8. 擬似クラス
は非常にハイエンドに聞こえますが、a:link、a:visited、a:hover、a:active がすべて擬似クラスである場合は、そうではありません。実際、これは擬似アンカー クラスと呼ばれています (名前は「より高度な」という意味です)
:focus
これはより実用的で、入力テキストの背景を設定するために使用できます
input :focus{background-color: yellow;}
この場合、クリックするとボタンの背景が黄色になりますが、これは少し不快ですが、自由に展開できます
例:
input[type] ="text"]:focus{background-color: yellow;}
こうすることで、送信ボタンをクリックしても黄色に変わりません
は、:first-child が IE で有効になるように DOCTYPE を宣言する必要があります。
p:first-child {font-weight:大胆な;}
li:first-child {font-weight:大胆な;}
テスト単語1
テストワードul p
テスト単語2
テスト単語 4
test Words1
と p を選択します。 2 番目の ul、残りの p は選択されません
各 ul の最初の li も、異なる親を持つため選択されます
注: !DOCTYPE が指定されている場合、 Internet Explorer 8 (以降) は :focus 疑似クラスをサポートします。
:lang
:lang クラスは、値 "no" の lang 属性を持つ q 要素の引用符のタイプを定義します
q:lang(no){quotes: "~" "~" }
text これは記事内の段落です。
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;}
[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 text
this is content
this is content
this is content
this is content
this is content
[attribute^=value] 匹配属性值以指定值开头的每个元素。
这个用法也是在wordpress里面常见的,控制性很强大
div[class^="my"]{background:#FF0;}
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
这个功能就跟上面的差不多了,上一个是开头,这个是结尾
div[class$="my"]{background:#ffff00;}
[attribute*=value] は、属性値に指定された値が含まれるすべての要素と一致します。
上の 2 つ、最初と最後に 1 つありますが、これには
div[class*="my"]{background:#ffff00;}
div[class$="my"]{background:#ffff00 が含まれています;}
このブログ投稿は詳細ではなく、私自身の洞察もあまりありません。これは、私が仕事や勉強で見たり使用したりしたことの単なる要約です。間違いはありませんか、みんなができることを願っています
私を指摘し、お互いに学んでくれてありがとう。