el uso de CSS básico -02

selectores CSS

1. papel selectores CSS

Seleccione los elementos de la página HTML especificados

• Por ejemplo, el siguiente código, que hace dos cosas, el H3 elegido, luego otra vez en rojo.

h3 { 
	color: red;
}

Selector en un selector de base compuesto y selector

2. selectores de base CSS

selector de 2.1 etiqueta

• concepto:

  selector de etiquetas (selectores de elementos) se refiere a la utilización del nombre de etiquetas HTML que se refiere como un selector, clasificados por nombre de la etiqueta, especifique el estilo CSS unificado para la página en algún tipo de etiqueta.

• sintaxis:

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 

• papel:

  La etiqueta puede seleccionar una etiqueta de clase de todo seleccionado como todas las etiquetas div y las etiquetas de todos lapso

• ventajas:

  Es rápido a las páginas de la etiqueta en el mismo tipo de estilo uniforme

• desventajas:

  El diseño no puede ser diferenciado estilo.

selector de clase 2.2

usos selector de clase "" (punto inglés) se identifica, seguido del nombre de la clase.

• sintaxis:

  • etiqueta

  <p class='类名'></p>
  

  • selector de nombre de la clase

  .类名  {   
      属性1:属性值1; 
      属性2:属性值2; 
      属性3:属性值3;     
  }
  

• ventajas:

  • O puede ser un elemento separado define el mismo patrón. Puede seleccionar una o más etiquetas

• nota

  • selector de clase de uso. "" (Inglés punto) se identifican, seguido del nombre de la clase (a medida, nuestra propia denominación)
  • El nombre largo o frase en una sola línea para ser utilizados para la selección de nombres.
  • No números puros, y otro nombre chino, trate de usar las letras inglesas.

uso especial 2.2.1 Clase selectores - más que el nombre de la clase

Puede especificar múltiples nombre de la clase a la etiqueta, con el fin de lograr el propósito de más opciones.

nota:

• nombres de clase media cada una separadas por un espacio.

<div class="pink fontWeight font20">亚瑟</div>
<div class="font14 pink">安其拉</div>

2.3 Identificación del selector

selector de ID utiliza el #identificado, seguido del ID

• La sintaxis básica es la siguiente:

  • etiqueta

    <p id="id名"></p>
    

  • Identificación del selector

    #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

• id es un valor único del elemento, solamente un documento correspondiente a un elemento en particular.

• Y el uso del selector de clase base misma.

Identificación del selector y el selector de distinción de clases

• estándares del W3C, en la misma página, no se les permite tener los mismos objetos que aparezca el nombre de identificación, pero permite que la misma clase de nombre. Identificación del que es único.
• Con frecuencia en la modificación del estilo de selector de clase.
• selector de ID se utiliza generalmente para elementos de página singularidad del cuerpo, a menudo con el uso de javascript.

2.4 selector de Comodín

• concepto

  Seleccionar Comodín usado *signo indica, * es elegir todas las etiquetas que es el más utilizado de todos los selectores en el alcance, las páginas pueden igualar todos los elementos.

• La sintaxis básica es la siguiente:

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• El ejemplo de código, utilizando los patrones selectores definiciones de estilo CSS, eliminar todas las etiquetas HTML márgenes predeterminados.

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

• nota:

    会匹配页面所有的元素，降低页面响应速度，不建议随便使用
  

2.5 Resumen selector de base

selector	efecto	defecto	uso	uso
selector de etiquetas	Toda la misma etiqueta puede ser seleccionado, tal como p	La diferenciación no puede elegir	más	p {color: red;}
selector de clase	Usted puede ser seleccionado o una pluralidad de etiquetas	Pueden ser seleccionados de acuerdo a las necesidades	mucho	.nav {color: red; }
Identificación del selector	Puede seleccionar sólo 1 etiqueta	Sólo se puede utilizar una vez	no se recomienda	#nav {color: red;}
selector de comodín	Seleccionar todas las etiquetas	Hay demasiadas opciones, algunos no lo hacen necesidad	no se recomienda	* {color rojo;}

2.6 Observaciones

selector

• Minimizar el uso de selector universal, *
• Minimizar el uso de selector de ID
• Sin necesidad de utilizar las definiciones específicas sin etiqueta semántica lapso selector de div

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用