web

CSS选择器以及CSS的三大特性

2018-09-17  本文已影响32人  lvyweb

标签（空格分隔）： CSS

CSS选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器包括，标签选择器，id选择器，类选择器，交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器，结构伪类选择器，UI状态伪类选择器，兄弟选择器，通配符选择器(全局选择器)（*）等 下面一一介绍

语法：元素名称{属性：属性值；...}
demo:

p{    /* 选择P标签*/
color: skyblue;
font-size: 16px;
}

#id选择器指定具有ID的元素的样式.
ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)

语法: id选择器

demo:

#text{    /* 选择id="text"标签*/
color: skyblue;
font-size: 16px;
}

demo:

 .header{ 　/* 选择class="header"的元素*/
       background: skyblue;
   }

小结:写样式的时候，大部分都是用类，极少的使用id。 不提倡用id 去写样式，因为他的权重太高。 Id 主要是为了 js 做准备。

语法: 交集选择器

demo:

 p.text{    /* 选择p并且class="text"的元素*/
       background: skyblue;
   }

 h3,.text{  /* 选择h3以及class="text"的元素*/
       border: 1px solid skyblue;
   }

 .box p a{   /* 选择.box后代中包含p的并且p下面包含a的*/
       color:skyblue;
       font-weight: bold;
   }

.box>p>a{ /* 选择.box直级孩子为p并且p直级孩子是a的*/
       color:green;
   }

E[attr] //用于选取带有指定属性的元素
E[attr = value]//用于选取带有指定属性值的元素
E[attr ~= value]//用于选取属性值中包含指定词汇的元素
E[attr |= value]//用于选取带有指定值value-开头的或者值为value的元素
E[attr ^= value] //用于选取属性值以value开头的元素
E[attr $= value] //用于选取属性值以value结尾的元素
E[attr *= value] //用于选取属性值中包含value的元素

    最常见的伪类选择器
     a:link{ color: #ff6600 } /* 未被访问的链接 */  
     a:visited{ color: #87b291 } /* 已被访问的链接 */  
     a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */  
     a:active{ color: #55b28e } /* 正在被点击的链接 */

    在CSS中，主要有四个伪元素选择器。
   * first-line伪元素选择器
   用于向某个元素中的第一行文字使用样式。
   * first-letter伪元素选择器
   用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
   * before伪元素选择器
   用于在某个元素之前插入一些内容。
   * after伪元素选择器
   用于在某个元素之后插入内容。

E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
E:active选择器被用来指定元素被激活时使用的样式
E:focus选择器被用来指定元素获得光标聚焦点使用的样式，在文本框控件获得聚焦点并进行文字输入时使用。
E:enabled选择器被用来指定当元素处于可用状态时的样式。
E:disabled选择器被用来指定当元素处于不可用状态时的样式。
E:read-only选择器被用来指定当元素处于只读状态时的样式。
E:read-write选择器被用来指定当元素处于非只读状态时的样式。
E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
E:selection伪类选择器用来指定当元素处于选中状态时的样式。
E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

span~p{ //span的所有是p的兄弟标签都设置背景色为skyblue
   background: skyblue;
}

相邻兄弟选择器：只选取该元素相邻的兄弟选择器
语法:<子元素>+<子元素之后的同级兄弟元素>{}
demo:

span+p{ //span的只有span之后的p标签设置背景色为skyblue
   background: skyblue;
}

  *{
      padding:0;
      margin:0;
  }
  div *{
      background"pink;
  }

CSS的三大特性

上一篇下一篇

猜你喜欢

热点阅读