二：前端css，即选择器
Posted fzhiyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二：前端css，即选择器相关的知识，希望对你有一定的参考价值。
前端css：
1,css 的引入方式
2，css中选择器
1.基本选择器： /*标签选择器*/
/*类标签选择器，.类属性值 重点知识*/
/*id选择器，#+id值，#id的值，不是id，重点知识*/
/* * 通用选择器，了解即可*/
2，组合选择器： /* 后代选择器, 找所有的后代*/
/*儿子选择器*/ /*div>span 大于号就表示仅限找自己的儿子标签*/
/*毗邻选择器，+表示毗邻，只找紧跟着自己的，或者说找离自己最近的*/
/*弟弟选择器 ~ 找的是同级别的下面的所有标签*/
三 属性选择器：
1,具有某个属性名 [属性名] 案列：[hobby]
2，具有某个属性名及属性值 [属性名=属性值] 案例：[hobby="dbj"]
3，具有某个属性名及属性值得标签 标签名[属性名=属性值] 案例 input[hobby="dbj"]
四：组合与嵌套： 1，分组选择器 标签名1，标签名2，标签名3，
2， /*分组与嵌套*/
/*一个css样式里可以使用多个选择器，多个不同的选择器同时使用就叫嵌套*/
#d1,.c1,span
五：伪类选择器：
a:link 未访问的链接
a:hover color: #FF00F 鼠标移动到链接上
a:active 选定的链接
a:visited 已访问的链接
input:focus input输入框获取焦点时样式
六：伪元素选择器：
before
/*在每个<p>元素之前插入内容*/ p:before
七：选择器优先级：
内联式>id选择器>类选择器>元素选择器
一基础：
1，什么是css，
CSS（Cascading Style Sheet，层叠样式表)定义如何显示html元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）
2，css语法
1，每个css有两个组成部分：选择和声明（选择器和属性名和属性值）
2，注释
/*单行注释*/
/*
多行注释
多行注释
*/
二：css的引入：
1，通过写在一个单独css文件引入（标准写法，推荐使用）
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
2，写在当前网页的<head></head>标签对的<style></style>标签对中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p
</style>
</head>
3，写在标签内部（不推荐）
三 选择器：
1.基本选择器：
<head>
<meta charset="UTF-8">
<title>css样式层叠表</title>
<style>
/*标签选择器*/
/*此时所有的p标签里的内容都会变成橘黄色，即所有p标签都会变*/
p
color: orange;
/*类标签选择器，.类属性值 重点知识*/
/*所有的只要有c1 这个类属性的都会被渲染，即class=c1的里面的文本内容都会被渲染*/
.c2
color: green;
/*id选择器，#+id值，#id的值，不是id，重点知识*/
#d1
color: red;
/*这个id=d3 如果在div中，你在div中嵌套的标签中，标签中没有添加选择器，
那么此div中的所有标签内容都会被渲染成与div一样的颜色*/
#d3
color: magenta;
/* * 通用选择器，了解即可*/
*
color: blue;
</style>
</head>
<body>
<div id="d3">今夜来嗨呀:
<p>嗨个鬼也</p>
<p id="d1" class="c1 c2">狂风呀，下雨呀，</p>
<!--<link rel="stylesheet" href="css样式层叠表.html">-->
<p id="d2" class="c1">哎呀呀，子牙呀，</p>
<span>你妹呀</span>
</div>
</body>
</html>
2，组合选择器：
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<!--需求：div里面所有的span都变成红色-->
<style>
/* 后代选择器, 找所有的后代*/
/* 就是把div里面所有的后代都选择出来，后代就是儿子，孙子..*/
/*div span */
/*color: blue;*/
/**/
/* 需求二：只想让div的儿子标签变色*/
/*儿子选择器*/ /*div里面上面span或下面span都会变色*/
/*div>span 大于号就表示仅限找自己的儿子标签*/
/*div>span */
/*color: brown;*/
/**/
/*毗邻选择器，+表示毗邻，只找紧跟着自己的，或者说找离自己最近的*/
/*此选择器只能往下找，往下找最近的一个渲染*/
/*div+span */
/*color: chartreuse;*/
/**/
/*弟弟选择器 ~ 找的是同级别的下面的所有标签*/
div~span
color: red;
div~p
color: blue;
</style>
</head>
<body>
<p>div外面上面的p</p>
<span>div；外面上面第一个span</span>
<span>div；外面上面第二个span</span>
<div>
<span>div里面上面的span</span>
<p>
<span>p里面的span</span>
</p>
<span>div里面下面的span</span>
</div>
<span>div外面下面的span</span>
<span>div外面的第二个span</span>
<p>div外面下面的p</p>
</body>
</html>
三 属性选择器：
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*
1,具有某个属性名
2，具有某个属性名及属性值
3，具有某个属性名及属性值得标签
*/
/*第一种精度最低，[]里面找的是所有的hobby内容进行渲染*/
/*[hobby] */
/**/
/*color: red;*/
/**/
/*第二种精度次之*/
/*[hobby="dbj"] */
/**/
/*color: red;*/
/**/
/*第三种精度最高, 有点指名道姓的意思*/
input[hobby="dbj"]
color: green;
</style>
</head>
<body>
<label for="">
username：<input type="text" name="username" hobby="dbj">
password：<input type="text">
</label>
<span hobby="dbj" >注册</span>
</body>
</html>
四：组合与嵌套：
<head>
<meta charset="UTF-8">
<title>分组与嵌套</title>
<style>
/*!*分组选择器*!*/
/*div，span，p*/
/*color: green;*/
/**/
/*分组与嵌套*/
/*一个css样式里可以使用多个选择器，多个不同的选择器同时使用就叫嵌套*/
#d1,.c1,span
color: fuchsia;
</style>
</head>
<body>
<p id="d1">屁</p>
<div class="c1">div</div>
<span>span</span>
</body>
</html>
五：伪类选择器：
/* 未访问的链接 */
a:link
color: #FF0000
/* 鼠标移动到链接上 */
a:hover
color: #FF00FF
/* 选定的链接 */
a:active
color: #0000FF
/* 已访问的链接 */
a:visited
color: #00FF00
/*input输入框获取焦点时样式*/
input:focus
outline: none;
六 伪元素选择器：
first-letter
常用的给首字母设置特殊样式：
p:first-letter
font-size: 48px;
color: red;
before
/*在每个<p>元素之前插入内容*/
p:before
content:"*";
color:red;
after
/*在每个<p>元素之后插入内容*/
p:after
content:"[?]";
color:blue;
七：选择器优先级：
内联式>id选择器>类选择器>元素选择器
以上是关于二：前端css，即选择器的主要内容，如果未能解决你的问题，请参考以下文章