selectores CSS común
CSS selectores papel es identificar una clase particular de los elementos de la página HTML, y comúnmente se utiliza selectores CSS siguientes categorías, con una mirada!
Un selector de comodín
Comodín del selector común '*' signo indica, es todos los selectores en el alcance más amplio, las páginas pueden igualar todos los elementos.
sintaxis básica: * {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
Ejemplos de
usar el estilo seleccionado se define, todas las etiquetas HTML predeterminado margen de liquidación.
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
Pero el desarrollo real no recomienda el uso de selectores comodín, ya que establece el patrón de efecto en todas las etiquetas HTML, independientemente de si la marca de estilo, pero reduce la velocidad de ejecución del código.
, El selector segunda etiqueta
Los medios de selección etiqueta con el nombre de etiqueta HTML 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 básica: nombre de la etiqueta {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
Todas las etiquetas HTML como un nombre de etiqueta se pueden seleccionar, por ejemplo, un cuerpo, p, h1 y similares. La etiqueta definida selector de estilo válida para todas las etiquetas en el tipo de página.
Los ejemplos de
la página HTML seleccionado p-definir estilos para todos los párrafos.
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
La mayor ventaja es el selector de etiquetas rápida de la página en el mismo tipo de etiquetado de estilo, y esto también era sus deficiencias, no pueden ser diferenciados estilo de diseño.
, El selector de tercera clase
usos selector de clase ** '' ** (punto Inglés) se identifica, seguido del nombre de la clase.
sintaxis básica: nombre de la clase {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
La gramática, el nombre de clase es el valor del atributo de clase de elementos HTML, la mayoría elemento HTML puede definir un atributo de clase.
ejemplo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7 .red{color: red;}
8 .green{color:green;}
9 .font22{font-size:22px;}
10 p{ text-decoration:underline; font- family:"微软雅黑"; }
11 </style>
12 </head>
13 <body>
14 <h2 class="red">二级标题文本</h2>
15 <p class-"green font22">段落文本内容</p>
16 <p class="red font22">段落二文本内容</p>
17 <p>段落三文本内容</p>
18 </body>
19 </html>
El objeto elemento selector de clase mayor ventaja se puede definir como un separado o el mismo estilo, y una pluralidad de marcas puede ser usado con un nombre de clase, el mismo puede implementarse como diferentes tipos de etiquetas estilo especificados. Mientras tanto, un elemento HTML puede ser múltiples categorías de clase, una pluralidad de patrones, separados por espacios caso requiere una pluralidad de nombres de clase, códigos como se describe en las dos anteriores <p>marcadores.
Nota: el nombre de la clase del primer carácter no puede utilizar números y estrictamente entre mayúsculas y minúsculas. En general, utilizar caracteres en minúsculas en inglés.
Cuatro, selector de ID
** selector de ID usos '#' ** son identificados, seguido del ID.
sintaxis básica: nombre #id {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
El nombre de sintaxis, id es el valor del atributo ID de elementos HTML, la mayoría de los elementos HTML pueden ser definidos atributo id, elementos de valor de ID son únicos y sólo puede corresponder a un documento sobre un elemento específico.
ejemplo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>
Nota: No permita que el mismo ID utilizado en varias etiquetas, aunque muchos navegadores y no se queja, sino un lenguaje de script tales como errores de JavaScript cuando se llama ID. Además, de la identificación no es compatible con la clase seleccionada como se define anteriormente pluralidad selector de valores.
selector de atributos V.
selectores de atributos pueden haber establecido el estilo para el atributo especificado del elemento HTML, no sólo los atributos class e id.
Sintaxis: [nombre de la etiqueta] {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
Nota :! Sólo cuando el DOCTYPE, IE7 e IE8 sólo selectores de atributos apoyo. En IE6 y versiones anteriores, no soporta la propiedad seleccionada.
Manual de CSS Selector de referencia:
| selector | descripción |
|---|---|
| [atributo] | Para seleccionar elementos con el atributo especificado |
| [Atributo = valor] | Para la selección de los elementos con los atributos y valores especificados |
| [Atributo ~ = valor] | Selección del valor de la propiedad para el elemento que contiene las palabras especificadas |
| [AttributeI = valor] | Para la selección de valores de atributos de elementos que tienen que comenzar con un valor especificado, este valor debe ser una palabra completa |
| [Atributo ^ = valor] | Coincidencia de valor de atributo de cada elemento comienza con el valor especificado |
| [Atributo $ = valor] | Coincidencia de valor de atributo con el valor especificado en el extremo de cada elemento |
| [Atributo * = valor] | Incluye el valor del atributo especificado que coincida con el valor de cada elemento |
ejemplo
1, establecer el estilo de todos los elementos con el atributo del título:
[title]
{
color:red;
}
2, por el título = "w3school" todos los elementos de configuración de estilo:
[title=W3School]
{
border:5px solid blue;
}
3, el conjunto de estilos que contiene todos los elementos para el valor especificado de la propiedad título. Se aplica a los valores de atributo separados por un espacio:
[title~=hello] { color:red; }
4, todos los elementos con el conjunto de estilos atributo lang contiene el valor especificado. Atributos para valores separados por un guión:
[lang|=en] { color:red; }
5, establezca la forma estilo
selector de atributo es particularmente útil cuando la hoja no se proporciona con el estilo o el ID de clase de:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
Uso del selector de atributo puede especificar sólo una propiedad del elemento, también puede especificar el valor de atributo de un atributo y su elemento correspondiente de forma simultánea.
En sexto lugar, y ajuste el selector
Y el selector está configurado para que coincida con simultáneamente una pluralidad de selectores, tomar el conjunto y una pluralidad de selectores, selectores separados por comas, como em, fuerte {}.
: Sintaxis
nombre de la etiqueta de un nombre de etiqueta {2 Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/jizuiku"/>
<title></title>
<style type="text/css">
span,div, .content {
color:darkorange;
}
</style>
</head>
<body>
<span>博客园</span>
<div>给最苦</div>
<p class="content">网页设计</p>
</body>
</html>
Y ajuste el selector tiene la ventaja de que una pluralidad de las etiquetas extraídas del mismo estilo, declaraciones colectivas, código optimizado para una fácil lectura.
Siete selectores de descendientes
selectores de descendientes también conocidos descendencia incluyen un selector para seleccionar un elemento en particular. El li .asideNav {}, representa un primer selector coincide con el segundo elemento y que pertenece al primer selector.
Sintaxis:
Label Label Nombre 1 Nombre 2 {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
En CSS, la descendencia se basa en el contexto documento DOM HTML para decidir. Nesting se produce cuando un elemento, el elemento se convierte en el elemento de la capa descendiente interior. El elemento B se incrusta dentro de los elementos A, B A es la progenie. Por otra parte, la descendencia B de A es la descendencia, como las relaciones familiares.
Definición de selector descendiente, elemento exterior EDITORIAL, el elemento interno escrito en la parte posterior, separado por un espacio. selectores de descendientes afectarán a todos los niveles de su descendencia, no hay ninguna restricción nivel. Tales como:
div p { color: red; }
selector de arriba, div p elementos elemento antecesor para las generaciones futuras, cuya función es seleccionar todos los descendientes de los elementos p de elementos div, independientemente de elemento P es un hijo del elemento div, o elementos de la relación entre los nietos más profundas, se seleccionarán . En otras palabras, no importa cuántas generaciones de descendientes P es el div, p elementos en el texto se volverá rojo.
ejemplo
espacios selectores de descendientes, se utiliza para representar la jerarquía descendiente, por supuesto, no se limita a dos. Si es necesario, se inicia a partir de un elemento antecesor, ese elemento hasta que desea aplicar el estilo, se puede poner la cadena selectores de descendientes. Tales como:
<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
<li><a href="/sale/">出售房源</a></li>
<li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>
El menú de navegación, si quieres todo el texto de anclaje es el tamaño de fuente de 16px, puede seleccionar todos los elementos por descendientes ul ul descendiente selectores A, porque selectores de descendientes afectarán a todos los niveles de su descendencia. Tales como:
ul a {
font-size: 16px;
}
Si quieren que el texto de anclaje de la segunda lista de nivel de tamaño de la fuente artículo es 12 píxeles, puede ul descendiente selectores de esta descendencia de múltiples capas de una relación a través ul.nav, seleccionar sólo la segunda etapa de anclaje elementos de la lista de texto.
ul li a {
font-size: 12px;
}
Por supuesto, esto también se puede escribir selectores de descendientes ul, li, ul, li, una, para lograr un control más preciso.
Nota:
1, incluye descendientes del hijo, nieto, siempre que la etiqueta se coloca en la descendencia son designados.
2, el nombre de etiqueta puede no 1,2, pueden utilizarse también id y class nombre, y cada clase es seleccionado por ID.
3, el selector puede derivarse infinitamente progenie.
selector de ocho progenie
usos del selector de la progenie ** '>' ** expresan como ul> li {}, que coincide con el segundo selector y el primer elemento es un selector de descendiente.
: Sintaxis
nombre de etiqueta 1> {2 etiqueta con su nombre Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
ejemplo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
<style>
#box>p{
color: darkorange; /*设置颜色为 深橙色*/
font-size: 80px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
狸花猫
</p>
</div>
</div>
</div>
<p>
大橘猫
</p>
</div>
</body>
</body>
</html>
Nota:
1, sólo para encontrar a su hijo, no va a encontrar otras etiquetas anidadas.
2, el selector de sub-elemento puede utilizar otro tipo de identificación y selector de clase para encontrarlo. selectores 3, sub-elemento pueden también> símbolo continuar.
Nueve, el selector de hermanos (+ y -)
Hermano + usos selector señal adyacentes, como p + a {}, que coincide con el primer selector y coincide inmediatamente el segundo elemento selector, tal como inmediatamente después de los elementos de un p elementos.
Si necesita seleccionar otro elemento inmediatamente después del elemento, y ambos elementos tienen el mismo padre, un hermano puede utilizarse al lado del selector.
Sintaxis: nombre Nombre del Tag 2 + 1 {Atributo 1: 1 Valor de la propiedad; Atributo 2: Propiedad Valor 2;}
ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
Hermanos sólo afectará a la etiqueta p estilo no afecta el estilo hermanos anteriormente.
Tenga en cuenta que el significado de talón '+' 'y' no es el mismo significado, el estilo hermano de selección se aplica a los elementos de hermanos, los elementos de estilo no tiene nada que ver con la referencia, la realización anterior sólo afectan a los elementos de patrón de p, sin afectar etiqueta h1 estilo.
Cuando dos hermanos son los mismos elementos, que se verá para lograr un ciclo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li + li {
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
Y ~ Selector: Encuentra toda la acción está detrás de un hermano de un elemento especificado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
X. ficticia selector
selector simulado es un selector especial, se divide en dos tipos de selectores de pseudo-clases y pseudo-selectores de objetos.
selector de pseudo-clase:
la CSS proporciona cinco selectores de clase de pseudo básicos, cinco estados correspondientes etiquetas HTML.
| selector de pseudo clase | efecto | objeto aplicación |
|---|---|---|
| :flotar | Cuando el modelo de indicador se define mouseover (a través de) | Todas las marcas de visualización |
| :enlace | Los estilos de etiquetas personalizadas en un estado de hipervínculos | una etiqueta |
| :atención | estilo de marcador definido en la obtención del enfoque | una etiqueta (navegador IE no soporta) |
| :visitó | Definiciones de estilo que se accede después de la marca | una etiqueta |
| :activo | estilo de etiqueta personalizada a la hora seleccionada | una etiqueta |
ejemplo
La siguiente es una etiqueta 5
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
Añadir algunos estilos CSS:
a{
padding: 10px;
color:black; /*初始颜色全为黑色*/
font-weight: bold;
}
#a1:hover{
color:red; /*当鼠标悬停时链接1变成红色*/
}
#a2:link{
background-color: blue; /*给链接2添加蓝色的背景色*/
}
#a3:focus{
color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
}
#a4:visited{
color:green; /*被访问过后的链接4变为绿色*/
}
#a5:active{
background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
}
Además de estas cinco selectores básicos pseudo-clase, también es compatible con CSS, tales como: la selección selectores de pseudo-clase de lengua, etc. ":: first-child" selector primer elemento y "lang ()".
2. seudo selector objeto
selectores de pseudo objeto definen elementos de patrón parciales dentro del objeto.
| Selector de objetos seudo | efecto |
|---|---|
| :primera letra | El texto de la definición primera estilo de carácter |
| :primera linea | La primera línea de estilos de texto personalizados |
| :antes de | Antes de definir el estilo del contenido del objeto |
| :después | Después de definir el estilo de los objetos de contenido |
ejemplo
<p>我是文本我是文本我是文本我是文本</p>
Uso: después de después de Estilo: before y:
p:before{
content:'我说：“';/*在文本前面追加内容*/
color:red;
}
p:after{
content:'。”我说完了！';/*在文本结尾追加内容*/
color:red;
}
Estos son los selectores CSS comunes que usted, usted lo recuerda?^_^
