バックエンドプログラマフロントエンドの道02--CSSセレクタ詳細

2614 ワード
目次
CSSセレクタ
  • IDセレクタ
  • クラスセレクタ
  • タグセレクタ
  • 擬似クラスセレクタ
  • 関係に基づくセレクタ
  • 属性セレクタ
  • ダミーセレクタ
    • CSS積層
  • スタイルを定義する3つの方法
  • の3つの方式の優先度
  • 開発者定義スタイル詳細
    • CSS継承スタイル優先度メカニズム 
    一、CSSセレクタ?
    ベースセレクタ
    セレクタ
    例
    説明
    #id
    #firstname
    IDセレクタ、Id=firstnameの要素を選択
    .class
    .myclass
    クラスセレクタclass=myclassのすべての要素を選択
    element
    p
    ラベルセレクタ、すべての

    要素を選択
     
     
     
     
    擬似クラスセレクタ
    セレクタ
    例
    説明
    :link
    a:link
    クリックされていないすべてのリンクを一致させ、通常使用要素visited a:visited被访问的所有链接都一致。hover a:选择在hover马乌斯波特上的链接。热门::hover Serector不仅仅是链接,也可以使用所有的要素。Active a:active"通过用户,与被亚克蒂布化的链接一致"--用户押印按钮也不会离开的状态.如果生成预测的效果,必须将上记4个塞雷克塔排在前后顺序上:link—:visited—:hover—:active.:如果选择first-child p:first-child各p要素的话,就会成为亲亲的第一个萨布勒贝。Last-child p:如果选择last-child各p要素的话,会成为亲亲的最后一个萨布勒贝。empty p:選択没有emptyサブレベル的p要素(包括提名诺德)enabled input：enabled有效的入力要素を選択：disabled input：disabled無效的入力要素を選択：checked input：checked選択した各入力要素を選択する。

    [attribute=value][target=_blank]選択する要素を選択する使用する全ての要素を選択[attribute~=value][title~=flower]ターゲット属性に単語「flower」を含む全ての要素を選択[attribute*=value][title*=flower]ターゲット属性に文字列「flower」を含む全ての要素を選択[attribute^=value][title^=flower]「flower」で始まるヘッダー属性に含まれるすべての要素を選択[attribute^=value][title^=flower]「flower」で始まるすべての要素属性におけるすべての要素の要素选择[attribute$=value][title$=flower]"flower"中选择了最终的海达属性的全部要素.阿奇法克托塞雷克塔塞雷克塔例推尔巴的:after p:after{content:“hello”;}各水平内的最后插入内容"hello",通常与content合作使用。before p:before{content:"hello";} 各水平内的首先插入"hello".:first-letter p:first-letter各要素の最初の阿尔法贝特を选択する:first-line p:first-line各要素の最初の行を选択する2、CSS积层1)布ラウザの既定のスタイル2)ユーザ定义のスタイル3)开发者定义のスタイル2、上記の上中方式の優先度：開発者定義スタイル＞ユーザーズ定義スタイル＞ブラザーデザインスタイル3、開発者定義スタイルは、次の3つのケースに分けられる。1）個別のCSSファイルとして定義する：開発中はこの形式が多く、メディア、在扩张容易的2)html页的标志内定义:如果现在的页面独立而不少标题的话,适用3)直接写成要素的style专业:只适用了测试,推荐其罗的成员坏事。Q:关于同样的重量值(参照第4号的积分)的CSS标题,你使用哪个呐?A:一句话,"在附近的原则"先靠近,用谁呐?因此,3个优先顺位:3>2>1三,CSS继承CSS继承不仅仅是要素本身,也可以向子孙相应的斯坦尔批准。例如,color被继承.在下一栏中,标志和萨布雷贝尔塔的文字变红。p{color:red;} <p>3年生の時、私はまだ<span>臆病な女の子でした。</span>p>border不能继承.以下的コード,在p级别中,框架线设定了1ピクセル、红色、实心框架线,所以没有帮助萨布要素span.p{border:1px solid red;} <p>3年生の時、私はまだ<span>臆病な女の子でした。</span>p>四,如果适用了类似类似类似类型优先度的制片的话,与优先度(韦特值)的问题相关。最后会有什么样的效果呐?各种塞雷克塔的网络价格(Weight Value)id塞雷克塔100克拉斯塞雷克塔10拟似克拉斯塞雷克塔10属性塞雷克塔10拉贝尔塞雷克塔1亚契法库塞雷克塔1继承0.1沃尔德卡(*)0多个塞雷克塔,表示最终的重量值,需要加算各Serector的重量。例:p{color:red;}/*ウェイト値は1*/ p span{color:green;} /*重み値は1+1=2*/ .warning{color:white;} /*ウェイト値は10*/ p span.warning{color:purple;} /*重み値は1+1+10=12*/ #footer .note p{color:yellow;} /*重みは100+10+1=111*/
    MVCでEntity Frameworkを用いたメソッドベースのクエリー学習ノート(一)
    HTMLの最適化