介绍css选择器之前，首先让我们来认识一下css
css——层叠样式表，作为网页排版神器不断被web前端学者们推崇着。。。
接下来就让我们来会会这个吧。。
1、CSS的特点
HTML 排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS 样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS 样式排版的分类:
内联排版样式,内嵌式排版样式,外链排版
2、CSS的排版样式
行内排版样式:
格式:1ea675ce34566a96aa64c0ec9c107469…0e558eb1c61961f1d6f7cb3162a5ff0c
例:e4a875bb692394ba48cba87de8a71f8b排版样式94b3e26ee717c64999d7867364b1b4a3
内嵌排版样式：
内嵌式排版中所有的样式定义都必须在c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927之间,而c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927又 必须在93f0f5c25f18dab9d176bd4f6de5d30e..9c3bca370b5104690d9ef395f2c5f8d1之间.
与其功能,又可以分为三种,
1.标记定义型
2.class 定义型
3.id 定义型
标记定义型格式:
<head>
<style type=”text/css”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class 定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
id 定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值 2;}
#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
外部排版样式定义:
独立的样式排版:
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
在<head>…</head>之间使用<link> 格式:
<head>
<link rel=”stylesheet” type=”text/css” href="http://www.php1.cn/">
</head>
在<head>…</head>之间使用 import 格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>介绍完CSS排版样式之后。。。。接下来就让我们来看看CSS中那些个强大的选择器吧
1、通配符选择器，也叫全体选择器——（作用于整个网页）
*{
font-size:13px;
font-family:"微软雅黑","华文楷体";
}
2、元素选择器
p,h1,h2,h3,a{
font-size:13px;
}
3、ID与类
选择器是用于控制页面设计的样式.包含 ID 选择器和类选择器. 一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的.
(1).应用ID
每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:f780de2dc8e77af113e3b919c4aebb8cThis paragraph has red text.94b3e26ee717c64999d7867364b1b4a3
相应的 CSS 代码:
#hightlight{ color:#FFFFFF; }
(2).将 ID与选择器结合
/*适合所有 h2 标题*/
h2{ color:#333; font-size:16px; }
/*只适合 title 的 h2 标题*/
h2#title { color:#eee; }
相应的 HTML 代码:
<h2>Title Of My Article</h2> <h2 id=”title”>Title Of My Article</h2>
(3).ID的使用场合
对于每个 ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存 在并仅使用一次的元素不保留,
(4).避免使用 ID的场合 当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.
(5).应用类 类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.
964bb13a67a0e53e393fe4dddb73a9dbhis paragraph has red text.94b3e26ee717c64999d7867364b1b4a3
相关 CSS 代码:
.hightlight {color:FFFFFF; }
(6).结合多个类和 ID 范例:
<ul id=”drinks”> <li class=”mix”>Beer</li> <li class=”mix”>Spirtis</li> <li class=”hot”>Cola</li> <li class=”hot”>Lemonade</li> </ul>
相应的 CSS 代码:
ul#drinks { color:FF6600; }
.mix { Color:#999999; }
.hot { Color:#333333; }
(7).利用类改写基本样式:
p{Color:#ff6600; }
.bleached {Color:#ccc; }
相应的 HTML 代码:
<p>This paragraph has red text.</p> <p class=”bleached”>This paragraph has red text.</p>
(8).直接将类链接到元素上
p.bleached {color:red; }
相应的 HTML 代码:
<p class=”bleached”>This paragraph has red text.</p>
(9).对于 class,如果多次重复使用或者使用子类选择器，那么就选择 class，如果是定义 唯一性的标记，比如布局，那么用 id。
4、 层叠
(1).外部链接实现层叠
cf0181bbd31390b8b6f8cbec8fa9c074
cf0181bbd31390b8b6f8cbec8fa9c074
cf0181bbd31390b8b6f8cbec8fa9c074
(2).导入样式实现层叠
@import url(“one.css”)
@import url(“two.css”)
@import url(“three.css”)
注意点:必须牢记一个规则,越晚给的规则越重要.
5、 分组
h1{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h2{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/*分组后*/
h1,h2.h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/*分组例外*/
h1{
Font-style:italic;
}
6、 继承
h1 { Color:#333; }
<h1>This is thegreatest heading <i>in the world</i></h1>
从 BODY 继承
Body {
Margin:10px;
Font-family:隶书;
Background:#000;
Color:#fff;
}
7、 上下文选择器
h1{
Color: #ccc;
}
I {
Color:#000;
}
/*使用上下文选择器*/
h1 I {
Color:#000;
}
8、 子类选择器
.box {
color:red;
}
.box1 {
font-weight:bold;
}
.box2 {
font-style:italic;
}
<div class="box">Box</div>
<div class="box box1">Box1</div>
<div class="box box2">Box2</div>
9、 其他选择器
(1).元素选择器
p{color:black;}
a{text-decoration:underline;}
h1{font-weight:bold;}
(2).后代选择器
h2 i{color:red; }
li a{text-decoration:none;}
#main h1{Color:red;}
(3).伪类
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).高级选择器
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避 免使用这些高级选择器.
10、子选择器和相邻同胞选择器
子选择器
#nav > li {
background:url(bg.gif) no-repeat left top;
}
<ul id="nav">
<li>Home</li>
<li>
<ul>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
相邻同胞选择器:
h1+p{font-weight:bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
11、属性选择器
<strong title=”Cascading Style Sheets”>CSS</strong>
strong[title] {border-bottom: 1px dotted #999;}
strong[title]:hover {cursor:help;background:#ccc}
12、针对列表项特别好用的两个伪类选择器：
ol li:first-child{
/*选中ol下面的第一个li*/
}
ol li:last-child{
/*选中ol下面的一最后一个li*/
}
CSS3选择器新特性
a[href$='.jsp']{
/*所有a标签中href属性为.jsp结尾的被选中*/
}
a[href^='asd]{
/*所有a标签中href属性为asd开头的被选中*/
}
a[href*='asd]{
/*所有a标签中href属性中包含asd的被选中*/
}选择表中的行：
tr:nth-of-type(even){
background-color:red;
/*选中偶数行*/
}
tr:nth-of-type(odd){
background-color:red;
/*选中奇数行*/
}
tr:nth-of-child(n){
background-color:red;
/*选中所有行*/
}
css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。
css与xml的区别是什么Apr 24, 2022 am 11:21 AM区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。
css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。
css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM转换方法：1、给英文元素添加“text-transform: uppercase;”样式，可将所有的英文字母都变成大写；2、给英文元素添加“text-transform:capitalize;”样式，可将英文文本中每个单词的首字母变为大写。
css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM在css中，可以利用“font-style”属性设置i元素不是斜体样式，该属性用于指定文本的字体样式，当属性值设置为“normal”时，会显示元素的标准字体样式，语法为“i元素{font-style:normal}”。
rtl在css是什么意思Apr 24, 2022 am 11:07 AM在css中，rtl是“right-to-left”的缩写，是从右往左的意思，指的是内联内容从右往左依次排布，是direction属性的一个属性值；该属性规定了文本的方向和书写方向，语法为“元素{direction:rtl}”。
怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM在css3中，可以用“transform-origin”属性设置rotate的旋转中心点，该属性可更改转换元素的位置，第一个参数设置x轴的旋转位置，第二个参数设置y轴旋转位置，语法为“transform-origin:x轴位置 y轴位置”。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Dreamweaver Mac版
Alat pembangunan web visual
