6_css选择器

如何应用css样式？

1. 找标签
2. 写样式

如何找出标签？

　　class选择器

　　.类名（注意前面点）｛

       　　 样式

　　　　｝

　　　　.a{

   　　　　color: green;

　　　　}

　　　　<p class="a">hehehehe</p>

　　　　p标签内应用a样式，a来自class的定义

　　标签选择器

　　　　标签｛

        　　　　样式

　　　　｝

　　　　p，div，select，span，input[type = text] { 

　　　　　　样式  }　　

　　/*对input系类可以通过type指定选择input的类型*/

　　id选择器

　　　　#id｛

        　　样式

　　　　｝

1. 层级选择器

　　　　选择逻辑是一层一层找下去（以空格隔开）

　　　　　　如     .类名 #id 标签名｛ 样式 ｝，

　　　　　　样式在 #id 标签里面的所有指定的标签本身和子标签都用统一样式

1. 并集选择器（以逗号隔开，相当于“或”）

　　　　标签1，标签2 .类名，#id｛ 样式 ｝

　　　　　　表名标签1和标签2下 .类名下和指定id的都应用此样式

1. 子代选择器

　　　　父标签>子标签｛样式｝

1. 交集选择器

　　　　选择器1选择器2{样式}      –中间不空格，连起来

1. 兄弟选择器

　　　　选择器1+选择器2              –选择 选择器1相邻的同级兄弟标签，不包含选择器1

　　　　选择器1~选择器2             --选择 选择器1下选择器2同级的兄弟标签

 

1. 序选择器
   1. 标签选择器：first-child        　　          --选择同级第一个标签，不区分类型
   2. 标签选择器：first-of-type                    --   选择同级别同类型第一个
   3. 标签选择器：last-child                        --选择同级别同类型最后一个，不区分类型
   4. 标签选择器：last-of-type                    --选择同级别同类型最后一个
   5. 标签选择器：nth-child(第几个)            –选择同级别，不区分类型
   6. 标签选择器：nth-of-type(第几个)        --选择同级别同类型第几个
   7. 标签选择器：nth-last-child(第几个)
   8. 标签选择器：nth-last-type(第几个)
   9. 标签选择器：only-child                       --选择同级别只有选择的一个标签
   10. 标签选择器：only-of-tyep                   –选择同级和子级中所有同级别的唯一类型标签

 

如何逻辑整理？

1. 找到标签，写入样式
2. 标签中加入 id+clsaa 属性值
3. 通过 .类名+#id+标签名+空格层级+逗号组合  找到指定标签
4. 写css

如何通过自定义属性找到标签？属性选择器

      自定义属性名 = 属性值

      在css中写入  [自定义属性名]｛样式｝  ，也可以通过[自定义属性名|=’ 属性值’]｛样式｝，用于自定义属性名字相同的情况下

什么是伪类选择器？

      通过css进行文本内容修改

      选择器:before  在某个标签之前 ， after 在某个标签之后

      主要用于超链接显示效果

      link                 -- 未经过一次点击

      hover             -- 鼠标悬停

      visited            -- 经过一次点击

      active      　　-- 鼠标按下的状态

      一定按照这个顺序，不然有冲突